In my last event calendar we saw how to create a calendar using ASP.NET. In this article we will create an event calendar using a jQuery UI.
To create the attractive and light-weight event calendar using jQuery you first need to download the jQuery UI from jquery.com. To create the event calendar follow the step given below.
Step 1: First to store our event in a database we have to create the table in a database so create the table in your SQL Server using the following script.
CREATE TABLE Tbl_Calendar
(
[event_id] [bigint] IDENTITY(0,1) Primary Key,
[UserId] [bigint] NULL,
[title] [varchar](100) NULL,
[description] [varchar](200) NULL,
[event_start] [datetime] NULL,
[event_end] [datetime] NULL
)
Step 2: Now create the class for event operations like insert, update, select and delete. For performing this CRUD operation we will create three classes, namely CalendarEvent,ImproperCalendarEvent,EventDAO. Out of this CalendarEvent and ImproperCalendar Event classes contains only the property to make input and output and EventDAO class contains various methods to perform the CRUD operation for our events.
Step 3: Next when we add, update or delete the event; it performs a postback on the server, but as we know jQuery is very much compatible with json using which we can stop the postback to server. So let's create the one Generic Handler class called JsonResponse which extends IHttpHandler,IRequiresSessionState Interfaces.
Step 4: Now we are ready with our classes and database as well as json response handler. Next we move to our designing part. So first copy and paste the required scripts and style sheet in you project listed below.
jquery-ui-1.7.3.custom.css
fullcalendar.css
fullcalendar.min.js
jquery-1.3.2.min.js
jquery-ui-1.7.3.custom.min.js
jquery-ui-timepicker-addon-0.6.2.min.js
jquery.qtip-1.0.0-rc3.min.js
calendarscript.js
Step5: Now add one page to your application and name it as Calendar.aspx. Refer to the files listed above in the head section of the Calendar.aspx page as well paste the following given style sheet.
<meta http-equiv="X-UA-Compatible" content="IE=8" />
<link href="cupertino/jquery-ui-1.7.3.custom.css" rel="stylesheet" type="text/css" />
<link href="fullcalendar/fullcalendar.css" rel="stylesheet" type="text/css" />
<script src="jquery/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="jquery/jquery-ui-1.7.3.custom.min.js" type="text/javascript"></script>
<script src="jquery/jquery.qtip-1.0.0-rc3.min.js" type="text/javascript"></script>
<script src="fullcalendar/fullcalendar.min.js" type="text/javascript"></script>
<script src="scripts/calendarscript.js" type="text/javascript"></script>
<script src="jquery/jquery-ui-timepicker-addon-0.6.2.min.js" type="text/javascript"></script>
<style type='text/css'>
body
{
margin-top: 40px;
text-align: center;
font-size: 14px;
font-family: "Lucida Grande" ,Helvetica,Arial,Verdana,sans-serif;
}
#calendar
{
width: 900px;
margin: 0 auto;
}
/* css for timepicker */
.ui-timepicker-div dl
{
text-align: left;
}
.ui-timepicker-div dl dt
{
height: 25px;
}
.ui-timepicker-div dl dd
{
margin: -25px 0 10px 65px;
}
.style1
{
width: 100%;
}
/* table fields alignment*/
.alignRight
{
text-align: right;
padding-right: 10px;
padding-bottom: 10px;
}
.alignLeft
{
text-align: left;
padding-bottom: 10px;
}
</style>
Step 6: Next design the form with jQuery calendar control and the dialog boxes for adding, updating and deleting events like below.
<asp:scriptmanager id="ScriptManager1" runat="server" enablepagemethods="true">
</asp:scriptmanager>
<div id="calendar">
</div>
<div id="updatedialog" style="font: 70% 'Trebuchet MS', sans-serif; margin: 50px;"
title="Update or Delete Event">
<table cellpadding="0" class="style1">
<tr>
<td class="alignRight">
name:
</td>
<td class="alignLeft">
<input id="eventName" type="text" /><br />
</td>
</tr>
<tr>
<td class="alignRight">
description:
</td>
<td class="alignLeft">
<textarea id="eventDesc" cols="30" rows="3"></textarea>
</td>
</tr>
<tr>
<td class="alignRight">
start:
</td>
<td class="alignLeft">
<span id="eventStart"></span>
</td>
</tr>
<tr>
<td class="alignRight">
end:
</td>
<td class="alignLeft">
<span id="eventEnd"></span>
<input type="hidden" id="eventId" />
</td>
</tr>
</table>
</div>
<div id="addDialog" style="font: 70% 'Trebuchet MS', sans-serif; margin: 50px;" title="Add Event">
<table cellpadding="0" class="style1">
<tr>
<td class="alignRight">
name:
</td>
<td class="alignLeft">
<input id="addEventName" type="text" size="50" /><br />
</td>
</tr>
<tr>
<td class="alignRight">
description:
</td>
<td class="alignLeft">
<textarea id="addEventDesc" cols="30" rows="3"></textarea>
</td>
</tr>
<tr>
<td class="alignRight">
start:
</td>
<td class="alignLeft">
<span id="addEventStartDate"></span>
</td>
</tr>
<tr>
<td class="alignRight">
end:
</td>
<td class="alignLeft">
<span id="addEventEndDate"></span>
</td>
</tr>
</table>
</div>
<div runat="server" id="jsonDiv" />
<input type="hidden" id="hdClient" runat="server" />
Step 7: Next in code behind of this page write the following given code to perform the actions like add, update and delete.
[System.Web.Services.WebMethod(true)]
public static string UpdateEvent(CalendarEvent cevent)
{
List<int> idList = (List<int>)System.Web.HttpContext.Current.Session["idList"];
if (idList != null && idList.Contains(cevent.id))
{
if (CheckAlphaNumeric(cevent.title) && CheckAlphaNumeric(cevent.description))
{
EventDAO.updateEvent(cevent.id, cevent.title, cevent.description);
return "updated event with id:" + cevent.id + " update title to: " + cevent.title +
" update description to: " + cevent.description;
}
}
return "unable to update event with id:" + cevent.id + " title : " + cevent.title +
" description : " + cevent.description;
}
//this method only updates start and end time
//this is called when a event is dragged or resized in the calendar
[System.Web.Services.WebMethod(true)]
public static string UpdateEventTime(ImproperCalendarEvent improperEvent)
{
List<int> idList = (List<int>)System.Web.HttpContext.Current.Session["idList"];
if (idList != null && idList.Contains(improperEvent.id))
{
EventDAO.updateEventTime(improperEvent.id,
DateTime.ParseExact(improperEvent.start, "dd-MM-yyyy hh:mm:ss tt", CultureInfo.InvariantCulture),
DateTime.ParseExact(improperEvent.end, "dd-MM-yyyy hh:mm:ss tt", CultureInfo.InvariantCulture));
return "updated event with id:" + improperEvent.id + "update start to: " + improperEvent.start +
" update end to: " + improperEvent.end;
}
return "unable to update event with id: " + improperEvent.id;
}
//called when delete button is pressed
[System.Web.Services.WebMethod(true)]
public static String deleteEvent(int id)
{
//idList is stored in Session by JsonResponse.ashx for security reasons
//whenever any event is update or deleted, the event id is checked
//whether it is present in the idList, if it is not present in the idList
//then it may be a malicious user trying to delete someone elses events
//thus this checking prevents misuse
List<int> idList = (List<int>)System.Web.HttpContext.Current.Session["idList"];
if (idList != null && idList.Contains(id))
{
EventDAO.deleteEvent(id);
return "deleted event with id:" + id;
}
return "unable to delete event with id: " + id;
}
//called when Add button is clicked
//this is called when a mouse is clicked on open space of any day or dragged
//over mutliple days
[System.Web.Services.WebMethod]
public static int addEvent(ImproperCalendarEvent improperEvent)
{
CalendarEvent cevent = new CalendarEvent()
{
title = improperEvent.title,
description = improperEvent.description,
start = DateTime.ParseExact(improperEvent.start, "dd-MM-yyyy hh:mm:ss tt", CultureInfo.InvariantCulture),
end = DateTime.ParseExact(improperEvent.end, "dd-MM-yyyy hh:mm:ss tt", CultureInfo.InvariantCulture)
};
if (CheckAlphaNumeric(cevent.title) && CheckAlphaNumeric(cevent.description))
{
int key = EventDAO.addEvent(cevent);
List<int> idList = (List<int>)System.Web.HttpContext.Current.Session["idList"];
if (idList != null)
{
idList.Add(key);
}
return key;//return the primary key of the added cevent object
}
return -1;//return a negative number just to signify nothing has been added
}
private static bool CheckAlphaNumeric(string str)
{
return Regex.IsMatch(str, @"^[a-zA-Z0-9 ]*$");
}
In the above code I have only given the design part of the code. It does not contain the code for classes and JsonResponce handler. You can download the attached zip file which contains all the required stuff.
Conclusion
In this way we can create the attractive and light-weight event calendar for our ASP.Net application.