Post
Ask Question

JavaScript Calendar Using Angular In ASP.NET

INTRODUCTION

 
In this article ,you will learn to use Javascript Calendar in your project
 
For more detail about Javascript Calendar Refer link => JavaScript Calendar
 
Let's start.
 
STEP 1
 
Open Visual Studio 2010 => Click New Project => Select ASP.NET Web Application => Fill all required details. 
 
Javascript Calendar using AngularJS in ASP.NET
 
Step 2
 
Delete all auto generated files and add below file
  1. AngularJS Folder
  2. CSS Folder
  3. HTML Folder
  4. JS Folder
  5. Plugin Folder 
  6. Dashboard.aspx
  7. DetailView.aspx 
Javascript Calendar using AngularJS in ASP.NET
 
Step 3
 
Download project and add
  • angular.js plugin and app.js in AngularJS Folder
  • main.css in CSS Folder
  • main.js in Plugin Folder
Step 4 
 
Replace auto generated Dashboard.htm code with the below code. 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml" data-ng-app="app">  
  3. <head>  
  4.     <title>Calendar Demo</title>  
  5.     <link href='../CSS/main.css' rel='stylesheet' />  
  6.     <script src='../Plugin/main.js'  type="text/javascript"></script>  
  7.     <script src="../AngularJS/angular.js" type="text/javascript"></script>  
  8.     <script src="../AngularJS/app.js" type="text/javascript"></script>  
  9.     <script src="../JS/DashboardCtrl.js" type="text/javascript"></script>  
  10.      
  11.     <style type="text/css">  
  12.         html, body  
  13.         {  
  14.             overflow: hidden; /* don't do scrollbars */  
  15.             font-family: Arial, Helvetica Neue, Helvetica, sans-serif;  
  16.             font-size: 12px;  
  17.         }  
  18.         #calendar-container  
  19.         {  
  20.             position: fixed;  
  21.             top: 0;  
  22.             left: 0;  
  23.             right: 0;  
  24.             bottom: 0;  
  25.         }  
  26.         .fc-header-toolbar  
  27.         {  
  28.             /* 
  29.     the calendar will be butting up against the edges, 
  30.     but let's scoot in the header's buttons 
  31.     */  
  32.             padding-top: 1em;  
  33.             padding-left: 1em;  
  34.             padding-right: 1em;  
  35.         }  
  36.     </style>  
  37. </head>  
  38. <body ng-controller="DashBoardCtrl">  
  39.     <div id="loader" style="display: none;">  
  40.     </div>  
  41.     <div id='calendar-container'>  
  42.         <div id='calendar'>  
  43.         </div>  
  44.     </div>  
  45. </body>  
  46. </html>  
Step 5 
 
Paste the below Script code in DashboardCtrl.js. 
 
