错误-完整日历无法发布

Question

How can we make the following work so it will POST the events?
The events can be added to the calendar just fine, we just need to POST them to our API. Fiddle: https://jsfiddle.net/H_INGRAM/9oup1jfb/4/

This is my first time working with Ajax.

$(document).ready(function()
{
    /*
        date store today date.
        d store today date.
        m store current month.
        y store current year.
    */
    var date = new Date();
    var d = date.getDate();
    var m = date.getMonth();
    var y = date.getFullYear();

    var calendar = $('#calendar').fullCalendar(
    {
        header:
        {
            left: 'prev,next today',
            center: 'title',
            right: 'month,agendaWeek,agendaDay'
        },

        defaultView: 'agendaWeek',
        selectable: true,
        selectHelper: true,

        select: function(start, end, allDay)
        {

            var title = prompt('Event Title:');

            if (title)
            {
                calendar.fullCalendar('renderEvent',
                    {
                        title: title,
                        start: start,
                        end: end,
                        allDay: allDay
                    },
                    true // make the event "stick"
                );
            }
            calendar.fullCalendar('unselect');
        },

        editable: true,

        events: [
            {
                title: 'All Day Event',
                start: new Date(y, m, 1)
            },
            {
                title: 'Long Event',
                start: new Date(y, m, d-5),
                end: new Date(y, m, d-2)
            },
            {
                id: 999,
                title: 'Repeating Event',
                start: new Date(y, m, d-3, 16, 0),
                allDay: false
            },
            {
                id: 999,
                title: 'Repeating Event',
                start: new Date(y, m, d+4, 16, 0),
                allDay: false
            },
            {
                title: 'Meeting',
                start: new Date(y, m, d, 10, 30),
                allDay: false
            },
            {
                title: 'Lunch',
                start: new Date(y, m, d, 12, 0),
                end: new Date(y, m, d, 14, 0),
                allDay: false
            },
            {
                title: 'Birthday Party',
                start: new Date(y, m, d+1, 19, 0),
                end: new Date(y, m, d+1, 22, 30),
                allDay: false
            },
            {
                title: 'Click for Google',
                start: new Date(y, m, 28),
                end: new Date(y, m, 29),
                url: 'http://google.com/'
            }
        ]
    });

});

$(document).ready(function () {
    $('#fullcal').fullCalendar({
    eventClick: function() {
        alert('a day has been clicked!');
    }, 
        events: function (start, end, callback) {
        $.ajax({
            type: "POST",    //WebMethods will not allow GET
            url: "/events-truett-volunteership.html",   //url of a webmethod - example below
            data: "{'userID':'" + $('#<%= hidUserID.ClientID %>').val() + "'}",  //this is what I use to pass who's calendar it is 
            //completely take out 'data:' line if you don't want to pass to webmethod - Important to also change webmethod to not accept any parameters 
            contentType: "application/json; charset=utf-8",  
            dataType: "json",
            success: function (doc) {
                var events = [];   //javascript event object created here
                var obj = $.parseJSON(doc.d);  //.net returns json wrapped in "d"
                $(obj.event).each(function () { //yours is obj.calevent                          
                        events.push({
                        title: $(this).attr('title'),  //your calevent object has identical parameters 'title', 'start', ect, so this will work
                        start: $(this).attr('start'), // will be parsed into DateTime object    
                        end: $(this).attr('end'),
                        id: $(this).attr('id')
                    });
                });                     
                callback(events);
            }
        });
    }
    });
});

Answer 1

definitely you will have a submit handler or button click to sent data, so inside, simply get all client events then serialize and sent to server using ajax.

 $('.submitEvent').click(function(){
var clientEvent = JSON.stringify($('#calendar').fullCalendar( 'clientEvents'));
                        $.ajax({ // ajax call starts
                            url: url
                            data: clientEvent,
                            dataType: 'json',
                            success: function(data)
                            {
                                 // success handler
                            }
                        }); 
});

HTML

 <input type="button" class="btn btn-primary submitEvent" value="SUBMIT"/>

thanks