關於顯示ui日歷事件

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];

您正在填充事件並將其綁定到eventSources。

因此，您需要從響應“ 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
}

在上面的數組中，您需要創建單獨的行以進行缺失和存在。 例如，第一行由一月組成，用戶沒有休假，因此您創建了一個行，開始日期為Jan 01，結束日期為Jan 30。 因此，您創建了三行，第1行當前為2月01日至2月04日，第2行當前為2月5日，第3行當前為2月6日至2月31日

使用數組中的變量“ leave”，可以在前端更改顏色。 您可以從中參考如何實現它。 jQuery全日歷和動態事件顏色