Regarding displaying ui-calendar events

Question

Hello all i am designing a leave management website with angularjs and ui-calendar.If a user takes a leave ,the values are taken from the database and displayed as an event in the calendar.Now what i want to do is ,if the user is not absent on particular day,it should be displayed as present event.Hope the following image helps understanding better.

Now vikki is taking leave on friday.I want to mark other dates as an event displaying in different color saying he s present.I need this to be in the week view.Please let me know if there is any way to do this thing.Following is my code

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
                    });
                });
            });

        }
    }

}]);

Thanking you

Answer 1

You need to also create the events array which would display the user is present. However, if you try to create the array in the front-end, then you would not know the other user information to fill the calendar.

"rest/leave/list" : will return that vikki is on leave, however what if the other user that has not taken any leave and is not returned in this array? how will you be able to fill the calendar saying user is present all the other days?

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

You are filling the events and binding it to the eventSources.

So you need to return something like below from the reponse "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
}

In the above array, you need to create separate rows for absent and present. For example , 1st row consist of January month where the user has not taken any leaves, so you create a row with Start date Jan 01 and End date Jan 30, In Feb, the user has taken one leave on say 5th. So you create three rows, row 1 with Feb 01 to Feb 04 as present, row 2 with Feb 05 as absent, and row 3 with Feb 06 - Feb 31 as present

Using the variable "leave" from the array, in the frontend you can change the colour. You can refer it from this how to achieve it. Jquery Full calendar and dynamic event colors