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