Jquery Full Calender Integrated With ASP.NET

In this article I am trying to explain how to integrate a FullCalender with ASP.NET.

 
Step 1: First we will download the sample code from the FullCalender URL. 

Step 2: Now will try to integrate it into an ASP.NET Application. We'll create a new WebApplication. In that web application we will add FullCalender.js and require CSS files in proper folders. 

Step 3:  Now we will add the following files to the Master Page:
 

<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script> <script src="Scripts/fullcalendar.js" type="text/javascript"></script> <link href="Styles/fullcalendar.css" rel="stylesheet" type="text/css" /> <link href="Styles/Site.css" rel="stylesheet" type="text/css" />

Step 4:  Now we will add a Div tag inside the Default.aspx page:
 

<div id="fullcal"> </div>

Step 5: Now we will add a jQuery function to call events:
 

<script type="text/javascript"> $(document).ready(function () { $.ajax({ type: "POST", contentType: "application/json", | data: "{}", url: "Default.aspx/GetEvents", dataType: "json", success: function (data) { $('div[id*=fullcal]').fullCalendar({ header: { left: 'prev,next today', center: 'title', right: 'month,agendaWeek,agendaDay' }, editable: true, events: $.map(data.d, function (item, i)  { var event = new Object(); event.id = item.EventID; event.start = new Date(item.StartDate); event.end = new Date(item.EndDate); event.title = item.EventName; event.url = item.Url; event.ImageType = item.ImageType; return event; }),  eventRender: function (event, eventElement)  { if (event.ImageType)  { if (eventElement.find('span.fc-event-time').length)  { eventElement.find('span.fc-event-time').before($(GetImage(event.ImageType))); }  else { eventElement.find('span.fc-event-title').before($(GetImage(event.ImageType))); } } }, loading: function (bool)  { if (bool) $('#loading').show(); else $('#loading').hide();}}); }, error: function (XMLHttpRequest, textStatus, errorThrown)  {debugger;}});$('#loading').hide();$('div[id*=fullcal]').show(); }); function GetImage(type)  { if (type == 0) { return "<br/><img src = 'Styles/Images/attendance.png' style='width:24px;height:24px'/><br/>" } else if (type == 1) { return "<br/><img src = 'Styles/Images/not_available.png' style='width:24px;height:24px'/><br/>" } else return "<br/><img src = 'Styles/Images/not_available.png' style='width:24px;height:24px'/><br/>" } </script>

Here is the output of the Full Calendar. You will also see an image associated with the events:
 

 

Happy Coding.