CRUD Operations On AngularUI Calendar

Hi Everyone!

Thanks for the recommendations for my previous post, Implementing Event Scheduling in Angular UI Calendar. In this tutorial, I am going to explain about implementing the CRUD operations on UI Calendar. If you are new to this post, please refer the above link to understand the implementation of a basic UI calendar and how to load the events data from server to display in calendar.

In this tutorial, we are using the code from the previous post. The below screenshot represents the previous application.

CRUD operations on Angular UI Calendar(Event Scheduling)

Create a Visual Studio application (in this post, the application is created in VS 2015).
See previous article to know the Calendar implementation; click here.
You can find what libraries to add and how to get and display server data in UI-calendar from my previous post.
I am using the same table schema and ADO.NET Data Model here.

Add Controller to display View and CRUD functions

Right click on Controllers folder --> Add --> Select Empty Controller template --> name it (HomController) --> Add.
Replace the previous code with the following code.
1. using System;
2. using System.Collections.Generic;
3. using System.Linq;
4. using System.Web;
5. using System.Web.Mvc;
6. using AngularUICalendarCRUd.Models;
8. namespace AngularUICalendarCRUd.Controllers
9. {
10. public class HomeController : Controller
11. {
12. public ActionResult Index()
13. {
14. return View();
15. }
16. public JsonResult GetEvents()
17. {
18. //Here MyDatabaseEntities is our entity datacontext (see Step 4)
19. using (DatabaseEntities dc = new DatabaseEntities())
20. {
21. var v = dc.Events.OrderBy(a => a.StartAt).ToList();
22. return new JsonResult { Data = v, JsonRequestBehavior = JsonRequestBehavior.AllowGet };
23. }
24. }
25. //Action for Save event
26. [HttpPost]
27. public JsonResult SaveEvent(Event evt)
28. {
29. bool status = false;
30. using (DatabaseEntities dc = new DatabaseEntities())
31. {
32. if (evt.EndAt != null && evt.StartAt.TimeOfDay == new TimeSpan(0, 0, 0) &&
33. evt.EndAt.TimeOfDay == new TimeSpan(0, 0, 0))
34. {
35. evt.IsFullDay = true;
36. }
37. else
38. {
39. evt.IsFullDay = false;
40. }
42. if (evt.EventID > 0)
43. {
44. var v = dc.Events.Where(a => a.EventID.Equals(evt.EventID)).FirstOrDefault();
45. if (v != null)
46. {
47. v.Title = evt.Title;
48. v.Description = evt.Description;
49. v.StartAt = evt.StartAt;
50. v.EndAt = evt.EndAt;
51. v.IsFullDay = evt.IsFullDay;
52. }
53. }
54. else
55. {
56. dc.Events.Add(evt);
57. }
58. dc.SaveChanges();
59. status = true;
60. }
61. return new JsonResult { Data = new { status = status } };
62. }
63. [HttpPost]
64. public JsonResult DeleteEvent(int eventID)
65. {
66. bool status = false;
67. using (DatabaseEntities dc = new DatabaseEntities())
68. {
69. var v = dc.Events.Where(a => a.EventID.Equals(eventID)).FirstOrDefault();
70. if (v != null)
71. {
72. dc.Events.Remove(v);
73. dc.SaveChanges();
74. status = true;
75. }
76. }
77. return new JsonResult { Data = new { status = status } };
78. }
79. }
80. }
SaveEvent saves the event data to database. DeleteEvent deletes the event data from the database.
Index action is used to render the Index View.
Make the below changes in _Layout.cshtml page, in Shared folder.
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <meta charset="utf-8" />
5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
6. <title>@ViewBag.Title - My ASP.NET Application</title>
7. <script src="~/Scripts/modernizr-2.6.2.js"></script>
8. </head>
9. <body>
10. <div class="container body-content">
11. @RenderBody()
12. <hr />
13. <footer>
14. <p>© @DateTime.Now.Year - My ASP.NET Application</p>
15. </footer>
16. </div>
17. </body>
18. </html>

Add View to display the UI

