如何在fullcalendar / jquery中添加空闲时隙?

时间:2012-03-01 11:49:47

标签: javascript jquery json fullcalendar

我正在寻找一种方法来添加fullcalendar中的免费时间段,每天从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);
}

1 个答案:

答案 0 :(得分:0)

这个帖子的答案可能会帮到你。不完全是你的问题的答案,因为它是对抗现场,但你可能只是稍微调整代码以实现你的目标。

Disable timeslot ranges in jQuery fullcalendar plugin