Post
Ask Question

ASP.NET MVC 5 - Full Calendar jQuery Plugin

A calendar is an important part of improving user visibility for the announced holidays or for meeting schedule display. Displaying the calendar on a full page makes the user visibility more interactive.

Today, I shall be demonstrating Full Calendar jQuery Plugin integration with ASP.NET MVC5. Full Calendar jQuery Plugin is simple to use and provides a variety of options for customization for a better user interactivity.



Prerequisites

Following are some prerequisites before you proceed further in this tutorial,

  1. Knowledge of ASP.NET MVC5.
  2. Knowledge of jQuery
  3. Knowledge of HTML.
  4. Knowledge of JavaScript.
  5. Knowledge of AJAX.
  6. Knowledge of CSS.
  7. Knowledge of Bootstrap.
  8. Knowledge of C# programming.
  9. Knowledge of C# LINQ.

You can download the complete source code of this tutorial or follow the step by step discussion below. The sample code is developed in Microsoft Visual Studio 2015 Enterprise. I am using 2017 public holidays for Pakistan as announced by the Pakistan Government.

Let's begin now.

Step 1

Create a new MVC5 web application project and name it as "MVC5FullCalandarPlugin".

Step 2

Open "Views\Shared\_Layout.cshtml" file and replace the code with the following.

  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</title>  
  7.     @Styles.Render("~/Content/css")  
  8.     @Scripts.Render("~/bundles/modernizr")  
  9.   
  10.     <!-- Font Awesome -->  
  11.     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" />  
  12.   
  13.     <!-- qTip -->  
  14.     <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/qtip2/3.0.3/jquery.qtip.min.css" />  
  15.   
  16.     <!-- Full Calendar -->  
  17.     <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.9.1/fullcalendar.min.css" />  
  18.     <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.9.1/fullcalendar.print.css" media="print" />  
  19.   
  20.     @* Custom *@  
  21.     @Styles.Render("~/Content/css/custom-style")  
  22. </head>  
  23. <body>  
  24.     <div class="navbar navbar-inverse navbar-fixed-top">  
  25.         <div class="container">  
  26.             <div class="navbar-header">  
  27.                 <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">  
  28.                     <span class="icon-bar"></span>  
  29.                     <span class="icon-bar"></span>  
  30.                     <span class="icon-bar"></span>  
  31.                 </button>  
  32.             </div>  
  33.         </div>  
  34.     </div>  
  35.     <div class="container body-content">  
  36.         @RenderBody()  
  37.         <hr />  
  38.         <footer>  
  39.             <center>  
  40.                 <p><strong>Copyright © @DateTime.Now.Year - <a href="http://www.asmak9.com/">Asma's Blog</a>.</strong> All rights reserved.</p>  
  41.             </center>  
  42.         </footer>  
  43.     </div>  
  44.   
  45.     @Scripts.Render("~/bundles/jquery")  
  46.     @Scripts.Render("~/bundles/bootstrap")  
  47.   
  48.     <!-- Include moment-->  
  49.     <script type="text/javascript" src="//cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>  
  50.   
  51.     <!-- qTip -->  
  52.     <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/qtip2/3.0.3/jquery.qtip.min.js"></script>  
  53.   
  54.     <!-- Full Calendar -->  
  55.     <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.9.1/fullcalendar.min.js"></script>  
  56.     @Scripts.Render("~/bundles/Script-calendar")  
  57.   
  58.     @RenderSection("scripts", required: false)  
  59. </body>  
  60. </html> 

In the above code, I have simply created a basic layout structure of this web project and I have also added a reference to the Full Calendar jQuery Plugin.

Step 3

Create a new "Models\HomeViewModels.cs" file and replace the code with the following.

  1. using System.Collections.Generic;  
  2. using System.ComponentModel.DataAnnotations;  
  3.   
  4. namespace MVC5FullCalandarPlugin.Models  
  5. {  
  6.     public class PublicHoliday  
  7.     {  
  8.         public int Sr { get; set; }  
  9.         public string Title { get; set; }  
  10.         public string Desc { get; set; }  
  11.         public string Start_Date { get; set; }  
  12.         public string End_Date { get; set; }  
  13.     }  
  14. } 

In the above code, I have simply created our View Model which will map the data from a text file into main memory as object.

Step 4

