CODEWITHSUNDEEP
fullcalendarui-calendarfullcalendar-2
Vikhyath Maiya
Vikhyath Maiya

Reputation: 3202

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,
};

Upvotes: 4

Views: 7659

Answers (1)

Luís Cruz
Luís Cruz

Reputation: 14980

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.

Upvotes: 6

Related Questions