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:
 
Fullcalender.jpg
 

Happy Coding.