Implement Event/Scheduler calendar using ui-calendar in angularJS

Today I will show you, how to implement Event/Scheduler calendar using ui-calendar in AngularJS.
In this article we have used the ui-calendar directives to create a simple scheduling application for show events in a calendar. Here I have only shown events in a calendar for make the simple and easy understandable. Later we will do more like add new event, edit existing event and more.
Event/Scheduler calendar using ui-calendar in AngularJS

Selected Event:

{{SelectedEvent.title}}

{{SelectedEvent.description}}

Implement Event/Scheduler calendar using ui-calendar in angularJS
var app = angular.module('myApp', ['ui.calendar']);
app.controller('myNgController', ['$scope', '$http', 'uiCalendarConfig', function ($scope, $http, uiCalendarConfig) {
    
    $scope.SelectedEvent = null;
    var isFirstTime = true;

    $scope.events = [];
    $scope.eventSources = [$scope.events];


    //Load events from server
    $http.get('/home/getevents', {
        cache: true,
        params: {}
    }).then(function (data) {
        $scope.events.slice(0, $scope.events.length);
        angular.forEach(data.data, function (value) {
            $scope.events.push({
                title: value.Title,
                description: value.Description,
                start: new Date(parseInt(value.StartAt.substr(6))),
                end: new Date(parseInt(value.EndAt.substr(6))),
                allDay : value.IsFullDay
            });
        });
    });

    //configure calendar
    $scope.uiConfig = {
        calendar: {
            height: 450,
            editable: true,
            displayEventTime: false,
            header: {
                left: 'month basicWeek basicDay agendaWeek agendaDay',
                center: 'title',
                right:'today prev,next'
            },
            eventClick: function (event) {
                $scope.SelectedEvent = event;
            },
            eventAfterAllRender: function () {
                if ($scope.events.length > 0 && isFirstTime) {
                    //Focus first event
                    uiCalendarConfig.calendars.myCalendar.fullCalendar('gotoDate', $scope.events[0].start);
                }
            }
        }
    };

}])
Posted By :