Event Calendar Using JQuery

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.