将数据库中的数据映射到 JSON 对象 Fullcalendar

Question

我已经安装了 Fullcalendar bundle (Symfony2)，我添加的所有事件都正确显示。现在我在 Fullcalendar.js 中添加 eventClick 函数（它与 open.window('page') 一起工作只是为了测试）。现在我想在 alert() 或其他而不是 window.open() 中获取有关此事件的所有信息（id、名称等）。

我该怎么做？

$(function () {
/* initialize the calendar
 -----------------------------------------------------------------*/
//Date for the calendar events (dummy data)
var date = new Date();
var d = date.getDate(),
    m = date.getMonth(),
    y = date.getFullYear();
$('#calendar-place').fullCalendar({
    monthNames: ["Janvier","Février","Mars","Avril","Mai","Juin","Julliet", "Aout", "Septembre", "Octobre", "Novembre", "Decembre" ],
    monthNamesShort: ['Jan','Fev','Mar','Avr','Mai','Jun','Jul','Aou','Sep','Oct','Nov','Dec'],
    dayNames: [ 'Diamnche', 'Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi'],
    dayNamesShort: ['Diu','Dill','Dim','Dix','Dij','Div','Dis'],

    header: {
        left: 'prev,next today',
        center: 'title',
        right: 'month,agendaWeek,agendaDay'
    },
    buttonText: {
        today: 'today',
        month: 'month',
        week: 'week',
        day: 'day'
    },
    events:
    {
        url:Routing.generate('fullcalendar_loadevents', { month: moment().format('MM'), year: moment().format('YYYY') }),
        color: '#45b2ea',
        textColor:'white',

        error: function() {
            alert('Error receving events');
        }
    },
    viewRender: function (view, element) {
        var month = view.calendar.getDate().format('MM');
        var year = view.calendar.getDate().format('YYYY');
    },

    eventClick: function() {

       window.open('login')
    },





    eventDrop: function(event,delta,revertFunc) {
        var newStartData = event.start.format('YYYY-MM-DD');
        var newEndData = (event.end == null) ? newStartData : event.end.format('YYYY-MM-DD');

        $.ajax({
            url: Routing.generate('fullcalendar_changedate'),
            data: { id: event.id, newStartData: newStartData,newEndData:newEndData  },
            type: 'POST',
            dataType: 'json',
            success: function(response){
                console.log('ok');
            },
            error: function(e){
                revertFunc();
                alert('Error processing your request: '+e.responseText);
            }
        });

    },
    eventResize: function(event, delta, revertFunc) {

        var newData = event.end.format('YYYY-MM-DD');
        $.ajax({
            url: Routing.generate('fullcalendar_resizedate'),
            data: { id: event.id, newDate: newData },
            type: 'POST',
            dataType: 'json',
            success: function(response){
                console.log('ok');
            },
            error: function(e){
                revertFunc();
                alert('Error processing your request: '+e.responseText);
            }
        });

    },
    editable: true

});
});

Answer 1

如果您在 https://fullcalendar.io/docs/mouse/eventClick/ 阅读了 eventClick 的文档，它会向您展示可用于回调的参数，其中包括一个包含单击事件详细信息的 "event" 对象。

所以你可以这样做：

eventClick: function( event, jsEvent, view ) 
{ 
  alert(event.title);
}

您可以在此处找到事件对象的更多属性：https://fullcalendar.io/docs/event_data/Event_Object/ 如果您想使用有关该事件的其他信息。

将数据库中的数据映射到 JSON 对象 Fullcalendar

Mapping data from database into a JSON object Fullcalendar

javascript

ajax

calendar

google-calendar-api

fullcalendar