Note
Here I am hardcoded Calendar data in js file , you can use Web Service / WCF Service / Web API. 
  1. var calendardata = [];  
  2.   
  3. var app = angular.module('app').controller('DashBoardCtrl', ['$scope', function ($scope) {  
  4.   
  5.     $scope.lstDashBoarddata = [  
  6.   {  
  7.       "CRITICALITY": "DONE",  
  8.       "CNT": "1",  
  9.       "DUEDATE": "2021-04-05"  
  10.   },  
  11.   {  
  12.       "CRITICALITY": "DONE",  
  13.       "CNT": "1",  
  14.       "DUEDATE": "2021-04-06"       
  15.   },  
  16.   {  
  17.       "CRITICALITY": "DONE",  
  18.       "CNT": "2",  
  19.       "DUEDATE": "2021-04-07"  
  20.   },  
  21.   {  
  22.       "CRITICALITY": "DONE",  
  23.       "CNT": "1",  
  24.       "DUEDATE": "2021-04-08"  
  25.   },  
  26.   {  
  27.       "CRITICALITY": "OVERDUE",  
  28.       "CNT": "2",  
  29.       "DUEDATE": "2021-04-05"  
  30.   },  
  31.   {  
  32.       "CRITICALITY": "OVERDUE",  
  33.       "CNT": "1",  
  34.       "DUEDATE": "2021-04-06"  
  35.   },  
  36.   {  
  37.       "CRITICALITY": "OVERDUE",  
  38.       "CNT": "1",  
  39.       "DUEDATE": "2021-04-07"  
  40.   },  
  41.   {  
  42.       "CRITICALITY": "OVERDUE",  
  43.       "CNT": "1",  
  44.       "DUEDATE": "2021-04-08"  
  45.   },  
  46.   {  
  47.       "CRITICALITY": "PENDING",  
  48.       "CNT": "1",  
  49.       "DUEDATE": "2021-04-15"  
  50.   },  
  51.   {  
  52.       "CRITICALITY": "PENDING",  
  53.       "CNT": "2",  
  54.       "DUEDATE": "2021-04-16"  
  55.   }    
  56. ]  
  57.   
  58.   
  59.     calendardata = [];  
  60.   
  61.     $scope.GetDashboardList = function () {          
  62.   
  63.                 for (var i = 0; i < $scope.lstDashBoarddata.length; i++) {  
  64.                     if ($scope.lstDashBoarddata[i].CRITICALITY == "DONE") {  
  65.                         calendardata.push({ "title": $scope.lstDashBoarddata[i].CRITICALITY + '(' + $scope.lstDashBoarddata[i].CNT + ')', "start": $scope.lstDashBoarddata[i].DUEDATE, "url": "../DetailView.aspx?Date= " + $scope.lstDashBoarddata[i].DUEDATE + "&Criticality=DONE", color: 'green' });  
  66.                     }                    
  67.                     if ($scope.lstDashBoarddata[i].CRITICALITY == "OVERDUE") {  
  68.                         calendardata.push({ "title": $scope.lstDashBoarddata[i].CRITICALITY + '(' + $scope.lstDashBoarddata[i].CNT + ')', "start": $scope.lstDashBoarddata[i].DUEDATE, "url": "../DetailView.aspx?Date= " + $scope.lstDashBoarddata[i].DUEDATE + "&Criticality=OVERDUE", color: 'red' });  
  69.                     }  
  70.                     if ($scope.lstDashBoarddata[i].CRITICALITY == "PENDING") {  
  71.                         calendardata.push({ "title": $scope.lstDashBoarddata[i].CRITICALITY + '(' + $scope.lstDashBoarddata[i].CNT + ')', "start": $scope.lstDashBoarddata[i].DUEDATE, "url": "../DetailView.aspx?Date= " + $scope.lstDashBoarddata[i].DUEDATE + "&Criticality=PENDING", color: 'orange' });  
  72.                     }  
  73.                 }  
  74.   
  75.                 var calendarEl = document.getElementById('calendar');  
  76.   
  77.                 var todaydate = new Date();  
  78.   
  79.                 var calendar = new FullCalendar.Calendar(calendarEl, {  
  80.                     height: '100%',  
  81.                     expandRows: true,  
  82.                     initialView: 'dayGridMonth',  
  83.                     initialDate: todaydate,  
  84.                     editable: true,  
  85.                     selectable: true,  
  86.                     businessHours: true,  
  87.                     dayMaxEvents: true, // allow "more" link when too many events  
  88.   
  89.                     events: calendardata  
  90.   
  91.                 });  
  92.   
  93.                 calendar.render();                
  94.     }  
  95.   
  96.     $scope.GetDashboardList();  
  97.   
  98. } ]);  
Step 6
 
Paste the below Html code in Dashboard.aspx under the body tag.
  1. <form id="form1" runat="server">  
  2.  <div>  
  3.     <iframe src ="HTML/Dashboard.htm" height = "550px" width = "100%"></iframe>  
  4.  </div>  
  5. </form>    
Step 7
 
Paste the below Html code in DetailView.aspx under the body tag.
  1. <form id="form1" runat="server">  
  2.     <div>  
  3.     <asp:GridView ID="gvdetailview" runat="server" BackColor="#DEBA84"   
  4.             BorderColor="#DEBA84" BorderStyle="None" BorderWidth="1px" CellPadding="3"   
  5.             CellSpacing="2">  
  6.         <FooterStyle BackColor="#F7DFB5" ForeColor="#8C4510" />  
  7.         <HeaderStyle BackColor="#A55129" Font-Bold="True" ForeColor="White" />  
  8.         <PagerStyle ForeColor="#8C4510" HorizontalAlign="Center" />  
  9.         <RowStyle BackColor="#FFF7E7" ForeColor="#8C4510" />  
  10.         <SelectedRowStyle BackColor="#738A9C" Font-Bold="True" ForeColor="White" />  
  11.         <SortedAscendingCellStyle BackColor="#FFF1D4" />  
  12.         <SortedAscendingHeaderStyle BackColor="#B95C30" />  
  13.         <SortedDescendingCellStyle BackColor="#F1E5CE" />  
  14.         <SortedDescendingHeaderStyle BackColor="#93451F" />  
  15.     </asp:GridView>  
  16.     </div>  
  17.     </form>  
