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
});
});
});
}
}
}]);答案 0 :(得分：1)
在“选择”回调中，获取现有事件的列表，如果其中任何事件的日期与选择重叠，则表示用户已经为所有或部分选择预订了休假。所以你可以阻止它继续，就像你在今天的日期之前检查它一样（p.s.你应该使用momentJS的日期比较函数来获得更强大的结果 - 请参阅momentjs.com/docs/#/query）。此外，当您将数据提交到服务器时，服务器应该再次验证此规则，因为客户端数据始终可以被恶意用户操纵。
要获取事件，您不会从数据库中获取它们 - 使用此https://fullcalendar.io/docs/event_data/clientEvents来获取当前显示在日历中的事件。您可以使用过滤器回调仅返回与所选开始/结束日期相关的回调