在Fullcalendar上应用不同的时间段和范围 [英] Apply different timeslots and ranges for each day on Fullcalendar

问题描述

我需要在 fullcalendar < /a>。我已经看到了这个：禁用时间段范围jQuery fullcalendar插件

但除了它指的是旧版本之外，它并没有提供一个可靠的解决方案。

我的工作时间为每30分钟上午9点至晚上9点，但周一和周三上午9点至下午6点需要不同的范围。同样在星期六，我需要上午9点到下午5点，默认时段时长为60分钟。

我目前唯一想到的并且与链接上提供的唯一解决方案是通过应用 z-index 来附加一个innerHTML div，它将隐藏我不需要的时隙。但我注意到，如果用户拖动时间片选择，那么它可能会意外地包含隐藏的时间段。除了Fullcalendar之外，是否还有其他工具可以本地提供所需的内容操作？

解决方案

这是我迄今为止使用的这部分代码的解决方案，我为每个特定日期创建了一个div它将以不同的颜色突出显示
Javascript

 'viewRender'：function（view，element）{
 var currdisplay = view.name; 
 if（currdisplay =='agendaWeek'）{
 $（'。fc-bg .fc-day.fc-widget-content.fc-sat'）。html（\< div class ='saturday'>一些文字< / div> \）; 
 $（'。fc-bg .fc-day.fc-widget-content.fc-mon'）。html（\< div class ='monday'>一些文字< / div> \\ \\）; 
 $（'。fc-bg .fc-day.fc-widget-content.fc-wed'）。html（\< div class ='wednesday'>一些文字< / div> \\ \\）; 
} 
}，
  

CSS

  .saturday {
 width：113px; 
 height：174px; 
背景：＃A4A4A4; 
位置：绝对; 
 top：352px; 
 line-height：22px; 
} 
 
 .monday，wednesday {
 width：113px; 
 height：130px; 
背景：＃A4A4A4; 
位置：绝对; 
 top：396px; 
 line-height：22px; 
 
 $ / code> 

所以在这段代码中，我突出了星期一和星期三从18到21和星期六17至21

最后为了防止在这几个小时选择我使用这段代码

 'select'：function（start，end，jsEvent，view）{
 var start_date = moment.tz（start，'YourTimezone'）; 
 var end_date = moment.tz（结束，'YourTimezone'）; 
 var unselect = moment（start_date）.format（\dddd\）; 
 var unselect_start = moment（start_date）.format（\HHmm\）
 var unselect_end = moment（end_date）.format（\HHmm\）
 
 if（unselect =='Monday'|| unselect =='Wednesday'）{
 if（unselect_start> = 1800 || unselect_end> 1800）{
 $（'。calendar'） .fullCalendar（ '取消选择'）; 
 return; 
 
} else if（unselect =='Saturday'）{
 if（unselect_start> = 1700 || unselect_end> 1700）{
 $（'。calendar' ）.fullCalendar（ '取消选择'）; 
 return; 
} 
} 
} 
  

$ c> minute.tz.js 库采取正确的时区格式日期

I need to disable some timeslots on certain days in fullcalendar.I have already seen this: Disable timeslot ranges in jQuery fullcalendar plugin

But apart from the fact that it refers to an older version it doesn't provide a solid solution.

I have enabled working hours 9am - 9pm and timeslots every 30 minutes but I need different ranges in Mondays and Wednesdays 9am to 6pm. Also on Saturdays I need 9am to 5pm and default slot duration to 60 minutes.

The only solution I have thought so far and matches the one on the link provided, is to append an innerHTML div which will hide the timeslots that I don't need by applying a z-index to it. But I noticed that if user drags time slot select then it could accidentally include even the hidden time slots

Apart from Fullcalendar, is there any other tool that might provide natively the desired operations?

解决方案

Here is the solution i have used so far with this part of code, i create a div for each specific date which will be highlighted in different color Javascript

'viewRender' : function(view, element) {
    var currdisplay=view.name;
    if(currdisplay=='agendaWeek'){
        $('.fc-bg .fc-day.fc-widget-content.fc-sat').html(\"<div class='saturday'>some text</div>\");
        $('.fc-bg .fc-day.fc-widget-content.fc-mon').html(\"<div class='monday'>some text</div>\");
        $('.fc-bg .fc-day.fc-widget-content.fc-wed').html(\"<div class='wednesday'>some text</div>\");
    }
},

CSS

.saturday{ 
    width: 113px;
    height: 174px;
    background: #A4A4A4;
    position: absolute;
    top: 352px;
    line-height: 22px;
}

.monday, wednesday{ 
    width: 113px;
    height: 130px;
    background: #A4A4A4;
    position: absolute;
    top: 396px;
    line-height: 22px;
}

so with this code i highlight Monday and Wednesday from 18 to 21 and Saturday from 17 TO 21

finally to prevent selection on these hours i use this piece of code

'select' : function(start, end, jsEvent, view) {
    var start_date = moment.tz(start, 'YourTimezone');
    var end_date = moment.tz(end, 'YourTimezone');
    var unselect = moment(start_date).format(\"dddd\");
    var unselect_start = moment(start_date).format(\"HHmm\")
    var unselect_end = moment(end_date).format(\"HHmm\")

    if(unselect == 'Monday' || unselect == 'Wednesday'){
        if(unselect_start >=1800 || unselect_end >1800){
          $('.calendar').fullCalendar('unselect');
          return;
        }
    } else if(unselect == 'Saturday'){
        if(unselect_start >=1700 || unselect_end >1700){
          $('.calendar').fullCalendar('unselect');
          return;
        }
    }
}

i have included minute.tz.js library to take correct timezone format date

这篇关于在Fullcalendar上应用不同的时间段和范围的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！