我正在使用 FullCalendar 提出申请.
我注意到当 selectable
设置为 true
时,用户可以选择多个星期或时间段,这不是我们想要的。另一方面,当我将 selectable
设置为 false
时,我将无法再使用我希望在用户选择时间段时触发的选择操作。有什么方法可以使 selectable
特性保持为 false
,但每个时隙仍然可以单独选择,而不是作为时隙组的一部分。
这是我的代码,通过 PHP 作为数组传递:
'options'=>array(
'header'=>array(
'left'=>'prev,next,today',
'center'=>'title',
'right'=> 'month,agendaWeek,agendaDay',
),
'minTime' => '09:00:00',
'maxTime' => '20:00:00',
'slotDuration' => '01:00:00',
'slotEventOverlap' => false,
'defaultTimedEventDuration' => '01:00:00',
'allDaySlot' => false,
'allDay' => false,
'lazyFetching'=>true,
'weekends' => false,
'selectable' => true,
'height' => 'auto',
'contentHeight' => '150',
// 'selectHelper' => true,
// 'events'=>array(), // pass array of events directly
'select' => new CJavaScriptExpression("function(start, end, jsEvent, view) {
var currdisplay = view.name;
var check = Date.parse(start) / 1000;
var today = Date.parse(new Date()) / 1000;
if (currdisplay != 'month' && check >= today) {
var start1 = Date.parse(start) / 1000;
var end = Date.parse(start) / 1000 + 3600;
window.location.href = \"www.somelink.com/?from=\" + start1 + \"&to=\" + end;
}}"),
'dayClick' => new CJavaScriptExpression("function(date, jsEvent, view) {
var currdisplay = view.name;
if (currdisplay == 'month') {
$('.calendar').fullCalendar('gotoDate', date);
$('.calendar').fullCalendar('changeView', 'agendaWeek');
}}"),
我目前有一个修复程序,您可能会在代码块中看到:
var start1 = Date.parse(start) / 1000;
var end = Date.parse(start) / 1000 + 3600;
这两行确保如果用户选择 5 个时间段,将结束时间设置为开始时间后 1 小时(3600 秒),而不是 5 小时后,但我对这个解决方案不满意,因为我不我觉得它很干净,而且我不喜欢 selectable
功能仍然可用。
最佳答案
时隙的不完美解决方案:
这对你来说是否足够好?
http://jsfiddle.net/3E8nk/739/
select: (function() {
var humanSelection = true;
return function(start, end, jsEvent, view) {
if(humanSelection) {
humanSelection = false;
$('#calendar').fullCalendar('select', start);
humanSelection = true;
}
};
})(),
几天的解决方案:
尝试使用 day click 将背景颜色设置为您想要的颜色。
dayClick: (function() {
var lastThis;
return function(date, jsEvent, view) {
if(lastThis)
lastThis.css('background-color', 'white');
lastThis = $(this);
$(this).css('background-color', 'lightblue');
}
})(),
关于javascript - FullCalendar,可以设置 selectable false 但允许选择插槽,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26597594/