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

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

＆＃34;其余/离开/列表＆＃34; ：将返回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];

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

所以你需要从响应中返回类似下面的东西＆＃34;休息/离开/列表＆＃34;：

{
    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月01日和结束日期1月30日，在2月，用户在第5个月休假。所以你创建了三行，第1行显示2月01日到2月04日，第2行显示2月05日缺席，第3行显示2月06日 - 2月31日显示

使用变量＆＃34;离开＆＃34;从数组中，您可以在前端更改颜色。您可以从中了解如何实现它。 Jquery Full calendar and dynamic event colors

关于显示ui-calendar事件

1 个答案: