Apply different timeslots and ranges for each day on Fullcalendar

问题

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?

回答1:

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

来源：https://stackoverflow.com/questions/26829039/apply-different-timeslots-and-ranges-for-each-day-on-fullcalendar

标签

javascript

jquery

fullcalendar