Introduction

This article explains how to create a weekly availibility calender in an ASP.NET MVc application using fullcalender.js. Full calender is great for displaying event.user time slots which are easily managed by this. Users can create a new event and asign it to the calender so that he/she can manage their routing shedule.
Generally, routing calender can be used in things like hospital management applications where managing schedules is complicated.
So here we will see how to manage that schedule in an Asp.Net MVc Application.
Step 1
Create full availibility calender. Embed the following into your project:
https://adminlte.io/themes/dev/AdminLTE/pages/calendar.html
  • fullcalendar
  • fullcalendar-daygrid
  • fullcalendar-timegrid
  • fullcalendar-interaction
  • fullcalendar-bootstrap
moment.js is just used for displaying proper datetime formate in js.
Full Calender integration in mvc
Step 2
Create AvailibilityDto.cs used for getting available time slots list.
  1. public class AvailibilityDto
  2. {
  3. public int Id { get; set; }
  4. public string Title { get; set; }
  5. public string Desc { get; set; }
  6. public string Start_Date { get; set; }
  7. public string End_Date { get; set; }
  8. }
Step 3
Create CalanderController.cs for getting time slots list and return it to json.
  1. using MVCAdminLTE3.Models;
  2. using System;
  3. using System.Collections.Generic;
  4. using System.Linq;
  5. using System.Web;
  6. using System.Web.Mvc;
  8. namespace MVCAdminLTE3.Areas.Admin.Controllers
  9. {
  10. public class CalanderController : Controller
  11. {
  12. // GET: Admin/Calander
  13. public ActionResult Index()
  14. {
  15. return View();
  16. }
  18. public ActionResult GetCalendarData()
  19. {
  21. List<AvailibilityDto> data = new List<AvailibilityDto>();
  23. //Statically create list and add data
  24. AvailibilityDto infoObj1 = new AvailibilityDto();
  25. infoObj1.Id = 1;
  26. infoObj1.Title = "I am available";
  27. infoObj1.Desc = "Description 1";
  28. infoObj1.Start_Date = "2020-08-16 22:37:22.467";
  29. infoObj1.End_Date = "2020-08-16 23:30:22.467";
  30. data.Add(infoObj1);
  32. AvailibilityDto infoObj2 = new AvailibilityDto();
  33. infoObj2.Id = 2;
  34. infoObj2.Title = "Available";
  35. infoObj2.Desc = "Description 1";
  36. infoObj2.Start_Date = "2020-08-17 10:00:22.467";
  37. infoObj2.End_Date = "2020-08-17 11:00:22.467";
  38. data.Add(infoObj2);
  41. AvailibilityDto infoObj3 = new AvailibilityDto();
  42. infoObj3.Id = 3;
  43. infoObj3.Title = "Meeting";
  44. infoObj3.Desc = "Description 1";
  45. infoObj3.Start_Date = "2020-08-18 07:30:22.467";
  46. infoObj3.End_Date = "2020-08-18 08:00:22.467";
  47. data.Add(infoObj3);
  49. return Json(data, JsonRequestBehavior.AllowGet);
  51. }
  54. [HttpPost]
  55. public ActionResult UpdateCalanderData(AvailibilityDto model)
  56. {
  57. var id = model.Id;
  58. //Write your update code here
  59. return Json(id, JsonRequestBehavior.AllowGet);
  60. }
  62. }
  63. }
