Question

I am trying to use FullCalendar and it is displayed fine, with a feed updating events from the database and google calendar.

However my problem is how do I have a single save button on the page which, when pressed, allows me to pass back all the events in the calendar back to my controller so I can save them to the database?

Some Code (view):

$(document).ready(function () {
    /* initialize the external events
    -----------------------------------------------------------------*/
    $('#external-events div.external-event').each(function () {
        // create an Event Object (http://arshaw.com/fullcalendar/docs/event_data/Event_Object/)
        // it doesn't need to have a start or end
        var eventObject = {
            title: $.trim($(this).text()) // use the element's text as the event title
        };

        // store the Event Object in the DOM element so we can get to it later
        $(this).data('eventObject', eventObject);
        // make the event draggable using jQuery UI
        $(this).draggable({
            zIndex: 999,
            revert: true,      // will cause the event to go back to its
            revertDuration: 0  //  original position after the drag
        });
    });

    // -------- Calendar set up ...
    $('#calendar').fullCalendar({
        eventSources:
        [
            { // Uk holidays
                url: 'http://www.google.com/calendar/feeds/uk__en%40holiday.calendar.google.com/public/basic',
                color: 'blue',
                textColor: 'white'
            },
            { // booked availability
                url: '/avalibility/GetAvail',
                color: 'red'
            }
     ],
    //... more set up
});

Controller code:

public JsonResult GetAvail(double start, double end)
{
    var startDateTime = FromUnixTimestamp(start);
    var endDateTime = FromUnixTimestamp(end);

    var events   = from e in db.PROJECT_CALENDAR
                        select e;

    var AvilList = new List<object>();
    foreach (var e in events)
    {
        AvilList.Add(
            new
            {
                id = e.ID,
                title = e.Title,
                description = e.Title,
                start = e.DateStart,
                end = e.DateEnd
            });
    }
    return Json(AvilList.ToArray(), JsonRequestBehavior.AllowGet);
}      

Answer 1

Have you tried using the clientEvents callback? Something like this:

var eventsFromCalendar = $('#calendar').fullCalendar( 'clientEvents');

This returns a JSON array with all the fullCalendar event objects. You can pass this array over to your controller and then store them to the DB.

Hope that helps!