Search code examples
fullcalendarui-calendarfullcalendar-2

Disable event creation on Weekends


I am trying to use Fullcalendar for one of my leave application. I have select option enabled so that the user can select dates and apply leave on it. But I want to disable weekends from getting selected, ie it should give a alert when the user clicks on the weekends. Is it achivable?

My code

this.calendarOptions = {
    height:450,
    defaultDate: moment(new Date(),'YYYY-MM-DD'),
    editable: false,
    stick:true,
    selectable:true,
    eventLimit: false, // allow "more" link when too many events
    events: this.eventList,
    header: {
        left: 'month basicWeek basicDay',
        center: 'title',
        right: 'today prev,next'
    },
    displayEventTime: false,

    select: (start, end, allDay) => {
        this.startDate=moment(start).format("YYYY-MM-DD");
        this.endDate=moment(end).format("YYYY-MM-DD");   
        $('.first.modal').modal('show');
    },
    dayRender: (date, cell)=> {
    //logic
    },
    selectOverlap:false,
};


Solution

  • You can do that on the select method. Just go from the startDate to the endDate and check if any of those days are weekends. If so, display the alert / popup and return false.

    select: (start, end, allDay) => {
        var startDate = moment(start),
        endDate = moment(end),
        date = startDate.clone(),
        isWeekend = false;
    
        while (date.isBefore(endDate)) {
            if (date.isoWeekday() == 6 || date.isoWeekday() == 7) {
                isWeekend = true;
            }    
            date.add(1, 'day');
        }
    
        if (isWeekend) {
            alert('can\'t add event - weekend');
    
            return false;
        }
    
        this.startDate= startDate.format("YYYY-MM-DD");
        this.endDate= endDate.format("YYYY-MM-DD");   
    
        //$('.first.modal').modal('show');
    },
    

    See fiddle.