FullCalendas.js

@section scripts{

    <script>
        $(document).ready(function () {

            var sourceFullView = { url: '/Home/GetDiaryEvents/' };
            var sourceSummaryView = { url: '/Home/GetDiarySummary/' };
            var CalLoading = true;

            $('#calendar').fullCalendar({
                header: {
                    left: 'prev,next today',
                    center: 'title',
                    right: 'month,agendaWeek,agendaDay'
                },
                defaultView: 'agendaDay',
                editable: true,
                allDaySlot: false,
                selectable: true,
                slotMinutes: 15,
                utc: true,
                events:'/Home/Eventos/',

                eventClick: function (calEvent, jsEvent, view) {
                    alert('You clicked on event id: ' + calEvent.ID,
                        calEvent.id +
                        "\nSpecial ID: " +
                        calEvent.someKey +
                        "\nAnd the title is: " +
                        calEvent.title);

                },

                eventDrop: function (event, dayDelta, minuteDelta, allDay, revertFunc) {
                    if (confirm("Confirm move?")) {
                        UpdateEvent(event.id, event.start);

                    } else {
                        revertFunc();
                    }
                },

                eventResize: function (event, dayDelta, minuteDelta, revertFunc) {

                    if (confirm("Confirm change appointment length?")) {
                        UpdateEvent(event.id, event.start, event.end);
                    } else {
                        revertFunc();
                    }
                },


                dayClick: function (date, allDay, jsEvent, view) {
                    $('#eventTitle').val("");
                    $('#eventDate').val($.fullCalendar.formatDate(date, 'dd/MM/yyyy'));
                    $('#eventTime').val($.fullCalendar.formatDate(date, 'HH:mm'));
                    ShowEventPopup(date);
                },

                viewRender: function (view, element) {

                    if (!CalLoading) {
                        if (view.name == 'month') {
                            $('#calendar').fullCalendar('removeEventSource', sourceFullView);
                            $('#calendar').fullCalendar('removeEvents');
                            $('#calendar').fullCalendar('addEventSource', sourceSummaryView);
                        } else {
                            $('#calendar').fullCalendar('removeEventSource', sourceSummaryView);
                            $('#calendar').fullCalendar('removeEvents');
                            $('#calendar').fullCalendar('addEventSource', sourceFullView);
                        }
                    }
                }
            });

            CalLoading = false;
        });
        $('#btnPopupCancel').click(function () {
            ClearPopupFormValues();
            $('#popupEventForm').hide();
        });

        $('#btnPopupSave').click(function () {

            $('#popupEventForm').hide();

            var dataRow = {
                'titulo': $('#eventTitle').val(),
                'novaDataEvento': $('#eventDate').val(),
                'novaHoraEvento': $('#eventTime').val(),
                'novoDuracaoEvento': $('#eventDuration').val()
            }

            ClearPopupFormValues();

            $.ajax({
                type: 'POST',
                url: "/Home/SaveEvent",
                data: dataRow,
                success: function (response) {
                    if (response === 'True') {
                        $('#calendar').fullCalendar('refetchEvents');
                        alert('New event saved!');
                    } else {
                        alert('Error, could not save event!');
                    }
                }
            });
        });

        function ShowEventPopup(date) {
            ClearPopupFormValues();
            $('#popupEventForm').modal('show');
            $('#eventTitle').focus();
        }

        function ClearPopupFormValues() {
            $('#eventID').val("");
            $('#eventTitle').val("");
            $('#eventDateTime').val("");
            $('#eventDuration').val("");
        }

        function UpdateEvent(EventID, EventStart, EventEnd) {

            var dataRow = {
                'ID': EventID,
                'NewEventStart': EventStart,
                'NewEventEnd': EventEnd
            }

            $.ajax({
                type: 'POST',
                url: "/Home/UpdateEvent",
                dataType: "json",
                contentType: "application/json",
                data: JSON.stringify(dataRow)
            });
        }

    </script>
}

<div class="container col-md-offset-1" style="top:50px;">
    <div id='calendar' style="width: 65%; padding-top: 70px;"></div>
</div>

<div id="popupEventForm" class="modal hide" style="display: none;">
    <div class="modal-header"><h3>Add new event</h3></div>
    <div class="modal-body">
        <form id="EventForm" class="well">
            <input type="hidden" id="eventID">
            <label>Cliente</label>
            <input type="text" id="eventTitle" placeholder="Title here"><br />
            <label>Data</label>
            <input type="date" id="eventDate"><br />
            <label>Hora do Evento</label>
            <input type="text" id="eventTime"><br />
            <label>Duração do Evento (Minutos)</label>
            <input type="text" id="eventDuration" placeholder="15"><br />
        </form>
    </div>
    <div class="modal-footer">
        <button type="button" id="btnPopupCancel" data-dismiss="modal" class="btn">Cancelar</button>
        <button type="button" id="btnPopupSave" data-dismiss="modal" class="btn btn-primary">Salvar Evento</button>
    </div>
</div>