Step 8
 
Replace auto generated DetailView.aspx.cs class code with the below code.
 
Note
Here I am hardcoded DetailView data in class file , you can use Database. 
  1. public partial class DetailView : System.Web.UI.Page  
  2.     {  
  3.         protected void Page_Load(object sender, EventArgs e)  
  4.         {  
  5.             if (!IsPostBack)  
  6.             {  
  7.                 string date = Request.QueryString["Date"];  
  8.                 string criticality = Request.QueryString["Criticality"];  
  9.   
  10.                 GetDetailData(date, criticality);  
  11.             }  
  12.   
  13.         }  
  14.   
  15.         public void GetDetailData(string date,string criticality)  
  16.         {  
  17.             DataTable dtDetails = new DataTable();  
  18.   
  19.             dtDetails.Columns.Add("TASKNAME", typeof(String));  
  20.             dtDetails.Columns.Add("DUEDATE", typeof(DateTime));  
  21.             dtDetails.Columns.Add("CRITICALITY", typeof(String));  
  22.             dtDetails.Columns.Add("STATUS", typeof(String));  
  23.   
  24.             DataRow dr = dtDetails.NewRow();  
  25.             dr["TASKNAME"] = "TASK 1";  
  26.             dr["DUEDATE"] = "2021-04-05";  
  27.             dr["CRITICALITY"] = "DONE";  
  28.             dr["STATUS"] = "Completed";  
  29.   
  30.             DataRow dr1 = dtDetails.NewRow();  
  31.             dr1["TASKNAME"] = "TASK 2";  
  32.             dr1["DUEDATE"] = "2021-04-06";  
  33.             dr1["CRITICALITY"] = "DONE";  
  34.             dr1["STATUS"] = "Cmpleted";  
  35.   
  36.             DataRow dr2 = dtDetails.NewRow();  
  37.             dr2["TASKNAME"] = "TASK 3";  
  38.             dr2["DUEDATE"] = "2021-04-07";  
  39.             dr2["CRITICALITY"] = "DONE";  
  40.             dr2["STATUS"] = "Completed";  
  41.   
  42.             DataRow dr3 = dtDetails.NewRow();  
  43.             dr3["TASKNAME"] = "Task 4";  
  44.             dr3["DUEDATE"] = "2021-04-07";  
  45.             dr3["CRITICALITY"] = "DONE";  
  46.             dr3["STATUS"] = "Completed";  
  47.   
  48.             DataRow dr4 = dtDetails.NewRow();  
  49.             dr4["TASKNAME"] = "Task 5";  
  50.             dr4["DUEDATE"] = "2021-04-08";  
  51.             dr4["CRITICALITY"] = "DONE";  
  52.             dr4["STATUS"] = "Completed";  
  53.   
  54.             DataRow dr5 = dtDetails.NewRow();  
  55.             dr5["TASKNAME"] = "Task 6";  
  56.             dr5["DUEDATE"] = "2021-04-05";  
  57.             dr5["CRITICALITY"] = "OVERDUE";  
  58.             dr5["STATUS"] = "Pending with EmployeeID #1";  
  59.   
  60.             DataRow dr6 = dtDetails.NewRow();  
  61.             dr6["TASKNAME"] = "Task 7";  
  62.             dr6["DUEDATE"] = "2021-04-05";  
  63.             dr6["CRITICALITY"] = "OVERDUE";  
  64.             dr6["STATUS"] = "Pending with EmployeeID #2";  
  65.   
  66.             DataRow dr7 = dtDetails.NewRow();  
  67.             dr7["TASKNAME"] = "Task 8";  
  68.             dr7["DUEDATE"] = "2021-04-06";  
  69.             dr7["CRITICALITY"] = "OVERDUE";  
  70.             dr7["STATUS"] = "Pending with EmployeeID #3";  
  71.   
  72.             DataRow dr8 = dtDetails.NewRow();  
  73.             dr8["TASKNAME"] = "Task 9";  
  74.             dr8["DUEDATE"] = "2021-04-07";  
  75.             dr8["CRITICALITY"] = "OVERDUE";  
  76.             dr8["STATUS"] = "Pending with EmployeeID #4";  
  77.   
  78.             DataRow dr9 = dtDetails.NewRow();  
  79.             dr9["TASKNAME"] = "Task 10";  
  80.             dr9["DUEDATE"] = "2021-04-08";  
  81.             dr9["CRITICALITY"] = "OVERDUE";  
  82.             dr9["STATUS"] = "Pending with EmployeeID #5";  
  83.   
  84.             DataRow dr10 = dtDetails.NewRow();  
  85.             dr10["TASKNAME"] = "Task 11";  
  86.             dr10["DUEDATE"] = "2021-04-15";  
  87.             dr10["CRITICALITY"] = "PENDING";  
  88.             dr10["STATUS"] = "Pending with EmployeeID #6";  
  89.   
  90.             DataRow dr11 = dtDetails.NewRow();  
  91.             dr11["TASKNAME"] = "Task 12";  
  92.             dr11["DUEDATE"] = "2021-04-16";  
  93.             dr11["CRITICALITY"] = "PENDING";  
  94.             dr11["STATUS"] = "Pending with EmployeeID #7";  
  95.   
  96.             DataRow dr12 = dtDetails.NewRow();  
  97.             dr12["TASKNAME"] = "Task 13";  
  98.             dr12["DUEDATE"] = "2021-04-16";  
  99.             dr12["CRITICALITY"] = "PENDING";  
  100.             dr12["STATUS"] = "Pending with EmployeeID #8";  
  101.   
  102.             dtDetails.Rows.Add(dr);  
  103.             dtDetails.Rows.Add(dr1);  
  104.             dtDetails.Rows.Add(dr2);  
  105.             dtDetails.Rows.Add(dr3);  
  106.             dtDetails.Rows.Add(dr4);  
  107.             dtDetails.Rows.Add(dr5);  
  108.             dtDetails.Rows.Add(dr6);  
  109.             dtDetails.Rows.Add(dr7);  
  110.             dtDetails.Rows.Add(dr8);  
  111.             dtDetails.Rows.Add(dr9);  
  112.             dtDetails.Rows.Add(dr10);  
  113.             dtDetails.Rows.Add(dr11);  
  114.             dtDetails.Rows.Add(dr12);  
  115.   
  116.             DataTable finaldt = new DataTable();  
  117.   
  118.             finaldt.Columns.Add("TASKNAME", typeof(String));  
  119.             finaldt.Columns.Add("DUEDATE", typeof(String));  
  120.             finaldt.Columns.Add("CRITICALITY", typeof(String));  
  121.             finaldt.Columns.Add("STATUS", typeof(String));  
  122.   
  123.             DataRow[] drfinalrow = dtDetails.Select("DUEDATE = '" + date + "' AND CRITICALITY = '" + criticality + "'");  
  124.   
  125.             DataRow NewRow;  
  126.   
  127.             foreach (DataRow row in drfinalrow)  
  128.             {  
  129.                 NewRow = finaldt.NewRow();  
  130.                 NewRow["TASKNAME"] = row["TASKNAME"];  
  131.                 NewRow["DUEDATE"] = Convert.ToDateTime(row["DUEDATE"]).ToString("dd-MM-yyyy");  
  132.                 NewRow["CRITICALITY"] = row["CRITICALITY"];  
  133.                 NewRow["STATUS"] = row["STATUS"];                
  134.                 finaldt.Rows.Add(NewRow);  
  135.             }  
  136.   
  137.             gvdetailview.DataSource = finaldt;  
  138.             gvdetailview.DataBind();  
  139.   
  140.         }  
  141.   
  142.     }  
Step 9
 
Run Application you can see calendar view displayed based on date 
 
Javascript Calendar using AngularJS in ASP.NET
 
Step 10 
 
Click any category (DONE / OVERDUE / PENDING) 
 
I am clicked 07-04-2021 DONE category
 
Javascript Calendar using AngularJS in ASP.NET
 
Click on any Overdue category
 
Javascript Calendar using AngularJS in ASP.NET
 
Click on Pending category 
 
Javascript Calendar using AngularJS in ASP.NET
 
Javascript Calendar using AngularJS in ASP.NET
 
I hope this helps.
 
Thank you.


Similar Articles