Now, create "Controllers\HomeController.cs" file and replace the code with the following.

  1. using MVC5FullCalandarPlugin.Models;  
  2. using System;  
  3. using System.Collections.Generic;  
  4. using System.IO;  
  5. using System.Linq;  
  6. using System.Reflection;  
  7. using System.Web;  
  8. using System.Web.Mvc;  
  9.   
  10. namespace MVC5FullCalandarPlugin.Controllers  
  11. {  
  12.     public class HomeController : Controller  
  13.     {  
  14.         #region Index method  
  15.   
  16.         /// <summary>  
  17.         /// GET: Home/Index method.  
  18.         /// </summary>  
  19.         /// <returns>Returns - index view page</returns>   
  20.         public ActionResult Index()  
  21.         {  
  22.             // Info.  
  23.             return this.View();  
  24.         }  
  25.  
  26.         #endregion  
  27.  
  28.         #region Get Calendar data method.  
  29.   
  30.         /// <summary>  
  31.         /// GET: /Home/GetCalendarData  
  32.         /// </summary>  
  33.         /// <returns>Return data</returns>  
  34.         public ActionResult GetCalendarData()  
  35.         {  
  36.             // Initialization.  
  37.             JsonResult result = new JsonResult();  
  38.   
  39.             try  
  40.             {  
  41.                 // Loading.  
  42.                 List<PublicHoliday> data = this.LoadData();  
  43.   
  44.                 // Processing.  
  45.                 result = this.Json(data, JsonRequestBehavior.AllowGet);  
  46.             }  
  47.             catch (Exception ex)  
  48.             {  
  49.                 // Info  
  50.                 Console.Write(ex);  
  51.             }  
  52.   
  53.             // Return info.  
  54.             return result;  
  55.         }  
  56.  
  57.         #endregion  
  58.  
  59.         #region Helpers  
  60.  
  61.         #region Load Data  
  62.   
  63.         /// <summary>  
  64.         /// Load data method.  
  65.         /// </summary>  
  66.         /// <returns>Returns - Data</returns>  
  67.         private List<PublicHoliday> LoadData()  
  68.         {  
  69.             // Initialization.  
  70.             List<PublicHoliday> lst = new List<PublicHoliday>();  
  71.   
  72.             try  
  73.             {  
  74.                 // Initialization.  
  75.                 string line = string.Empty;  
  76.                 string srcFilePath = "Content/files/PublicHoliday.txt";  
  77.                 var rootPath = Path.GetDirectoryName(Assembly.GetExecutingAssembly().CodeBase);  
  78.                 var fullPath = Path.Combine(rootPath, srcFilePath);  
  79.                 string filePath = new Uri(fullPath).LocalPath;  
  80.                 StreamReader sr = new StreamReader(new FileStream(filePath, FileMode.Open, FileAccess.Read));  
  81.   
  82.                 // Read file.  
  83.                 while ((line = sr.ReadLine()) != null)  
  84.                 {  
  85.                     // Initialization.  
  86.                     PublicHoliday infoObj = new PublicHoliday();  
  87.                     string[] info = line.Split(',');  
  88.   
  89.                     // Setting.  
  90.                     infoObj.Sr = Convert.ToInt32(info[0].ToString());  
  91.                     infoObj.Title = info[1].ToString();  
  92.                     infoObj.Desc = info[2].ToString();  
  93.                     infoObj.Start_Date = info[3].ToString();  
  94.                     infoObj.End_Date = info[4].ToString();  
  95.   
  96.                     // Adding.  
  97.                     lst.Add(infoObj);  
  98.                 }  
  99.   
  100.                 // Closing.  
  101.                 sr.Dispose();  
  102.                 sr.Close();  
  103.             }  
  104.             catch (Exception ex)  
  105.             {  
  106.                 // info.  
  107.                 Console.Write(ex);  
  108.             }  
  109.   
  110.             // info.  
  111.             return lst;  
  112.         }  
  113.  
  114.         #endregion  
  115.  
  116.         #endregion  
  117.     }  
  118. } 

In the above code, I have created a simple index() action method along with a helper method LoadData() for data loading from a text file and finally, the GetCalendarData() action method which will be called by Full Calendar jQuery Plugin via AJAX call method in order to map the data on the calendar.

Step 5

Create a new "Scripts\script-custom-calendar.js" script file and place the following code in it.

  1. $(document).ready(function ()  
  2. {  
  3.     $('#calendar').fullCalendar({  
  4.         header:  
  5.         {  
  6.             left: 'prev,next today',  
  7.             center: 'title',  
  8.             right: 'month,agendaWeek,agendaDay'  
  9.         },  
  10.         buttonText: {  
  11.             today: 'today',  
  12.             month: 'month',  
  13.             week: 'week',  
  14.             day: 'day'  
  15.         },  
  16.   
  17.         events: function (start, end, timezone, callback)  
  18.         {  
  19.             $.ajax({  
  20.                 url: '/Home/GetCalendarData',  
  21.                 type: "GET",  
  22.                 dataType: "JSON",  
  23.   
  24.                 success: function (result)  
  25.                 {  
  26.                     var events = [];  
  27.   
  28.                     $.each(result, function (i, data)  
  29.                     {  
  30.                         events.push(  
  31.                        {  
  32.                            title: data.Title,  
  33.                            description: data.Desc,  
  34.                            start: moment(data.Start_Date).format('YYYY-MM-DD'),  
  35.                            end: moment(data.End_Date).format('YYYY-MM-DD'),  
  36.                            backgroundColor: "#9501fc",  
  37.                            borderColor: "#fc0101"  
  38.                        });  
  39.                     });  
  40.   
  41.                     callback(events);  
  42.                 }  
  43.             });  
  44.         },  
  45.   
  46.         eventRender: function (event, element)  
  47.         {  
  48.             element.qtip(  
  49.             {  
  50.                 content: event.description  
  51.             });  
  52.         },  
  53.   
  54.         editable: false  
  55.     });  
  56. }); 

