Implement Event/Scheduler calendar using ui-calendar in angularJS

Introduction

In the previous article, I have shown Infinite-scroll for facebook like pagination 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 making the example simple and understandable. Later we will do more like add new event, edit existing event and more.

Read more AngularJS with ASP.NET

Just follow the following steps in order to implement "Event/Scheduler calendar using ui-calendar in angularJS".

Here In this article, I have used Visual Studio 2013

Step - 1: Create New Project.

Go to File > New > Project > ASP.NET Web Application (under web) > Entry Application Name > Click OK > Select Empty template > Checked MVC (under "Add folders and core references for" option) > OK

Step-2: Add a Database.

Go to Solution Explorer > Right Click on App_Data folder > Add > New item > Select SQL Server Database Under Data > Enter Database name > Add.

Step-3: Create a table for store data.

Open Database > Right Click on Table > Add New Table > Add Columns > Save > Enter table name > Ok.

In this example, I have created a table (see below image) for store events data for showing in ui-calendar.

Events Table

Step-4: Add Entity Data Model.

Go to Solution Explorer > Right Click on Project name form Solution Explorer > Add > New item > Select ADO.net Entity Data Model under data > Enter model name > Add.
A popup window will come (Entity Data Model Wizard) > Select Generate from database > Next >
Chose your data connection > select your database > next > Select tables > enter Model Namespace > Finish.

Step-5: Add fullcalendar.css file into our application.

Here I have added a folder "Content" in our application
Right Click on project from solution explorer > Add > new folder > Rename "Content" and then
Right click on that folder > Add > Existing Item... > select the fullcalendar.css file > Add.

you can download ui-calender dependencies files from here ui-calendar dependencies.rar.

Step-6: Add dependencies js (ui-calendar dependancies) file into our application.

Here in this article, we have used ui-calendar angularjs directive. So, we will import ui-calendar dependencies js files into our application.
If "Scripts" folder not added in your application, add Script folder first
Right Click on project from solution explorer > Add > new folder > Rename "Scripts" and then
Right click on that folder > Add > Existing Item... > select the following js file > Add.

moment.js
jquery-1.11.3.js
angular.js
calendar.js
fullcalendar.js
gcal.js

you can download ui-calender dependencies files from here ui-calendar dependencies.rar.

Step-7: Create a javascript file for angular components.

Here I have added a javascript file in the "Scripts" folder for add angular components (module, controller etc).

Right click on your "Scripts" folder > Add > New Item > select "javascript" file > Enter name (here "MyApp.js")> Ok.
Write following code

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,
                stick: true
            });
        });
    });

    //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);
                    isFirstTime = false;
                }
            }
        }
    };

}])

you can see here I have included the ui.calendar module in our module (here "myApp") for implement ui-calender (fullcalendar) in our angularjs application and uiCalendarConfig into our controller for getting the ui-calender object into our controller.

Step-8: Create an MVC Controller.

Go to Solution Explorer > Right Click on Controllers folder form Solution Explorer > Add > Controller > Enter Controller name > Select Templete "empty MVC Controller"> Add.

Here I have created a controller named "HomeController"

Step-9: Add new action into your controller.

Here I have added "Index" Action into "Home" Controller. Please write this following code

public ActionResult Index()
{
   return View();
}

Step-10: Add view for your Action and design.

Right Click on Action Method (here right click on Index action) > Add View... > Enter View Name > Select View Engine (Razor) > Add.
HTML Code

@{
    ViewBag.Title = "Index";
}
<h2>Schedular App</h2>
@* HTML *@
<div ng-app="myApp" ng-controller="myNgController">
    <div class="row">
        <div class="col-md-8">
            <div id="calendar" ui-calendar="uiConfig.calendar" ng-model="eventSources" calendar="myCalendar"></div>
        </div>
        <div class="col-md-4">
            <div ng-show="SelectedEvent" class="alert alert-success" style="margin-top:50px">
                <h2 style="margin-top:0px"> Selected Event:</h2>
                <h3 style="color:#A9A50E">{{SelectedEvent.title}}</h3>
                <p>{{SelectedEvent.description}}</p>
            </div>
        </div>
    </div>
</div>

@* CSS *@
<link href="~/Content/fullcalendar.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
@* JS *@
<script src="~/Scripts/moment.js"></script>
<script src="~/Scripts/jquery-1.11.3.js"></script>
<script src="~/Scripts/angular.js"></script>
<script src="~/Scripts/calendar.js"></script>
<script src="~/Scripts/fullcalendar.js"></script>
<script src="~/Scripts/gcal.js"></script>
@* OUR ANGULAR COMPONENTs *@
<script src="~/Scripts/MyApp.js"></script>

Step-11: Add an another action in our MVC controller for fetch data (here Events data) from the database.

public JsonResult GetEvents()
{
    //Here MyDatabaseEntities is our entity datacontext (see Step 4)
    using (MyDatabaseEntities dc = new MyDatabaseEntities())
    {
        var v = dc.Events.OrderBy(a => a.StartAt).ToList();
        return new JsonResult { Data = v, JsonRequestBehavior = JsonRequestBehavior.AllowGet };
    }
}

Step-12: Run Application.

Live Demo Download