Step 4
Create mycalander.js
  1. $(function () {
  3. /* initialize the external events
  4. -----------------------------------------------------------------*/
  5. function ini_events(ele) {
  6. ele.each(function () {
  8. // create an Event Object (http://arshaw.com/fullcalendar/docs/event_data/Event_Object/)
  9. // it doesn't need to have a start or end
  10. var eventObject = {
  11. title: $.trim($(this).text()) // use the element's text as the event title
  12. }
  14. // store the Event Object in the DOM element so we can get to it later
  15. $(this).data('eventObject', eventObject)
  17. // make the event draggable using jQuery UI
  18. $(this).draggable({
  19. zIndex: 1070,
  20. revert: true, // will cause the event to go back to its
  21. revertDuration: 0 // original position after the drag
  22. })
  24. })
  25. }
  27. ini_events($('#external-events div.external-event'))
  29. /* initialize the calendar
  30. -----------------------------------------------------------------*/
  31. //Date for the calendar events (dummy data)
  32. var date = new Date()
  33. var d = date.getDate(),
  34. m = date.getMonth(),
  35. y = date.getFullYear()
  37. var Calendar = FullCalendar.Calendar;
  38. var Draggable = FullCalendarInteraction.Draggable;
  40. var containerEl = document.getElementById('external-events');
  41. var checkbox = document.getElementById('drop-remove');
  42. var calendarEl = document.getElementById('calendar');
  44. // initialize the external events
  45. // -----------------------------------------------------------------
  47. new Draggable(containerEl, {
  48. itemSelector: '.external-event',
  49. eventData: function (eventEl) {
  50. console.log(eventEl);
  51. return {
  52. title: eventEl.innerText,
  53. backgroundColor: window.getComputedStyle(eventEl, null).getPropertyValue('background-color'),
  54. borderColor: window.getComputedStyle(eventEl, null).getPropertyValue('background-color'),
  55. textColor: window.getComputedStyle(eventEl, null).getPropertyValue('color'),
  56. };
  57. }
  58. });
  60. GetData();
  62. function GenerateCalander(events) {
  63. var calendar = new Calendar(calendarEl, {
  65. //Plugins for full canlender
  67. //plugins: ['bootstrap', 'interaction', 'dayGrid', 'timeGrid'],
  68. //initialView: 'timeGridWeek',
  70. plugins: ['bootstrap', 'interaction', 'timeGrid'],
  71. initialView: 'timeGridWeek',
  73. //select your timeZone as u wish to select
  74. timeZone: 'UTC',
  76. //Slot duration fix to 30 minutes now .......you can chage any slot duration from here.
  77. slotDuration: '00:30:00',
  78. slotLabelInterval: 30,
  79. slotMinutes: 30,
  80. snapDuration: '01:00:00',
  82. header: {
  83. left: 'prev,next today',
  84. center: 'title',
  85. //right: 'dayGridMonth,timeGridWeek,timeGridDay'
  86. right: 'timeGridWeek'
  87. },
  89. //Random default events
  90. events: events
  91. ,
  93. editable: true,
  94. droppable: true, // this allows things to be dropped onto the calendar !!!
  95. drop: function (info) {
  96. // is the "remove after drop" checkbox checked?
  97. if (checkbox.checked) {
  98. // if so, remove the element from the "Draggable Events" list
  99. info.draggedEl.parentNode.removeChild(info.draggedEl);
  100. }
  101. },
  102. nextDayThreshold: "00:00:00",
  103. nowIndicator: true,
  104. eventDrop: function (data) {
  105. UpdateEventDetails(data.event.id, data.event.start, data.event.end);
  106. },
  107. eventResize: function (data) {
  108. //console.log(data.event.id)
  109. //update your event here
  110. UpdateEventDetails(data.event.id, data.event.start, data.event.end);
  111. },
  112. eventClick: function (calEvent, jsEvent, view) {
  113. //Work on click event like delete and view details
  114. alert('Click Event Called')
  115. },
  116. selectHelper: true,
  117. select: function (start, end, jsEvent, view) {
  118. //called when an event is selected
  119. alert('Select Event Called')
  120. },
  122. });
  124. calendar.render();
  125. }
  128. /* ADDING EVENTS */
  129. var currColor = '#3c8dbc' //Red by default
  130. //Color chooser button
  131. var colorChooser = $('#color-chooser-btn')
  132. $('#color-chooser > li > a').click(function (e) {
  133. e.preventDefault()
  134. //Save color
  135. currColor = $(this).css('color')
  136. //Add color effect to button
  137. $('#add-new-event').css({
  138. 'background-color': currColor,
  139. 'border-color': currColor
  140. })
  141. })
  142. $('#add-new-event').click(function (e) {
  143. e.preventDefault()
  144. //Get value and make sure it is not null
  145. var val = $('#new-event').val()
  146. if (val.length == 0) {
  147. return
  148. }
  150. //Create events
  151. var event = $('<div />')
  152. event.css({
  153. 'background-color': currColor,
  154. 'border-color': currColor,
  155. 'color': '#fff'
  156. }).addClass('external-event')
  157. event.html(val)
  158. $('#external-events').prepend(event)
  160. //Add draggable funtionality
  161. ini_events(event)
  163. //Remove event from text input
  164. $('#new-event').val('')
  165. })
  170. function GetData() {
  171. var events = [];
  172. $.ajax({
  173. url: 'http://localhost:3617/admin/Calander/GetCalendarData',
  174. type: "GET",
  175. dataType: "JSON",
  176. success: function (result) {
  177. $.each(result, function (i, data) {
  178. events.push(
  179. {
  180. title: data.Title,
  181. description: data.Desc,
  182. start: moment(data.Start_Date).format('YYYY-MM-DD HH:mm:ss'),
  183. end: moment(data.End_Date).format('YYYY-MM-DD HH:mm:ss'),
  184. backgroundColor: '#00a65a', //Success (green)
  185. borderColor: '#00a65a', //Success (green)
  186. id: data.Id,
  187. allDay: false,
  188. });
  189. });
  190. GenerateCalander(events);
  192. }
  193. })
  197. }
  199. function UpdateEventDetails(eventId, StartDate, EndDate) {
  200. debugger
  201. var object = new Object();
  202. object.Id = parseInt(eventId);
  203. object.Start_Date = StartDate;
  204. object.End_Date = EndDate;
  206. $.ajax({
  207. url: 'http://localhost:3617/admin/Calander/UpdateCalanderData',
  208. type: "POST",
  209. dataType: "JSON",
  210. data: object,
  211. success: function (result) {
  212. debugger;
  213. alert("updated successfully-Id:" + result)
  215. }
  217. });
  219. }
  222. });