Let's break down the code chunk by chunk. Inside the fullCalendar(...) method, firstly, the header properties are being set, i.e., where will the calendar top buttons be aligned. Also, the alignment of the calendar title is being set along with the button text of the calendar header.

  1. header:  
  2. {  
  3.     left: 'prev,next today',  
  4.     center: 'title',  
  5.     right: 'month,agendaWeek,agendaDay'  
  6. },  
  7. buttonText: {  
  8.     today: 'today',  
  9.     month: 'month',  
  10.     week: 'week',  
  11.     day: 'day'  
  12. }, 

Then, I call the GetCalendarData() server-side method via AJAX call and after successfully receiving the data, I simply set the default calendar options. I set an extra property "description", which I will be using as the tooltip on the calendar when someone hovers the mouse over the displayed event. i.e.

  1. events: function (start, end, timezone, callback)  
  2.  {  
  3.      $.ajax({  
  4.          url: '/Home/GetCalendarData',  
  5.          type: "GET",  
  6.          dataType: "JSON",  
  7.   
  8.          success: function (result)  
  9.          {  
  10.              var events = [];  
  11.   
  12.              $.each(result, function (i, data)  
  13.              {  
  14.                  events.push(  
  15.                 {  
  16.                     title: data.Title,  
  17.                     description: data.Desc,  
  18.                     start: moment(data.Start_Date).format('YYYY-MM-DD'),  
  19.                     end: moment(data.End_Date).format('YYYY-MM-DD'),  
  20.                     backgroundColor: "#9501fc",  
  21.                     borderColor: "#fc0101"  
  22.                 });  
  23.              });  
  24.   
  25.              callback(events);  
  26.          }  
  27.      });  
  28.  }, 

Now, to render my tooltip description per calendar holiday event, I will be adding eventRender(...) property and inside that property, I will be calling qTip jQuery plugin in order to assign the tooltip description to each calendar holiday event.

  1. eventRender: function (event, element)  
  2. {  
  3.     element.qtip(  
  4.     {  
  5.         content: event.description  
  6.     });  
  7. }, 

Step 6

Create "Views\Home\_CalendarPartial.cshtml" & "Views\Home\Index.cshtml" files and place following code snippets respectively in those files.

Views\Home\_CalendarPartial.cshtml

  1. <div class="row">  
  2.     <div class="col-xs-9 col-xs-push-2">  
  3.         <div class="box box-primary">  
  4.             <div class="box-body no-padding">  
  5.                 <!-- THE CALENDAR -->  
  6.                 <div id="calendar"></div>  
  7.             </div><!-- /.box-body -->  
  8.         </div><!-- /. box -->  
  9.     </div><!-- /.col -->  
  10. </div> 

View\Home\Index.cshtml

  1. @{  
  2.     ViewBag.Title = "ASP.NET MVC5 - Full Calendar JQuery Plugin";  
  3. }  
  4.   
  5. <div class="row">  
  6.     <div class="panel-heading">  
  7.         <div class="col-md-8  custom-heading3">  
  8.             <h3>  
  9.                 <i class="fa fa-calendar"></i>  
  10.                 <span>ASP.NET MVC5 - Full Calendar JQuery Plugin</span>  
  11.             </h3>  
  12.         </div>  
  13.     </div>  
  14. </div>  
  15.   
  16. <div class="row">  
  17.     <section class="col-md-12 col-md-push-0">  
  18.         @Html.Partial("_CalendarPartial")  
  19.     </section>  
  20. </div> 

In the above code, I have simply created the View code for the page which will display the calendar. I have divided the page into two parts for better manageability.

Step 7

Execute the project and you will be able to see the following output.



 
Conclusion

In this article, you learned how to use Full Calendar jQuery Plugin basic settings and integrated the plugin into ASP.NET MVC 5 project. We learned how to pass the data to the front view through AJAX call and represent your data on a full page calendar.


Similar Articles