Question

我将fullcalendar与ajax电话检索到的事件一起使用。 URL有一个动态参数，即房间ID，因为我想根据房间选择显示日历。我有两个问题：

events（同时加载房间选择和日历），因此ajax网址无效，因为没有＆＃39; room id。是否可以避免第一次装载？

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?

Sure, simply don't set the events property and load the events later with addEventSource

See following example please:

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?

Yes, get the events from your custom ajax response:

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;

Then add the source to the calendar:

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

See the final result:

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" />

Note: You could add events dynamically whenever you want, although other events are already present on the calendar (try to click many times on the buttons in the above example).

I hope it helps you, ciao Luca.

Updated: How to hide/show events with a specific filter:

For each single event you can check whether it's to be displayed or not, with a function on eventRender, like following:

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

So, when the function returns true the event will be displayed otherwise it will be hidden.

Finally, when the filters change you have to refresh the calendar:

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

See following please:

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" />

Answer 2

我决定使用Fullcalendar events as a function，我可以详细说明每个单个事件字段。这是我的最终代码

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="formCtrl">
 <form>
    First Name: <input type="text" ng-model="number">
  </form>
  <button ng-click="submit(number)">Check</button>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('formCtrl', function($scope) {
    $scope.number;
    $scope.submit = function(number){
         console.log(number)
         var res = number.slice(0, 4);
         console.log(res)
    }

});
</script>

</body>
</html>

而是第一次调用Web服务已经使用了一个roomId初始化为-1，因此它没有返回结果

Fullcalendar动态数据参数和精细的响应

2 个答案: