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.