ui-日历每天一个事件

Question

我在我的项目中使用 ui-calendar 和 angularjs 进行休假管理 project.If 用户某天请假，我想限制他 select 如果用户在 2017 年 6 月 23 日休假，并且用户 select 使用 ui- 从 2017 年 6 月 21 日到 2017 年 6 月 24 日，则计算该日期 again.ie-日历 select 多个选项，我应该会收到一条提醒，说已经请假了。如何解决这个问题。请帮忙。信息：我正在使用 REST Web 服务从我的数据库中获取休假事件。我正在使用 fullcalendar.js 文件，它说版本是 v2.4.0

我的代码

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


                    });
                });

            });



        }
    }

}]);

Answer 1

在"select"回调中，获取现有事件的列表，如果其中任何事件的日期与选择重叠，则表示用户已经预订了全部或部分选择的假期.所以你可以阻止它继续，就像你在检查它是否在今天的日期之前已经得到的那样（p.s。你应该使用 momentJS 的日期比较函数以获得更可靠的结果 - 参见 momentjs.com/docs/#/询问）。此外，当您将数据提交到服务器时，服务器应再次验证此规则，因为客户端数据始终可能被恶意用户操纵。

要获取事件，您不会从数据库中获取它们 - 使用此：https://fullcalendar.io/docs/event_data/clientEvents 获取当前显示在日历中的事件。您可以使用过滤器回调 return 仅与您选择的 start/end 日期相关的那些

ui-日历每天一个事件

ui-calendar one event per day

fullcalendar

angularjs

ui-calendar