javascript - 全日历动态数据参数，精细响应

Question

我正在使用fullcalendar通过 ajax 调用检索事件。该 URL 有一个动态参数，即房间 ID，因为我想根据房间选择显示日历。我有两个问题:

1. events 在用户选择房间之前调用(房间选择和日历同时加载)，因此 ajax URL 无效因为没有房间 ID。是否可以避免首次加载？

2. ajax 响应采用如下特殊格式:

   {
     "status":true,"success":true,"result":
   [
     {
        "id":2,"title":"test","start":"2017-07-06T10:30:00","end":"2017-07-06T11:30:00"
     },
     {
       "id":3,"title":"test","start":"2017-07-07T16:30:00","end":"2017-07-07T17:30:00"
     }
    ],
   "error":null
   }
   

所以我必须仅使用 result 字段，但 eventDataTransform 不能使用与 event 格式不同的 JSON。您知道在将响应用于事件之前是否可以详细说明响应吗？(我还使用状态和错误来显示消息)这是我的实际代码:

     var calendar = $('#calendar').fullCalendar({
        selectOverlap: false,
        height: 600,
        defaultView: 'agendaDay',
        header: {
            left: 'prev,next today',
            center: 'title',
            right: 'month,agendaDay'
        },
        slotMinutes: 30,
        minTime: '08:00:00',
        maxTime: '18:00:00',
        firstDay: 1,
        editable: true,
        weekends: false,
        //this allow the click on month agenda and go to day agenda
        dayClick: function(date, jsEvent, view) {
            if(view.name == 'month') {
                $('#calendar').fullCalendar('changeView', 'agendaDay');
                $('#calendar').fullCalendar('gotoDate', date);      
            }
        },
         eventDataTransform: function(eventData){
                   return eventData.result;
               },
        //load room reservation
        events: {
            url: '/booking/reservation/',
            data: function () { // a function that returns an object
                return {
                    idRoom: bookingForm.room,
                };
            }
        }
    });

bookingForm.room 在 select 事件上加载:

roomTable.off('select')
    .on( 'select', function ( e, dt, type, indexes ) {
        bookingForm.room = roomTable.rows( indexes ).data().toArray()[0].idRoom;
        $("#calendar").fullCalendar("refetchEvents");
    } );

Answer 1

It is possibile to avoid the first loading?

当然，只需不要设置 events 属性并稍后使用 addEventSource 加载事件即可。

请参阅以下示例:

var source = 
    [
        {
            title  : 'event1',
            start  : '2017-07-01'
        },
        {
            title  : 'event2',
            start  : '2017-07-05',
            end    : '2017-07-07'
        },
        {
            title  : 'event3',
            start  : '2017-08-09T12:30:00',
            allDay : false
        }
    ];

$(document).ready(function() {
  $("#calendar").fullCalendar();
});

$("#btnLoadEvents").click(function(){
  $("#calendar").fullCalendar("addEventSource", source);
});

<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.6.1/fullcalendar.min.css">
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.6.1/fullcalendar.print.css">

<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.12.0/moment.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.6.1/fullcalendar.min.js"></script>

<button type="button" id="btnLoadEvents">Load events</button>
<div id="calendar" />

Do you know if is it possible to elaborate the response before use it for the event?

是的，从自定义 ajax 响应中获取事件:

var customAjaxResponse = {"status":true,"success":true,"result":[{"id":2,"title":"test","start":"2017-07-06T10:30:00","end":"2017-07-06T11:30:00"},{"id":3,"title":"test","start":"2017-07-07T16:30:00","end":"2017-07-07T17:30:00"}],"error":null};
var source = customAjaxResponse.result;

然后将源添加到日历中:

$("#calendar").fullCalendar("addEventSource", source);

查看最终结果:

var customAjaxResponse = {"status":true,"success":true,"result":[{"id":2,"title":"test","start":"2017-07-06T10:30:00","end":"2017-07-06T11:30:00"},{"id":3,"title":"test","start":"2017-07-07T16:30:00","end":"2017-07-07T17:30:00"}],"error":null};

var source = customAjaxResponse.result;

$(document).ready(function() {
  $("#calendar").fullCalendar();
});

$("#btnLoadEvents").click(function(){
  $("#calendar").fullCalendar("addEventSource", source);
});

<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.6.1/fullcalendar.min.css">
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.6.1/fullcalendar.print.css">

<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.12.0/moment.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.6.1/fullcalendar.min.js"></script>

<button type="button" id="btnLoadEvents">Load events</button>
<div id="calendar" />

注意:您可以随时动态添加事件，尽管日历上已经存在其他事件(尝试多次单击上例中的按钮)。

我希望它对你有帮助，再见卢卡。

更新:如何使用特定过滤器隐藏/显示事件:

对于每个单个事件，您可以使用 eventRender 上的函数检查它是否要显示，如下所示:

eventRender: function (event, element, view) {
    var roomId = getRoomIdFromEvent(event.id);
    return $("#chkRoom" + roomId).is(':checked');
},

因此，当函数返回 true 时，事件将被显示，否则将被隐藏。

最后，当过滤器更改时，您必须刷新日历:

$(mySelector).click(function(){
    $("#calendar").fullCalendar("refetchEvents");
};

请参阅以下内容:

var customAjaxResponse = {"status":true,"success":true,"result":[{"id":2,"title":"test","start":"2017-07-06T10:30:00","end":"2017-07-06T11:30:00", "room": 1},{"id":3,"title":"test","start":"2017-07-07T16:30:00","end":"2017-07-07T17:30:00", "room": 2}],"error":null};

var source = customAjaxResponse.result;



$(document).ready(function() {
  $("#calendar").fullCalendar({
      eventRender: function (ev, el, v) {
      console.log(ev);
        var roomId = ev.room;
        return $("#cmdRoom").val()==roomId;
    }
  });
  $("#calendar").fullCalendar("addEventSource", source);
});

$("#cmdRoom").change(function(){
    $("#calendar").fullCalendar("refetchEvents");
})

<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.6.1/fullcalendar.min.css">
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.6.1/fullcalendar.print.css">

<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.12.0/moment.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.6.1/fullcalendar.min.js"></script>

<select id="cmdRoom">
<option value="1">Room one</option>
<option value="2">Room two</option>
</select>
<div id="calendar" />