FullCalendar.js：防止选择以外的背景事件？ [英] FullCalendar.js: Preventing selections other than on background events?

问题描述

如何防止用户选择非彩色区域（后台事件）。他应该只能选择蓝色区域。

解决方案

直至这个请求我已经完成了，最好的解决方案是这样的：

使用以下函数检查事件是否（b）
$ b $

  var isValidEvent = function（start，end）{
 return $（ #calendar）。fullCalendar（'clientEvents'，function（event）{
 return（event.rendering ===background&&& // //如果您只想检查某些事件
（start.isAfter（event.start）|| start.isSame（event.start，'minute'））&& 
（end.isBefore（event.end）|| end.isSame （event.end，'minute'）））; 
}）。length> 0; 
}; 
  

在每个事件创建或修改回调中，都使用该函数。

  select：function（start，end，jsEvent，view）{
 if（isValidEvent（start，end））{//只有当它有效时才添加它
 $（＃calendar）。fullCalendar（'addEventSource'，[{
 start：start，
 end：end，
}]）; 
} 
 $（＃calendar）。fullCalendar（unselect）; 
}，
 eventDrop：function（event，delta，revertFunc，jsEvent，ui，view）{
 if（！isValidEvent（event.start，event.end））{
 revertFunc（）; 
 
 
 eventResize：function（event，delta，revertFunc，jsEvent，ui，view）{
 if（！isValidEvent（event.start，event.end）） {
 revertFunc（）; 
 
 
 code 
 $ b 
这里有一个 JSFiddle 的结果。
 
How do I prevent the user from selecting non-colored areas (background events). He should only be able to select the blue-colored areas. 

解决方案
Until this request that I made a bit ago is finished, the best solution is this:

Use the following function to check if an event is "inside" of a background event.
var isValidEvent = function(start,end){
    return $("#calendar").fullCalendar('clientEvents', function (event) {
        return (event.rendering === "background" && //Add more conditions here if you only want to check against certain events
                (start.isAfter(event.start) || start.isSame(event.start,'minute')) &&
                (end.isBefore(event.end) || end.isSame(event.end,'minute')));
    }).length > 0;
};
In every event creation or modification callback, use the function.
select: function (start, end, jsEvent, view) {
    if(isValidEvent(start,end)){ //only add it if it's valid
        $("#calendar").fullCalendar('addEventSource', [{
            start: start,
            end: end,
        } ]);
    }        
    $("#calendar").fullCalendar("unselect");
},
eventDrop: function( event, delta, revertFunc, jsEvent, ui, view ) {
    if(!isValidEvent(event.start,event.end)){
        revertFunc();
    }
},
eventResize: function( event, delta, revertFunc, jsEvent, ui, view ) {
    if(!isValidEvent(event.start,event.end)){
        revertFunc();
    }
},
Here's a JSFiddle of the result.

                        
这篇关于FullCalendar.js：防止选择以外的背景事件？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！