Fullcalendar (Arshaw) - Adding an event with modal window
<p>I am working on arshaw calendar and I am really new to this. I want to be able to add event VIA modal window. Here are the screenshots of what I'm trying to do:</p>

<p><a href="https://i.stack.imgur.com/3O6HJ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/3O6HJ.png" alt="Arshaw fullcalendar"></a></p>

<p>In the image above, is my (Arshaw)Fullcalendar. </p>

<p><a href="https://i.stack.imgur.com/k5cSP.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/k5cSP.png" alt="Arshaw fullcalendar with modal pop up window"></a></p>

<p>The second image shows that when the user clicked on the calendar, say at 6am, the modal pops up and the user will now be able to add the event via modal.</p>

<p>Here is my code:</p>

<p>Javascript:</p>

<pre><code>//arshaw calendars
$(document).ready(function () {
    // page is now ready, initialize the calendar...

         $('#calendar').fullCalendar({
            // put your options and callbacks here
            defaultView: 'agendaDay',
            eventBorderColor: "#de1f1f",

             header:
            {  
                left: 'prev,next,today',
                center: 'title',
                right: 'month,agendaWeek,agendaDay'
            },

            editable: true,
            selectable: true,

            //When u select some space in the calendar do the following:
            select: function (start, end, allDay) {
                //do something when space selected
                //Show 'add event' modal
                $('#createEventModal').modal('show');
            },

            //When u drop an event in the calendar do the following:
            eventDrop: function (event, delta, revertFunc) {
                //do something when event is dropped at a new location
            },

            //When u resize an event in the calendar do the following:
            eventResize: function (event, delta, revertFunc) {
                //do something when event is resized
            },

            eventRender: function(event, element) {
                $(element).tooltip({title: event.title});             
            },

            //Activating modal for 'when an event is clicked'
            eventClick: function (event) {
                $('#modalTitle').html(event.title);
                $('#modalBody').html(event.description);
                $('#fullCalModal').modal();
            },
        })
    });
</code></pre>

<p>Cshtml:</p>

<pre><code>&lt;div id="amethystBackground2"&gt; &lt;!-- CSS for background page !--&gt;
    &lt;br /&gt;&lt;br /&gt;
    &lt;div class="container"&gt;
        &lt;div id='calendar' style="background:#ECF0F1"&gt;&lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;

&lt;!--Add event modal--&gt;
&lt;div id="createEventModal" class="modal fade"&gt;
    &lt;div class="modal-dialog"&gt;
        &lt;div class="modal-content"&gt;
            &lt;div class="modal-header"&gt;
                &lt;button type="button" class="close" data-dismiss="modal"&gt;&lt;span aria-hidden="true"&gt;&amp;times;&lt;/span&gt; &lt;span class="sr-only"&gt;close&lt;/span&gt;&lt;/button&gt;
                &lt;h4&gt;Add an Event&lt;/h4&gt;
            &lt;/div&gt;
            &lt;div id="modalBody" class="modal-body"&gt;
               &lt;div class="form-group"&gt;
                    &lt;input class="form-control" type="text" placeholder="Event Name"&gt;
                &lt;/div&gt;

                &lt;div class="form-group form-inline"&gt;
                    &lt;div class="input-group date" data-provide="datepicker"&gt;
                        &lt;input type="text" class="form-control" placeholder="Due Date mm/dd/yyyy"&gt;
                        &lt;div class="input-group-addon"&gt;
                            &lt;span class="glyphicon glyphicon-calendar"&gt;&lt;/span&gt;
                        &lt;/div&gt;
                    &lt;/div&gt;
                &lt;/div&gt;

                &lt;div class="form-group"&gt;
                    &lt;textarea class="form-control" type="text" rows="4" placeholder="Event Description"&gt;&lt;/textarea&gt;
                &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class="modal-footer"&gt;
                &lt;button class="btn" data-dismiss="modal" aria-hidden="true"&gt;Cancel&lt;/button&gt;
                &lt;button type="submit" class="btn btn-primary" id="submitButton"&gt;Save&lt;/button&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>How do I do that? I looked across the internet and it has something to do with the function on javascript. I am new to this and don't quite understand on how to do this. I tried this example (<a href="https://stackoverflow.com/questions/14207318/create-fullcalendar-calendar-event-on-submitting-the-form-in-bootstrap-modal-win">Create fullCalendar calendar event on submitting the form in bootstrap modal window</a>), But it does not work on mine.</p>

<p>Please help, thank you in advance.</p>