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

I'm integrating FullCalendar into a web form.

FullCalendar gets it's data from a hidde开发者_开发技巧n 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?

---

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.

---

@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)

---

The answers to this question are almost correct. The question itself is super old, so that may be why these don't quite work anymore.

For anyone who has the question in the future I'll post my solution. My solution is the combination of the jahanzaib's answer, and a fix for the stringify error that's in that code.

function savedata() {
        $(document).ready(function () {
            $(function () {
                $("#save").click(function () {
                    var eventsFromCalendar = $('#calendar').fullCalendar('clientEvents', function (e) {
                            return true;
                        }
                        return false;
                    });
                    for (var i = 0; i < eventsFromCalendar.length; i++)
                    {
                        if (eventsFromCalendar[i].borderColor == 'red')
                        {
                            $('#errorMsg').show();
                            return;
                        }
                    }
                    alert(eventsFromCalendar);
                    $.ajax
                        ({
                    url: '@Url.Action("Save")',
                    type: 'POST',
                    traditional: true,
                    data: {
                        eventsJson: JSON.stringify(eventsFromCalendar.map(function (e)
                        {
                            return {
                                start: e.start,
                                end: e.end,
                                title: e.title,
                            }
                        }))
                    },
                    dataType: "json",
                    success: function (response) {
                        alert(response);
                    },
                    error: function (xhr) {
                        debugger;
                        alert(xhr);
                    }
                });
                });
            });
        });
    }

---

The best way to get the entire feed back is to use clientEvents

.fullCalendar( 'clientEvents')

http://arshaw.com/fullcalendar/docs/event_data/clientEvents/

Depending on how you get and send the data i suppose you would want to do something like

$('#fullcalendar_data').val($('FullCalendarObject').fullCalendar('clientEvents'));

and then submit it to server and handle the rest there.

---

As others suggest, use

.fullCalendar( 'clientEvents' [, idOrFilter ] ) -> Array

source: http://fullcalendar.io/docs/event_data/clientEvents/

Usage example:

Client Side

$('#submitchange').click(function() {
        var clientevents = $('#calendar').fullCalendar('clientEvents');
        $.ajax({
            url: '/eventupdate',
            type: 'POST',
            data: {clientdata: JSON.stringify(clientevents)},
            success: function (response) {
                //get the response from server and process it
                $("#calendarupdated").append(response);
            }
        });
    });

Server side (Python Flask example):

@app.route('/eventupdate',methods=['POST'])
def eventupdate():
    client_ev = request.form.get('clientdata')
    #convert the json strings into list of event objects
    cev_list = json.loads(client_ev)
    #do whatever you need here to update the database,etc
    return 'Calendar has been updated'

---

You might be able to work with the Client Events method. It looks like this will return an array of objects that you could then translate to whatever form you wanted.

---

I am using a version of fullcalendar that is above 4. I could not really find a better way to do it-this is a really dirty solve-but here it is:

document.getElementById('eventData').value = JSON.stringify(calendar.getEventSources()[0]['internalEventSource']['meta']);
        document.getElementById("event").submit();  

I am using django by the way, and I just set the values to an input and submit the form.

<form action="" id="event" method="post">
        <input type="text" name="eventData" style="display:none;" id="eventData">    </form>

Thanks you guys.