Next step of programming

A good Jquery plugin is available as Event Calendar which can be download from following location.

http://www.bytecyclist.com/projects/jmonthcalendar/
or
http://code.google.com/p/jmonthcalendar/

I used it in one sample project with MVC and loaded certain events from the controller. Which can in return load from the Model. But for the time being in this sample i returned from the controller it self.

public ActionResult Events(string date)
{
MyEvents event1 = new MyEvents            
{
EventID = 11 ,
StartDate = new DateTime(2009,04,01),
Title = "Meeting with Boss",
Description = "Meeting on product release",
CssClass = "Meeting",
URL= "/Home/EventDetails/11"            
};

MyEvents event2 = new MyEvents            
{
EventID = 12,
StartDate = new DateTime(2009, 04, 01),
Title = "Celebration",
Description = "Fathers birthday",
CssClass = "Birthday",
URL = "/Home/EventDetails/12"            
};

string[] stringlist = new string[2];
stringlist[0] = event1.GetJSONResult();
stringlist[1] = event2.GetJSONResult();

return Json(stringlist);
}

For calling the events it did getJson call from the index page where the jMonthCalendar is shown. It will call one of the function the Controller and in return will get the array of the events which will then be sent to the jMonthCalendar. It will load the events. We can add the URL also so that when user clicks the event he will get the complete detail once again with the help of the controller

<script type="text/javascript">
    $().ready(function() {
var options = {

height: 650,
width: 980,
navHeight: 25,
labelHeight: 25,

onMonthChanging: function(dateIn) {
$.getJSON("http://localhost:1511/Home/Events",
function(data) {

//Array of my events                    
var events = new Array();

//Loop and load all the events and load them into the array
                    $.each(data, function(i, item) {

var oResultData = eval('(' + item + ')');
var event = { "EventID": 5, "Date": oResultData.StartDate,
"Title": oResultData.Title, "URL": oResultData.URL,
"Description": oResultData.Description,
"CssClass": oResultData.CssClass
};

events.push(event);

});

//Load the events into the calendar
                    $.jMonthCalendar.ReplaceEventCollection(events);
$.jMonthCalendar.DrawCalendar(dateIn);
});
return true;
},
onEventBlockOver: function(event) {
return true;
},
onEventBlockOut: function(event) {
return true;
},
onDayLinkClick: function(date) {
return true;
},
onDayCellClick: function(date) {
return true;
}
};

var newevents = [];
$.jMonthCalendar.Initialize(options, newevents);
});</script>

Download the sample from following location

EventCalendar

Here are the screen shot of the application.

Event Calendar in MVC Application

Detail of selected Event