javascript - 如何在 fullcalendar/jquery 中添加免费时段？

Question

我正在寻找一种在全日历中添加每天 16:00 到 20:00 显示的免费时段的方法。这样就可以选择他们来预订事件，但不会在我使用 JSON 调用获取事件时显示。

到目前为止，从数据库获取日期的调用工作正常，但不确定如何填写灰色框，以便用户可以单击并添加事件。我正在使用灯箱。

这是到目前为止的代码(但即使有来自 JSON 回调的事件，它也会创建一个事件):

$('#calendar').fullCalendar({
    header: {
                left: 'prev,next today',
                center: 'title',
                right: 'month,agendaWeek,agendaDay'
            },
            editable: true,
            eventClick: function(event) {           
                var url='api.php?getclassinfo=1&class_id='+event.id;
                $.getJSON(url,function(json){
                    $('#class_id').val(json.id);
                    $('#class_name').val(json.name);
                    $('#class_time').val(json.time);

                    var output='';
                    for (var i in json.day) {
                        output = output+json.day[i]+',';
                    }

                });
                return false;
    },
    //events: 'api.php?getdates=1&class_room='+class_room
    eventSources:
    [
    'api.php?getdates=1&class_room='+class_room,
     MyEvents
    ]
});


function MyEvents(start,end, callback) {
  var events = [];
  // Setup the meeting on the this weeks "monday"
  var meeting = new Date(start.getFullYear(),
                         start.getMonth(),
                         start.getDate(),
                         16, 00, 00);
  meeting.setDate((meeting.getDate() - meeting.getDay()) + 1);
    i=0;
  while (meeting <= end) {
    events.push({
      id: meeting.valueOf(),
      title: "Free space",
      start: newdate,
      allDay: false,
      backgroundColor: "#EEEEEE",
      borderColor: "#EEEEEE",
      textColor: "#AAAAAA"
    });
    // increase by one week
    meeting.setDate(meeting.getDate() + 1);
    i=i+1;
  }
  callback(events);
}

Answer 1

此主题的答案可能会对您有所帮助。不完全是您问题的答案，因为它是相反的，但您可能只需稍微调整代码即可实现您的目标。

Disable timeslot ranges in jQuery fullcalendar plugin