Right click on Index action in the HomeController.cs file --> Add --> name it (Index) --> Add.
Replace the Index.cshtml page code with the below code.
1. @{
2. ViewBag.Title = "Index";
3. }
4. <h2>Angular UI calender Events Scheduling CRUD operations</h2>
5. 
6. <link href="~/Content/fullcalendar.css" rel="stylesheet" />
7. <link href="~/Content/bootstrap.css" rel="stylesheet" />
8. 
9. <script src="~/Scripts/moment.js"></script>
10. <script src="~/Scripts/jquery-1.11.3.js"></script>
11. <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.js"></script>
12. <script src="~/Scripts/calendar.js"></script>
13. <script src="~/Scripts/fullcalendar.js"></script>
14. <script src="~/Scripts/gcal.js"></script>
15. 
16. <script src="~/Scripts/myscript.js"></script>
17. 
18. <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.3.2/ui-bootstrap-tpls.min.js"></script>
19. @* HTML *@
20. <div ng-app="myapp" ng-controller="CalenderController">
21. 
22. <script type="text/ng-template" id="modalContent.html">
23. <div class="modal-header">
24. <h3 class="modal-title">Events</h3>
25. </div>
26. <div class="modal-body">
27. <div style="color:red">{{Message}}</div>
28. <div class="form-group">
29. <label>Event Title : </label>
30. <input type="text" ng-model="NewEvent.Title" autofocus class="form-control" />
31. </div>
32. <div class="form-group">
33. <label>Description : </label>
34. <input type="text" ng-model="NewEvent.Description" class="form-control" />
35. </div>
36. <div class="form-group">
37. <label>Time Slot : </label>
38. <span>{{NewEvent.StartAt}} - {{NewEvent.EndAt}}</span>
39. </div>
40. </div>
41. <div class="modal-footer">
42. <button class="btn btn-primary" type="button" ng-click="ok()">Save</button>
43. <button class="btn btn-danger" type="button" ng-show="NewEvent.EventID > 0" ng-click="delete()">Delete</button>
44. <button class="btn btn-warning" type="button" ng-click="cancel()">Cancel</button>
46. </div>
47. 
48. </script>
49. <div class="row">
50. <div class="col-md-12">
51. 
52. <div id="calendar" ui-calendar="uiConfig.calendar" ng-model="eventSources" calendar="myCalendar"></div>
53. </div>
54. </div>
55. </div>
I am using Bootstrap Angular UI Modal popup to Create, Edit, and Delete the events created in the UI calendar.

Add Script for Calendar Functionality