Step 5
index.cshtml page
  1. @{
  2. ViewBag.Title = "Index";
  3. Layout = "~/Areas/Admin/Views/Shared/_Layout.cshtml";
  4. }
  7. <link href="~/Areas/Admin/CalanderCssJs/fullcalendar/main.min.css" rel="stylesheet" />
  8. <link href="~/Areas/Admin/CalanderCssJs/fullcalendar-daygrid/main.min.css" rel="stylesheet" />
  9. <link href="~/Areas/Admin/CalanderCssJs/fullcalendar-timegrid/main.min.css" rel="stylesheet" />
  10. <link href="~/Areas/Admin/CalanderCssJs/fullcalendar-bootstrap/main.min.css" rel="stylesheet" />
  13. <!-- Main content -->
  14. <section class="content">
  15. <div class="container-fluid">
  16. <div class="row">
  17. <div class="col-md-3">
  18. <div class="sticky-top mb-3">
  19. <div class="card">
  20. <div class="card-header">
  21. <h4 class="card-title">Draggable Events</h4>
  22. </div>
  23. <div class="card-body">
  24. <!-- the events -->
  25. <div id="external-events">
  26. <div class="external-event bg-success">Lunch</div>
  27. <div class="external-event bg-warning">Go home</div>
  28. <div class="external-event bg-info">Do homework</div>
  29. <div class="external-event bg-primary">Work on UI design</div>
  30. <div class="external-event bg-danger">Sleep tight</div>
  31. <div class="checkbox">
  32. <label for="drop-remove">
  33. <input type="checkbox" id="drop-remove">
  34. remove after drop
  35. </label>
  36. </div>
  37. </div>
  38. </div>
  39. <!-- /.card-body -->
  40. </div>
  41. <!-- /.card -->
  42. <div class="card">
  43. <div class="card-header">
  44. <h3 class="card-title">Create Event</h3>
  45. </div>
  46. <div class="card-body">
  47. <div class="btn-group" style="width: 100%; margin-bottom: 10px;">
  48. <!--<button type="button" id="color-chooser-btn" class="btn btn-info btn-block dropdown-toggle" data-toggle="dropdown">Color <span class="caret"></span></button>-->
  49. <ul class="fc-color-picker" id="color-chooser">
  50. <li><a class="text-primary" href="#"><i class="fas fa-square"></i></a></li>
  51. <li><a class="text-warning" href="#"><i class="fas fa-square"></i></a></li>
  52. <li><a class="text-success" href="#"><i class="fas fa-square"></i></a></li>
  53. <li><a class="text-danger" href="#"><i class="fas fa-square"></i></a></li>
  54. <li><a class="text-muted" href="#"><i class="fas fa-square"></i></a></li>
  55. </ul>
  56. </div>
  57. <!-- /btn-group -->
  58. <div class="input-group">
  59. <input id="new-event" type="text" class="form-control" placeholder="Event Title">
  60. <div class="input-group-append">
  61. <button id="add-new-event" type="button" class="btn btn-primary">Add</button>
  62. </div>
  63. <!-- /btn-group -->
  64. </div>
  65. <!-- /input-group -->
  66. </div>
  67. </div>
  68. </div>
  69. </div>
  70. <!-- /.col -->
  71. <div class="col-md-9">
  72. <div class="card card-primary">
  73. <div class="card-body p-0">
  74. <!-- THE CALENDAR -->
  75. <div id="calendar"></div>
  76. </div>
  77. <!-- /.card-body -->
  78. </div>
  79. <!-- /.card -->
  80. </div>
  81. <!-- /.col -->
  82. </div>
  83. <!-- /.row -->
  84. </div><!-- /.container-fluid -->
  85. </section>
  86. <!-- /.content -->
  90. @section scripts{
  93. <script src="~/Areas/Admin/CalanderCssJs/jquery-ui/jquery-ui.min.js"></script>
  94. <script src="~/Areas/Admin/CalanderCssJs/moment/moment.min.js"></script>
  95. <script src="~/Areas/Admin/CalanderCssJs/fullcalendar/main.min.js"></script>
  97. <script src="~/Areas/Admin/CalanderCssJs/fullcalendar-daygrid/main.min.js"></script>
  98. <script src="~/Areas/Admin/CalanderCssJs/fullcalendar-timegrid/main.min.js"></script>
  99. <script src="~/Areas/Admin/CalanderCssJs/fullcalendar-interaction/main.min.js"></script>
  100. <script src="~/Areas/Admin/CalanderCssJs/fullcalendar-bootstrap/main.min.js"></script>
  103. <!-- Page specific script -->
  105. <script src="~/Areas/Admin/CalanderCssJs/mycalander.js"></script>
  106. }
