Fullcalendar (Arshaw) - Adding an event with modal window

Question

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:

In the image above, is my (Arshaw)Fullcalendar.

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.

Here is my code:

Javascript:

//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();
            },
        })
    });

Cshtml:

<div id="amethystBackground2"> <!-- CSS for background page !-->
    <br /><br />
    <div class="container">
        <div id='calendar' style="background:#ECF0F1"></div>
    </div>
</div>

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

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

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

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 ( Create fullCalendar calendar event on submitting the form in bootstrap modal window ), But it does not work on mine.

Please help, thank you in advance.

Answer 1

$(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();
        },
    })

      $('#submitButton').on('click', function(e){
            // We don't want this to act as a link so cancel the link action
            e.preventDefault();

            doSubmit();
          });

      function doSubmit(){
        $("#createEventModal").modal('hide');
        $("#calendar").fullCalendar('renderEvent',
            {
                title: $('#eventName').val(),
                start: new Date($('#eventDueDate').val()),

            },
            true);
       }
    });


});

---

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

                <div class="form-group form-inline">
                    <div class="input-group date" data-provide="datepicker">
                        <input type="text" id="eventDueDate" class="form-control" placeholder="Due Date mm/dd/yyyy">
                        <div class="input-group-addon">
                            <span class="glyphicon glyphicon-calendar"></span>
                        </div>
                    </div>
                </div>

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

Answer 2

It's goes like this, when user select a date, this happens:

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

in the params, you have start and end, that define you event start and end time.

from here you should bind a click event to your save button:

 select: function (startTime, endTime, allDay) {
           //do something when space selected
           //Show 'add event' modal
           $('#createEventModal').modal('show');

           $('#submitButton').on('click',function(){
               var mockEvent = {title: 'myNewEvent!', start:startTime, end:endTime};
                $('#calendar').fullCalendar('renderEvent', mockEvent);
                $('#submitButton').unbind('click');
                $('#createEventModal').modal('hide');
           });
   }

Note that this example base on the the new version of the fullcalendar (2&3 versions).

you better check your many options that you have regarding the events:

Events options

Adding events

Also, you can start by adding static events for explore all events features:

$('#calendar').fullCalendar({
        defaultView: 'agendaDay',
        eventBorderColor: "#de1f1f",

        events: [
                {
                 title  : 'test event',
                 start  : '2016-10-18',
                 end  : '2016-10-19'
                } 
        ]
        ...

Good luck!