Right click on Scripts folder --> Add --> JavaScript file.
Add below script code for UI calendar display and CRUD operations.
1. //ui.calendar --> for caledar control
2. //ui.bootstrap --> for bootstrap angualr UI modal popup
3. var app = angular.module('myapp', ['ui.calendar', 'ui.bootstrap']);
4. app.controller('CalenderController', ['$scope', '$http', 'uiCalendarConfig', '$uibModal', function ($scope, $http, uiCalendarConfig, $uibModal) {
5. $scope.SelectedEvent = null;
6. var isFirstTime = true;
7. $scope.events = [];
8. $scope.eventSources = [$scope.events];
10. $scope.NewEvent = {};
11. //this function for get datetime from json date
12. function getDate(datetime) {
13. if (datetime != null) {
14. var mili = datetime.replace(/\/Date$(-?\d+)$\//, '$1');
15. return new Date(parseInt(mili));
16. }
17. else {
18. return "";
19. }
20. }
21. // this function clears clender enents
22. function clearCalendar() {
23. if (uiCalendarConfig.calendars.myCalendar != null) {
24. uiCalendarConfig.calendars.myCalendar.fullCalendar('removeEvents');
25. uiCalendarConfig.calendars.myCalendar.fullCalendar('unselect');
26. }
27. }
28. //Load events from server to display on caledar
29. function populate() {
30. clearCalendar();
31. $http.get('/home/getevents', {
32. cache: false,
33. params: {}
34. }).then(function (data) {
35. $scope.events.slice(0, $scope.events.length);
36. angular.forEach(data.data, function (value) {
37. $scope.events.push({
38. id : value.EventID,
39. title: value.Title,
40. description: value.Description,
41. start: new Date(parseInt(value.StartAt.substr(6))),
42. end: new Date(parseInt(value.EndAt.substr(6))),
43. allDay: value.IsFullDay,
44. stick: true
45. });
46. });
47. });
48. }
49. populate();
50. //UI- calendar configuration
51. $scope.uiConfig = {
52. calendar: {
53. height: 450,
54. editable: true,
55. displayEventTime: true,
56. header: {
57. left: 'month,agendaWeek,agendaDay',
58. center: 'title',
59. right:'today prev,next'
60. },
61. timeFormat : {
62. month : ' ', // for hide on month view
63. agenda: 'h:mm t'
64. },
65. selectable: true,
66. selectHelper: true,
67. select : function(start, end){
68. var fromDate = moment(start).format('YYYY/MM/DD LT');
69. var endDate = moment(end).format('YYYY/MM/DD LT');
70. $scope.NewEvent = {
71. EventID : 0,
72. StartAt : fromDate,
73. EndAt : endDate,
74. IsFullDay :false,
75. Title : '',
76. Description : ''
77. }
79. $scope.ShowModal();
80. },
81. eventClick: function (event) {
82. $scope.SelectedEvent = event;
83. var fromDate = moment(event.start).format('YYYY/MM/DD LT');
84. var endDate = moment(event.end).format('YYYY/MM/DD LT');
85. $scope.NewEvent = {
86. EventID : event.id,
87. StartAt : fromDate,
88. EndAt : endDate,
89. IsFullDay :false,
90. Title : event.title,
91. Description : event.description
92. }
94. $scope.ShowModal();
95. },
96. eventAfterAllRender: function () {
97. if ($scope.events.length > 0 && isFirstTime) {
98. uiCalendarConfig.calendars.myCalendar.fullCalendar('gotoDate', $scope.events[0].start);
99. isFirstTime = false;
100. }
101. }
102. }
103. };
105. //This function shows bootstrap modal dialog
106. $scope.ShowModal = function () {
107. $scope.option = {
108. templateUrl: 'modalContent.html',
109. controller: 'modalController',
110. backdrop: 'static',
111. resolve: {
112. NewEvent: function () {
113. return $scope.NewEvent;
114. }
115. }
116. };
117. //CRUD operations on Calendar starts here
118. var modal = $uibModal.open($scope.option);
119. modal.result.then(function (data) {
120. $scope.NewEvent = data.event;
121. switch (data.operation) {
122. case 'Save': //save
123. $http({
124. method: 'POST',
125. url: '/home/SaveEvent',
126. data : $scope.NewEvent
127. }).then(function (response) {
128. if (response.data.status) {
129. populate();
130. }
131. })
132. break;
133. case 'Delete': //delete
134. $http({
135. method: 'POST',
136. url: '/home/DeleteEvent',
137. data: {'eventID' : $scope.NewEvent.EventID }
138. }).then(function (response) {
139. if (response.data.status) {
140. populate();
141. }
142. })
143. break;
144. default:
145. break;
146. }
147. }, function () {
148. console.log('Modal dialog closed');
149. })
150. }
151. }])
In the above code, I used $http service to connect to the Server(for save, edit, and delete operations).
Add the following code to display the Bootstrap Angular UI Modal popup.
1. // create a new controller for Bootstrap Angualr modal popup
2. app.controller('modalController', ['$scope', '$uibModalInstance', 'NewEvent', function ($scope, $uibModalInstance,NewEvent) {
3. $scope.NewEvent = NewEvent;
4. $scope.Message = "";
5. $scope.ok = function () {
6. if ($scope.NewEvent.Title.trim() != "") {
7. $uibModalInstance.close({event : $scope.NewEvent, operation: 'Save'});
8. }
9. else {
10. $scope.Message = "Event title required!";
11. }
12. }
13. $scope.delete = function () {
14. $uibModalInstance.close({ event: $scope.NewEvent, operation: 'Delete' });
15. }
16. $scope.cancel = function () {
17. $uibModalInstance.dismiss('cancel');
18. }
19. }])
Finally, run the application and see the output in the browser.
To create a new event, click on any Date. Then, you get a popup like the image shown below.
To perform EDIT and DELETE operations, click on any event.

Conclusion

I hope this article was helpful for many readers. If you recommend any suggestions, I always welcome it. You can follow me on social networks, also, for daily updates.

5 Comments

Join the conversation! Your thoughts help the community grow.

Cabinet Dentist9y ago
Mine doesn't refresh calendar after update (add, edit or delete). I have the data in database, it shows when I refresh it with F5. Can you please help me out?
Ravi Kandel10y ago
Awesome
Anu V10y ago
Nice
kalu singh rao10y ago
Good one
Vignesh Mani10y ago
Nice