Question

我们如何进行以下工作以便发布事件？
事件可以很好地添加到日历中，我们只需要将它们发布到我们的API。小提琴：https://jsfiddle.net/H_INGRAM/9oup1jfb/4/

这是我第一次使用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

肯定你会有一个提交处理程序或按钮点击发送数据，所以在里面，只需获取所有客户端事件然后序列化并使用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"/>

感谢

错误 - 完整日历不会POST

1 个答案: