How do I "post" fullcalendar data back to server?

Question

I'm integrating FullCalendar into a web form.

FullCalendar gets it's data from a hidden form field. Like this:

var data = jQuery.parseJSON(jQuery('#fullcalendar_data').val());

Then FullCalendar does it's awesome, letting the user edit.

Once the user is complete, they click "Save" on the form.

How do I get FullCalendar's event data back into the hidden form field as JSON, so the "Save" posts it back to the server?

Answer 1

Use this code to get the events from your calendar:

<script type='text/javascript'>
function savedata(){
$(document).ready(function () {
    $(function () {
        $("#save").click(function () {
            var eventsFromCalendar = $('#calendar').fullCalendar('clientEvents');
            alert(eventsFromCalendar);
            $.ajax(
        {

            url: '@Url.Action("Save")',
            type: 'POST',
            traditional: true,
            data: { eventsJson: JSON.stringify(eventsFromCalendar) },
            dataType: "json",
            success: function (response) {
                alert(response);
            },
            error: function (xhr) {
                debugger;
                alert(xhr);
            }

        });
        });
    });
});
 }
 </script> 

And make a controller method to receive the data like this:

[HttpPost]
public ActionResult Save(string eventsJson)
{
var events = JsonConvert.DeserializeObject<IEnumerable<Event>>(eventsJson);
return View();
}

 public class Event
{
    public int Id { get; set; }



    public string Title { get; set; }
    public DateTime Start { get; set; }
    public DateTime End { get; set; }
}

And you can call this java script function on any event from your page like onclick by making it a function etc.

Answer 2

@ppumkin that will NOT work since it is submitted as an object to the server side, you need to stringfy it

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

    var eventsForCookie = [];

    $.each(eventsFromCalendar, function(index,value) {
        var event = new Object();
        event.id = value.id;            
        event.start = value.start;
        event.end = value.end;
        event.title = value.title;
    event.allDay = value.allDay
        eventsForCookie.push(event);
    });             
    $("#all_events").val(JSON.stringify(eventsForCookie));

After that you can submit it to the server which you could parse using JSON.parse (Ruby)