如何限制fullcalendar中每个时间段的事件？ [英] How to limit events per time slot in fullcalendar?

问题描述

是否可以限制 FullCalendar-2 仅在插槽时间间隔内添加事件并将其限制为2？

例如，用户只能在12:00:00 - 12:15:00之间添加事件，无法添加更长的事件（12:00:00 - 12:30:00），并且只有在有'免费'时段时才可以添加。
Orage事件是正确的（时间槽中最多2个事件），蓝色事件错误（超过2个事件）

以下是一个例子

  $（document）.ready（function（）{
 
 //页面现在已准备好，初始化日历... 
 
'（'＃calendar'）。fullCalendar（{
 header：{
 left：'prev，next today'，
 center：'title'，
 right：'agendaDay'
}，
 defaultView：'agendaDay'，
 allDaySlot：false，
 scrollTime：moment（）。format（'HH：mm：ss '），
 slotDuration：'00：15：00'，
 minTime：'06：45：00'，
 maxTime：'23：15：00'，
可编辑：true，
 events：[
 {
 title：'Meeting'，
 start：'2014-06-06T10：30：00'，
 end：'2014-06-06T10：45：00'
}，
 {
 title ：'午餐'，
开始：'2014-06-06T10：30：00'，
结束：'2014-06-06T10：45：00'
}，
 {
 title：'生日派对'，
开始：'2014-06-06T10：30：00'，
结束：'2014-06-06T10：45：00'
}，
 {
 title：'会议'，
开始：'2014-06-06T15：30：00'，
结束：'2014-06-06T15：45 ：00'，
 color：'＃FF7F50'
}，
 {
 title：'Lunch'，
 start：'2014-06-06T15：30： 00'，
结束：'2014-06-06T15：45：00'， 
 color：'＃FF7F50'
} 
] 
 
}）; 
 
}）; 
  

和直播： http://jsbin.com/fezidowo/3/

解决方案

  select：function（start，end）{
 console.log（'Events：'+ getEventsByTime（start，end）.length）; 
 var ev = getEventsByTime（start，end）; 
 console.log（ev）; 
 var itms = {}; 
 $ b $ ev.forEach（function（entry）{
 
 var begin = moment（entry.start）; 
 var final = moment（entry.end）; $ （begin.diff（final）<0）{
 itms [begin] =（itms [begin] || 0）+ 1; 
 if（b 
 
 $ b if （itms [begin]> = maxEventsInInterval）{
 console.log（'__ WARNING __，max events exceeded！'）; 
} 
 
 begin = moment（begin） .add（'seconds'，900）; 
} 
 
}）; 
 console.log（itms）; 
 
 $ b $ function getEventsByTime（start，stop）{
 var todaysEvents = $（'div [name = calendar]'）。fullCalendar（'clientEvents'，function（event） {
 
 return（
（event.start> = start&&& event.end< = stop）|| 
（start> = event.start& amp ;& stop< = event.end）|| 
（start< = event.start&& stop> = event.start）|| 
（start> = event。 start&& start< = event.end）
）; 
}）; 
返回todaysEvents; 
} 
  

Is it possible to limit FullCalendar-2 to add events only in slot interval and limit it to 2?

For example, users can add event only between 12:00:00 - 12:15:00, it is not possible to add longer event (12:00:00 - 12:30:00) and he can add it only if there is a 'free' slot. Orage events are correct (max 2 events in time slot), events blue are wrong (over 2 events)

Here's an example

$(document).ready(function() {

    // page is now ready, initialize the calendar...

    $('#calendar').fullCalendar({
                    header: {
                            left: 'prev,next today',
                            center: 'title',
                            right: 'agendaDay'
                    },
                    defaultView: 'agendaDay',
                    allDaySlot: false,
                    scrollTime: moment().format('HH:mm:ss'),
                    slotDuration: '00:15:00',
                    minTime: '06:45:00',
                    maxTime: '23:15:00',
                editable: true,
            events: [
                {
                    title: 'Meeting',
                    start: '2014-06-06T10:30:00',
                    end: '2014-06-06T10:45:00'
                },
                {
                    title: 'Lunch',
                    start: '2014-06-06T10:30:00',
                    end: '2014-06-06T10:45:00'
                },
                {
                    title: 'Birthday Party',
                    start: '2014-06-06T10:30:00',
                    end: '2014-06-06T10:45:00'
                },
                {
                    title: 'Meeting',
                    start: '2014-06-06T15:30:00',
                    end: '2014-06-06T15:45:00',
                    color: '#FF7F50'
                },
                {
                    title: 'Lunch',
                    start: '2014-06-06T15:30:00',
                    end: '2014-06-06T15:45:00',
                    color: '#FF7F50'
                }
            ]

            });

});

and live: http://jsbin.com/fezidowo/3/

解决方案

select: function(start, end) {
    console.log( 'Events :' + getEventsByTime( start, end ).length );
    var ev = getEventsByTime( start, end );
    console.log( ev );
    var itms = {};            

    ev.forEach(function(entry){

      var begin = moment(entry.start);
      var final = moment(entry.end);


    while( begin.diff(final) < 0 ) {
        itms[begin] =  ( itms[begin] || 0) + 1;
        if( itms[begin] >= maxEventsInInterval ) {
            console.log(' __ WARNING __ , max events exceeded! ');
        }

        begin = moment(begin).add('seconds', 900);
    }

});
    console.log( itms );
}

function getEventsByTime( start, stop ) {
    var todaysEvents = $('div[name=calendar]').fullCalendar('clientEvents', function(event) {

       return ( 
           ( event.start >= start && event.end <= stop ) || 
           ( start >= event.start && stop <= event.end)  || 
           (start <= event.start && stop >= event.start) ||
           (start >= event.start && start <= event.end)
       );
    });
    return todaysEvents;
}

这篇关于如何限制fullcalendar中每个时间段的事件？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！