Angular

Calendar Events Using EntityFramework In AngularJS

Introduction

Here I have used ui-calendar directives to create a simple scheduling application for displaying events in a calendar.

Description

I have fetched some calendar events using a back-end and shown them on the calendar. The event description will be shown when the end user clicks on the event link in a calendar.

Project Link
Steps to be followed

Step 1

Create an MVC application named SatyaEventCalendarInAngularJS.

Step 2

Create a database named "Calender" in the App_Data folder. Inside this database, create a new table named "Demo_Events". 
 
 
 
Then, add some demo records in this table.

Script
  1. SET IDENTITY_INSERT [dbo].[Demo_Events] ON  
  2. INSERT INTO [dbo].[Demo_Events] ([EventID], [Title], [Description], [StartAt], [EndAt], [IsFullDay])   
  3.   
  4. VALUES (1, N'Birthday Party', N'Satyaprakash Birthday party at 9:00', N'2016-04-06 21:30:00', N'2016-  
  5.   
  6. 04-06 21:30:00', 1)  
  7. INSERT INTO [dbo].[Demo_Events] ([EventID], [Title], [Description], [StartAt], [EndAt], [IsFullDay])   
  8.   
  9. VALUES (2, N'WeekEnd Party 1', N'Chiller Night On Sunday With Satyaprakash Samantaray', N'2016-04-07   
  10.   
  11. 00:00:00', N'2016-04-07 00:00:00', 1)  
  12. INSERT INTO [dbo].[Demo_Events] ([EventID], [Title], [Description], [StartAt], [EndAt], [IsFullDay])   
  13.   
  14. VALUES (3, N'WeekEnd Party 2', N'Chiller Night On Sunday With Satyaprakash Samantaray', N'2016-04-08   
  15.   
  16. 00:00:00', N'2016-04-08 00:00:00', 1)  
  17. INSERT INTO [dbo].[Demo_Events] ([EventID], [Title], [Description], [StartAt], [EndAt], [IsFullDay])   
  18.   
  19. VALUES (4, N'WeekEnd Party 3', N'Chiller Night On Sunday With Satyaprakash Samantaray', N'2016-04-09   
  20.   
  21. 00:00:00', N'2016-04-09 00:00:00', 1)  
  22. INSERT INTO [dbo].[Demo_Events] ([EventID], [Title], [Description], [StartAt], [EndAt], [IsFullDay])   
  23.   
  24. VALUES (5, N'WeekEnd Party 4', N'Chiller Night On Sunday With Satyaprakash Samantaray', N'2016-04-11   
  25.   
  26. 00:00:00', N'2016-04-11 00:00:00', 1)  
  27. INSERT INTO [dbo].[Demo_Events] ([EventID], [Title], [Description], [StartAt], [EndAt], [IsFullDay])   
  28.   
  29. VALUES (6, N'WeekEnd Party 5', N'Chiller Night On Sunday With Satyaprakash Samantaray', N'2016-04-14   
  30.   
  31. 00:00:00', N'2016-04-14 00:00:00', 1)  
  32. INSERT INTO [dbo].[Demo_Events] ([EventID], [Title], [Description], [StartAt], [EndAt], [IsFullDay])   
  33.   
  34. VALUES (7, N'WeekEnd Party 6', N'Chiller Night On Sunday With Satyaprakash Samantaray', N'2016-04-16   
  35.   
  36. 00:00:00', N'2016-04-16 00:00:00', 1)  
  37. INSERT INTO [dbo].[Demo_Events] ([EventID], [Title], [Description], [StartAt], [EndAt], [IsFullDay])   
  38.   
  39. VALUES (8, N'WeekEnd Party 7', N'Chiller Night On Sunday With Satyaprakash Samantaray', N'2016-04-18   
  40.   
  41. 00:00:00', N'2016-04-18 00:00:00', 1)  
  42. INSERT INTO [dbo].[Demo_Events] ([EventID], [Title], [Description], [StartAt], [EndAt], [IsFullDay])   
  43.   
  44. VALUES (9, N'WeekEnd Party 8', N'Chiller Night On Sunday With Satyaprakash Samantaray', N'2016-04-20   
  45.   
  46. 00:00:00', N'2016-04-20 00:00:00', 1)  
  47. INSERT INTO [dbo].[Demo_Events] ([EventID], [Title], [Description], [StartAt], [EndAt], [IsFullDay])   
  48.   
  49. VALUES (10, N'WeekEnd Party 9', N'Chiller Night On Sunday With Satyaprakash Samantaray', N'2016-04-24   
  50.   
  51. 00:00:00', N'2016-04-24 00:00:00', 1)  
  52. SET IDENTITY_INSERT [dbo].[Demo_Events] OFF 
Step 3

Now, add the Entity Data Model.

Go to Solution Explorer, right click on Project name from Solution Explorer.
 
Go to Add > New item > select ADO.NET Entity Data Model under Data.
 
Enter the Model name > Add.
 
A popup window will appear (Entity Data Model Wizard). Here, select Generate from the database.
 
Next, choose your data connection > select your database > Next.
 
Select tables > enter Model Namespace > Finish.

Step 4

Then, add the fullcalendar.css file into your application. This file can be found in the attached project.

Step 5

Add a JavaScript file related to ui-calendar dependencies into your application. 

Step 6

Make a JS file named "MyApp.js" for Angular components.

Code Ref
  1. var app = angular.module('myApp', ['ui.calendar']);  
  2. app.controller('myNgController', ['$scope', '$http', 'uiCalendarConfig', function ($scope, $http, uiCalendarConfig) {  
  3.       
  4.     $scope.SelectedEvent = null;  
  5.     var isFirstTime = true;  
  6.   
  7.     $scope.events = [];  
  8.     $scope.eventSources = [$scope.events];  
  9.   
  10.     $http.get('/home/getevents', {  
  11.         cache: true,  
  12.         params: {}  
  13.     }).then(function (data) {  
  14.         $scope.events.slice(0, $scope.events.length);  
  15.         angular.forEach(data.data, function (value) {  
  16.             $scope.events.push({  
  17.                 title: value.Title,  
  18.                 description: value.Description,  
  19.                 start: new Date(parseInt(value.StartAt.substr(6))),  
  20.                 end: new Date(parseInt(value.EndAt.substr(6))),  
  21.                 allDay: value.IsFullDay,  
  22.                 stick: true  
  23.             });  
  24.         });  
  25.     });  
  26.   
  27.     $scope.uiConfig = {  
  28.         calendar: {  
  29.             height: 450,  
  30.             editable: true,  
  31.             displayEventTime: false,  
  32.             header: {  
  33.                 left: 'month basicWeek basicDay agendaWeek agendaDay',  
  34.                 center: 'title',  
  35.                 right:'today prev,next'  
  36.             },  
  37.             eventClick: function (event) {  
  38.                 $scope.SelectedEvent = event;  
  39.             },  
  40.             eventAfterAllRender: function () {  
  41.                 if ($scope.events.length > 0 && isFirstTime) {  
  42.                     uiCalendarConfig.calendars.myCalendar.fullCalendar('gotoDate', $scope.events[0].start);  
  43.                     isFirstTime = false;  
  44.                 }  
  45.             }  
  46.         }  
  47.     };  
  48.   
  49. }]) 
Code Description

I have included the ui.calendar module in our module (here referred to as "myApp") for implementing the ui-calender (fullcalendar) in our AngularJS application as well as uiCalendarConfig into our Controller for getting the ui-calender object into our Controller.
  1. var app = angular.module('myApp', ['ui.calendar']);  
  2. app.controller('myNgController', ['$scope', '$http', 'uiCalendarConfig', function ($scope, $http, uiCalendarConfig) {  
  3.       
  4.     $scope.SelectedEvent = null;  
  5.     var isFirstTime = true;  
  6.   
  7.     $scope.events = [];  
  8.     $scope.eventSources = [$scope.events]; 
Load events from server
  1. $http.get('/home/getevents', {  
  2.        cache: true,  
  3.        params: {}  
  4.    }).then(function (data) {  
  5.        $scope.events.slice(0, $scope.events.length);  
  6.        angular.forEach(data.data, function (value) {  
  7.            $scope.events.push({  
  8.                title: value.Title,  
  9.                description: value.Description,  
  10.                start: new Date(parseInt(value.StartAt.substr(6))),  
  11.                end: new Date(parseInt(value.EndAt.substr(6))),  
  12.                allDay: value.IsFullDay,  
  13.                stick: true  
  14.            });  
  15.        });  
  16.    }); 
Configure Calendar
  1. $scope.uiConfig = {  
  2.        calendar: {  
  3.            height: 450,  
  4.            editable: true,  
  5.            displayEventTime: false,  
  6.            header: {  
  7.                left: 'month basicWeek basicDay agendaWeek agendaDay',  
  8.                center: 'title',  
  9.                right:'today prev,next'  
  10.            },  
  11.            eventClick: function (event) {  
  12.                $scope.SelectedEvent = event;  
  13.            }, 
Focus first event
  1. uiCalendarConfig.calendars.myCalendar.fullCalendar('gotoDate', $scope.events[0].start);  
  2.                     isFirstTime = false; 
Step 7

Create an MVC Controller. I have added an "Index" action into the "Home" Controller.

Step 8

Added View for your action and design.

Code Ref
  1. @{  
  2.     ViewBag.Title = "Satyaprakash";  
  3. }  
  4.   
  5. <h2 style="background-color: Yellow;color: green; text-align: center; font-style: oblique">Satyaprakash Calender AngularJS</h2>   
  6.   
  7. <div ng-app="myApp" ng-controller="myNgController">  
  8.     <div class="row">  
  9.         <div class="col-md-8">  
  10.             <div id="calendar" ui-calendar="uiConfig.calendar" ng-model="eventSources" calendar="myCalendar"></div>  
  11.         </div>  
  12.         <div class="col-md-4">  
  13.             <div ng-show="SelectedEvent" class="alert alert-success" style="margin-top:50px">  
  14.                 <h2 style="margin-top:0px"> Nofication Is:</h2>  
  15.                 <h3 style="color:white">{{SelectedEvent.title}}</h3>  
  16.                 <p>{{SelectedEvent.description}}</p>  
  17.             </div>  
  18.         </div>  
  19.     </div>  
  20. </div>  
  21.   
  22.   
  23. <link href="~/Content/fullcalendar.css" rel="stylesheet" />  
  24. <link href="~/Content/bootstrap.css" rel="stylesheet" />  
  25.   
  26. <script src="~/Scripts/moment.js"></script>  
  27. <script src="~/Scripts/jquery-1.11.3.js"></script>  
  28. <script src="~/Scripts/angular.js"></script>  
  29. <script src="~/Scripts/calendar.js"></script>  
  30. <script src="~/Scripts/fullcalendar.js"></script>  
  31. <script src="~/Scripts/gcal.js"></script>  
  32.   
  33. <script src="~/Scripts/MyApp.js"></script> 
Code Description

Here, I have added the code using the AngularJS Controller and related AangularJS config file and model to retrieve events. After clicking on the event link, the description notification will appear from SQL server. 
  1. <div ng-app="myApp" ng-controller="myNgController">  
  2.     <div class="row">  
  3.         <div class="col-md-8">  
  4.             <div id="calendar" ui-calendar="uiConfig.calendar" ng-model="eventSources" calendar="myCalendar"></div>  
  5.         </div>  
  6.         <div class="col-md-4">  
  7.             <div ng-show="SelectedEvent" class="alert alert-success" style="margin-top:50px">  
  8.                 <h2 style="margin-top:0px"> Nofication Is:</h2>  
  9.                 <h3 style="color:white">{{SelectedEvent.title}}</h3>  
  10.                 <p>{{SelectedEvent.description}}</p>  
  11.             </div>  
  12.         </div>  
  13.     </div>  
  14. </div> 
The events message can be called using code -
  1. <div class="col-md-8">  
  2.             <div id="calendar" ui-calendar="uiConfig.calendar" ng-model="eventSources" calendar="myCalendar"></div>  
  3. </div> 
After clicking on events on calendar, the event description notification will be shown.
  1. <div class="col-md-4">  
  2.             <div ng-show="SelectedEvent" class="alert alert-success" style="margin-top:50px">  
  3.                 <h2 style="margin-top:0px"> Nofication Is:</h2>  
  4.                 <h3 style="color:white">{{SelectedEvent.title}}</h3>  
  5.                 <p>{{SelectedEvent.description}}</p>  
  6.             </div>  
  7.         </div> 
The most important part is to add the references of CSS and JS files.
  1. <link href="~/Content/fullcalendar.css" rel="stylesheet" />  
  2. <link href="~/Content/bootstrap.css" rel="stylesheet" />  
  3.   
  4. <script src="~/Scripts/moment.js"></script>  
  5. <script src="~/Scripts/jquery-1.11.3.js"></script>  
  6. <script src="~/Scripts/angular.js"></script>  
  7. <script src="~/Scripts/calendar.js"></script>  
  8. <script src="~/Scripts/fullcalendar.js"></script>  
  9. <script src="~/Scripts/gcal.js"></script>  
  10.   
  11. <script src="~/Scripts/MyApp.js"></script> 
Stesp 9

Add another action named "GetEvents()" in your MVC controller for fetching the data (here, Events data) from the database.

Code Ref
  1. public JsonResult GetEvents()  
  2.         {  
  3.             using (CalenderEntities dc = new CalenderEntities())  
  4.             {  
  5.                 var v = dc.Demo_Events.OrderBy(a => a.StartAt).ToList();  
  6.                 return new JsonResult { Data = v, JsonRequestBehavior = JsonRequestBehavior.AllowGet };  
  7.             }  
  8.         }   
Code Description

Here, CalenderEntities is the name of the model entity. Using this object, we can retrieve the data using order by StartAt datetime column data.

OUTPUT

List of events on this date.



The Event description will be shown as below.



Mobile View




SUMMARY
 
In this article, we learned the following - 
  1. What are Calendar Events In AngularJS.
  2. How to use Entity Framework to retrieve calendar events from back-end in AngularJS.
  3. List of ui-calendar dependancies.
  4. Mobile View support.

Up Next
    Ebook Download
    View all
    Learn
    View all
    Get Started

    You need to be a premium member to use this feature. To access it, you'll have to upgrade your membership.

    Become a sharper developer and jumpstart your career.

    Basic

    $0

    $

    . 00

    monthly

    For Basic members:

    • Standard Profile
    • Access learning courses
    • Access free e-books
    • 1x point
    Premium

    $20

    $

    . 00

    monthly

    For Premium members:

    • Earn 2x reward points
    • Premium profile with Verified check
    • Premium Avatar with status update
    • Learning courses
    • Unlimited Certifications and badges on profile
    • Unlimited Book downloads
    • Access to Premium content
    • Online Training
    • Unlimited PDF conversions and downloads
    • Professional Resume Writing
    • Interview Preparations Guide
    • 25 messages per month
    • 1 "Kodzu" avatar, basic
    Elite

    $45

    $

    . 00

    monthly

    For Elite members:

    • Bundle E-books
    • Access to all Learn Series
    • Unlimited Apply Jobs