在jQuery fullcalendar插件中禁用时隙范围 [英] Disable timeslot ranges in jQuery fullcalendar plugin
问题描述
我正在开发一个webapp，并使用 jQuery fullcalendar插件 。
我需要以某种方式禁用某些时间段。
我正在使用的当前方法是为我希望禁用并禁止事件重叠的时隙。
有没有更好的方法来做到这一点？我宁愿不禁止事件重叠。
我可以接受上述问题的解决方案：添加黑色时隙并禁止在这些区域添加时隙。
然而，我有一个更紧迫的问题。我需要能够在特定时间范围内更改插槽的背景颜色。理想情况下，我将以与eventSources相同的方式使用它;只需指向一个网址，然后用ajax / json发送彩色范围。
我要添加的赏金就是用于最后一个问题（彩色插槽范围，以及在日间和周视图中）。如果有人可以建议我到另一个解决方案，那么完整的日历可以做到这一点，这也很好。
解决方案使用另一个日历：jquery-week-calendar（ https://github.com/themouette/jquery-星期日历）。
这个日历有一个名为Freebusy的功能。这是要习惯于拥有繁忙和免费的时隙范围，但通过改变源代码，我可以添加背景颜色到时隙范围。我改变了freeBusyRender方法，如下所示：
$ b $ pre $ free $ free $ free $ free $ free $ free $ free $ $ $ $ $ freeBusy.free =='t_red'）{
$ freeBusy.css（backgroundColor，red）;
} else if（freeBusy.free =='t_green'）{
$ freeBusy.css（backgroundColor，green）;
} else if（freeBusy.free =='t_blue'）{
$ freeBusy.css（backgroundColor，blue）;
} else if（freeBusy.free =='t_black'）{
$ freeBusy.css（backgroundColor，black）;
}
$ freeBusy.addClass（'free-busy-free'）;
返回$ freeBusy;
}
然后，我可以如下初始化日历：
（function（$）{
d = new Date（）;
d.setDate（d.getDate（） - （d （）;
year = d.getFullYear（）;
month = d.getMonth eventData2 = {
options：{
timeslotsPerHour：4，
timeslotHeight：12，
defaultFreeBusy：{free：true}
}，
events：[
''id'：1，'start'：新日期（年，月，日，12），'结束'：新日期（年，月，日，13:00）与Sarah共进午餐}，
{'id'：2，'start'：新日期（年，月，日，14），'结束'：新日期（年，月，日，14,40） ，'title'：'团队会议'}，
{'id'：3，'start'：新日期（年，月，日+ 1,18），'结束'：新日期（年，月，第1天，第18天，第40天），'标题'：'与乔见面'} ，
{'id'：4，'start'：new Date（year，month，day - 1，8），'end'：new Date（year，month，day - 1，9，20）， 'title'：'Coffee with Alison'}，
{'id'：5，'start'：new Date（year，month，day + 1，14），'end'：new Date（year，month ，'day'1，15，00），'title'：'Product showcase'}
]，
freebusys：[
{'start'：new Date（year，month，day - 1，8），'结束'：新日期（年，月，日 - 1，18），'免费'：'t_red'}，
{'start'：new Date（year，month， 8），'结束'：新的日期（年，月，日+0,18），'免费'：'t_green'}，
{'start'：new Date（year，month，day + 1， 8），'结束'：新日期（年，月，日+1,18），'免费'：'t_blue'}，
{'开始'：新日期（年，月，日+2，新的日期（年，月，日+2,18），'免费'：'t_black'}，
{'start'：new日期（年，月，日期+ 3,8），'结束'：新日期（年，月，日+3,18），'免费'：'t_red'}
]
};
$（document）.ready（function（）{
var $ calendar = $（'＃calendar'）。weekCalendar（{
allowCalEventOverlap：true，
overlapEventsSeparate：true，
totalEventsWidthPercentInOneColumn：95，
timeslotsPerHour：4，
scrollToHourMillis：0，
height：function（$ calendar）{
return $ （window）.height（） - $（'h1'）。outerHeight（true）;
}，
eventRender：function（calEvent，$ event）{$ b $ if（calEvent.end。 getTime（）< new Date（）。getTime（））{
$ event.css（'backgroundColor'，'#aaa'）;
$ event.find（'。wc-time'） .css（{
backgroundColor：'＃999'，
border：'1px solid＃888'
}）;
}
}，
eventNew ：函数（calEvent，$事件，FreeBusyManager，日历）{
calEvent.id = calEven t.userId +'_'+ calEvent.start.getTime（）;
}，
data：function（start，end，callback）{
callback（eventData2）;
}，
displayFreeBusys：true，
daysToShow：7，
switchDisplay：{'1 day'：1，'3 next days'：3，'week week'：5 ，'full week'：7}，
headerSeparator：''，
useShortDayNames：true
}）;
}）;
}）（jQuery）;
这给了我以下结果：
我敢打赌，这可以改善;我想我打破了freeBusy功能，但我不需要它。
I am developing a webapp and am using jQuery fullcalendar plugin.
I need to somehow disable certain time-slots.
The current method I am using is to add events for the time-slots I want to disable and disallow event overlapping.
Is there a better way to do this? I rather not disallow event overlapping.
I can live with the solution for the above problem: adding black timeslots and disallow the adding of timeslots in those areas.
Nevertheless I have a more pressing problem. I need to be able to change the background color of slots for certain time ranges. Ideally I would be using this in the same way as the eventSources; just point to an url and send the to be colored ranges back with ajax/json.
The bounty I am about to add is for this last problem (colourized slot ranges, as well in day and week view). If someone can suggest me to another solution then full calendar that can do this, that's also fine.
I found a solution by using another calendar: jquery-week-calendar ( https://github.com/themouette/jquery-week-calendar ).
This calendar has a feature called Freebusy. It's ment to be used to have busy and free timeslot ranges, but by altering the source code a bit, I am able to add background colors to timeslot ranges. I changed the method freeBusyRender as follows:
freeBusyRender: function(freeBusy, $freeBusy, calendar) {
if(freeBusy.free == 't_red') {
$freeBusy.css("backgroundColor", "red");
} else if(freeBusy.free == 't_green') {
$freeBusy.css("backgroundColor", "green");
} else if(freeBusy.free == 't_blue') {
$freeBusy.css("backgroundColor", "blue");
} else if(freeBusy.free == 't_black') {
$freeBusy.css("backgroundColor", "black");
}
$freeBusy.addClass('free-busy-free');
return $freeBusy;
}
Then, I can initialize the calendar as follows:
(function($) {
d = new Date();
d.setDate(d.getDate() - (d.getDay() - 3));
year = d.getFullYear();
month = d.getMonth();
day = d.getDate();
var eventData2 = {
options: {
timeslotsPerHour: 4,
timeslotHeight: 12,
defaultFreeBusy: { free: true }
},
events: [
{ 'id': 1, 'start': new Date(year, month, day, 12), 'end': new Date(year, month, day, 13, 00), 'title': 'Lunch with Sarah'},
{ 'id': 2, 'start': new Date(year, month, day, 14), 'end': new Date(year, month, day, 14, 40), 'title': 'Team Meeting'},
{ 'id': 3, 'start': new Date(year, month, day + 1, 18), 'end': new Date(year, month, day + 1, 18, 40), 'title': 'Meet with Joe'},
{ 'id': 4, 'start': new Date(year, month, day - 1, 8), 'end': new Date(year, month, day - 1, 9, 20), 'title': 'Coffee with Alison'},
{ 'id': 5, 'start': new Date(year, month, day + 1, 14), 'end': new Date(year, month, day + 1, 15, 00), 'title': 'Product showcase'}
],
freebusys: [
{ 'start': new Date(year, month, day - 1, 8), 'end': new Date(year, month, day - 1, 18), 'free': 't_red'},
{ 'start': new Date(year, month, day, 8), 'end': new Date(year, month, day + 0, 18), 'free': 't_green' },
{ 'start': new Date(year, month, day + 1, 8), 'end': new Date(year, month, day + 1, 18), 'free': 't_blue' },
{ 'start': new Date(year, month, day + 2, 14), 'end': new Date(year, month, day + 2, 18), 'free': 't_black'},
{ 'start': new Date(year, month, day + 3, 8), 'end': new Date(year, month, day + 3, 18), 'free': 't_red' }
]
};
$(document).ready(function() {
var $calendar = $('#calendar').weekCalendar({
allowCalEventOverlap: true,
overlapEventsSeparate: true,
totalEventsWidthPercentInOneColumn: 95,
timeslotsPerHour: 4,
scrollToHourMillis: 0,
height: function($calendar) {
return $(window).height() - $('h1').outerHeight(true);
},
eventRender: function(calEvent, $event) {
if (calEvent.end.getTime() < new Date().getTime()) {
$event.css('backgroundColor', '#aaa');
$event.find('.wc-time').css({
backgroundColor: '#999',
border: '1px solid #888'
});
}
},
eventNew: function(calEvent, $event, FreeBusyManager, calendar) {
calEvent.id = calEvent.userId + '_' + calEvent.start.getTime();
},
data: function(start, end, callback) {
callback(eventData2);
},
displayFreeBusys: true,
daysToShow: 7,
switchDisplay: { '1 day': 1, '3 next days': 3, 'work week': 5, 'full week': 7 },
headerSeparator: ' ',
useShortDayNames: true
});
});
})(jQuery);
which gives me following result:
I bet this can be improved; I think I broke the freeBusy feature doing this, but I don't need it.
这篇关于在jQuery fullcalendar插件中禁用时隙范围的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
