FullCalendar，可以设置可选的false，但允许选择插槽

FullCalendar, possible to set selectable false but allow select slot

本文关键字：许选择 插槽 选择 false 设置 FullCalendar      更新时间：2023-09-26

我正在用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');
    }
})(),
相关文章：