plugins: ['bootstrap', 'interaction', 'dayGrid', 'timeGrid'] for displaying full calender
Full Calender integration in mvc
Slot duration fix to 30 minutes now .......you can chage any slot duration from here.
Full Calender integration in mvc
Full Calender integration in mvc
Function for getting slot list,
  1. function GetData() {
  2. var events = [];
  3. $.ajax({
  4. url: 'http://localhost:3617/admin/Calander/GetCalendarData',
  5. type: "GET",
  6. dataType: "JSON",
  7. success: function (result) {
  8. $.each(result, function (i, data) {
  9. events.push(
  10. {
  11. title: data.Title,
  12. description: data.Desc,
  13. start: moment(data.Start_Date).format('YYYY-MM-DD HH:mm:ss'),
  14. end: moment(data.End_Date).format('YYYY-MM-DD HH:mm:ss'),
  15. backgroundColor: '#00a65a', //Success (green)
  16. borderColor: '#00a65a', //Success (green)
  17. id: data.Id,
  18. allDay: false,
  19. });
  20. });
  21. GenerateCalander(events);
  23. }
  24. })
  28. }
Full Calender integration in mvc
Output
So here we see that allocated timing slots are displayed in green color badges and some descriptions can be written there as we want them to be displayed.
Full Calender integration in mvc