I am using ui-calendar with angularjs in my project for a leave management project.If a user has taken a leave on some day ,i want to restrict him from selecting that date again.ie if a user has taken a leave on 23rd JUNE 2017,and when the user selects dates from 21st JUNE 2017 to 24th JUNE 2017 using ui-calendar select multiple option,i should get an alert saying there is a leave already taken .How to go about this .Please help. Info: I am fetching leave events from my database using REST Webservices. I am using fullcalendar.js file which says the version is v2.4.0
My code
app.factory('calendarSer', ['$http', '$rootScope', 'uiCalendarConfig', function($http, $rootScope, uiCalendarConfig) {
return {
displayCalendar: function($scope) {
$http.get("rest/leave/holidayList", {}).success(function(data, status, headers, config) {
$scope.holidayList = data;
$calendar = $('[ui-calendar]');
var date = new Date(),
d = date.getDate(),
m = date.getMonth(),
y = date.getFullYear();
$scope.changeView = function(view) {
$calendar.fullCalendar('changeView', view);
};
var m = null;
if ($scope.selectable == "Yes") {
m = true;
} else {
m = false;
}
/* config object */
$scope.uiConfig = {
calendar: {
lang: 'da',
height: 400,
editable: true,
selectable: m,
displayEventTime: false,
header: {
left: 'month basicWeek basicDay',
center: 'title',
right: 'today prev,next'
},
eventClick: function(date, jsEvent, view) {
$scope.alertMessage = (date.title + ' was clicked ');
alert("clicked" + date.title);
},
select: function(start, end, allDay) {
if(start < new Date())
{
alert("You cannot apply for leave on this day")
}
else
{
// Its a right date
// Do something
var obj = {};
obj.startDate = start.toDate();
obj.endDate = end.toDate();
$rootScope.selectionDate = obj;
$("#modal1").openModal();
}
},
dayRender: function(date, cell) {
var today = new Date();
today = moment(today).toDate();
var end = new Date();
end = moment(end).toDate();
end.setDate(today.getDate() + 7);
date = moment(date).toDate();
angular.forEach($scope.holidayList, function(value) {
if (((moment(value.holiday_date).format("YYYY-MM-DD")) == moment(date).format("YYYY-MM-DD"))) {
cell.css("background-color", "#2bbbad");
//$('.date').text('Today');
// cell.prepend("<span style=\"max-width:200px;word-wrap:break-word;margin-top:10px;\">" + value.description + "</span>");
// cell.prepend("<br>")
}
});
},
eventRender: $scope.eventRender,
}
};
console.log($scope.holidayList);
}).error(function(data, status, headers, config) {
alert("error from holidaylist");
});
$scope.events = [];
$scope.eventSources = [$scope.events];
$http.get($scope.url, {
cache: true,
params: {signum:$scope.signum}
}).then(function(data) {
console.log(data);
$scope.events.slice(0, $scope.events.length);
angular.forEach(data.data, function(value) {
console.log(value.title);
if (value.approvalStatus == "Approved") {
var k = '#114727';
} else {
k = '#b20000'
}
$scope.events.push({
title: value.signum,
description: value.signum,
start: value.startDate,
end: value.endDate,
allDay: value.isHalfDay,
stick: true,
status: value.approvalStatus,
backgroundColor: k
});
});
});
}
}
}]);In the "select" callback, get the list of existing events, and if any of them have dates which overlap the selection, then it means the user has already got leave booked for all or part of the selection. So you can stop it from continuing just like you already have got when checking that it's before today's date (p.s. you should use momentJS's date comparison functions for more robust results - see momentjs.com/docs/#/query). Also, when you submit the data to the server, the server should validate this rule again, since client-side data can always be manipulated by a malicious user.
To get the events, you wouldn't get them from the DB - use this: https://fullcalendar.io/docs/event_data/clientEvents to get the events currently showing in the calendar. You can use the filter callback to return only ones that will be relevant to your selected start/end dates