关于显示 ui-calendar 事件

Question

大家好，我正在设计一个使用 angularjs 和 ui-calendar 的休假管理网站。如果用户休假，则从数据库中获取值并在日历中显示为事件。现在我想做的是，如果用户在特定日期没有缺席，则应显示为当前事件。希望下图有助于更好地理解。

现在 vikki 在星期五休假。我想将其他日期标记为以不同颜色显示的事件，说明他在场。我需要在周视图中显示。如果有任何办法，请告诉我这个东西。下面是我的代码

app.factory('calendarSer', ['$http','$rootScope', 'uiCalendarConfig', function ($http,$rootScope, uiCalendarConfig) {

    return {
        displayCalendar: function($scope) {
            $calendar = $('[ui-calendar]');

            var date = new Date(),
                d = date.getDate(),
                m = date.getMonth(),
                y = date.getFullYear();

            $scope.changeView = function(view) {
                $calendar.fullCalendar('changeView', view);
            };

            /* config object */
            $scope.uiConfig = {
                calendar: {
                    lang: 'da',
                    height: 450,
                    editable: true,
                    selectable: true,


                    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) {

                        var obj = {};
                        obj.startAt = start.toDate();


                        obj.startAt = new Date(obj.startAt).toUTCString();
                        obj.startAt = obj.startAt.split(' ').slice(0, 4).join(' ');

                        obj.endAt = end.toDate();
                        obj.endAt = new Date(obj.endAt).toUTCString();
                        obj.endAt = obj.endAt.split(' ').slice(0, 4).join(' ');



                        $rootScope.selectionDate = obj;



                        $("#modal1").openModal();


                        calendar.fullCalendar('unselect');
                    },

                    eventRender: $scope.eventRender
                }
            };

            $scope.events = [];
            $scope.eventSources = [$scope.events];
            $http.get("rest/leave/list", {
                cache: true,
                params: {}
            }).then(function(data) {
                $scope.events.slice(0, $scope.events.length);
                angular.forEach(data.data, function(value) {
                    console.log(value.title);
                    $scope.events.push({

                        title: value.title,
                        description: value.description,
                        start: value.startAt,
                        end: value.endAt,
                        allDay: value.isFull,
                        stick: true
                    });
                });
            });

        }
    }

}]);

谢谢你

Answer 1

您还需要创建显示用户在场的事件数组。但是，如果您尝试在前端创建数组，那么您将不知道填充日历的其他用户信息。

"rest/leave/list" : 将返回 vikki 正在休假，但是如果其他用户没有休假并且未在此数组中返回怎么办？您将如何填写日历说用户在其他日子都在场？

$scope.events.push({
    title: value.title,
    description: value.description,
    start: value.startAt,
    end: value.endAt,
    allDay: value.isFull,
    stick: true
});
$scope.eventSources = [$scope.events];

您正在填充事件并将其绑定到事件源。

所以你需要从响应“rest/leave/list”中返回类似下面的内容：

{
    title: "vikki",
    description: "description",
    startAt: "2017-05-05 00:00",
    endAt: "2017-05-05 23:59",
    isFull: true,
    leave: true <- This will say he is absent 
},
{
    title: "vikki",
    description: "description",
    //The start and end date time will control the block that will be booked in the calendar
    startAt: "2017-06-05 00:00",
    endAt: "2017-01-06 23:59",
    isFull: true,
    leave: false <- This will say he is present 
    //This array will book the calendar from May-06 to end of the month.
    //If you want the past, then create one in the past and send it from 
    //server
}

在上面的数组中，您需要为缺席和在场创建单独的行。例如，第一行包含用户没有休假的 1 月份，因此您创建了一行，开始日期为 1 月 1 日，结束日期为 1 月 30 日，在 2 月，用户在 5 日休假。因此，您创建了三行，第 1 行包含 2 月 1 日至 2 月 4 日，第 2 行缺席 2 月 5 日，第 3 行包含 2 月 6 日至 2 月 31 日

使用数组中的变量“leave”，您可以在前端更改颜色。您可以从中参考如何实现它。 Jquery Full calendar and dynamic event colors