Gunnar Peipman's ASP.NET blog

ASP.NET, C#, SharePoint, SQL Server and general software development topics.

Sponsors

News

 
 
 
DZone MVB

Links

Social

Using FullCalendar jQuery component with ASP.NET MVC

I found very good jQuery component called FullCalendar. My special favorites are agenda views because they make this calendar really useful in business applications. In this posting I will show you how to use FullCalendar with ASP.NET MVC.

Update: source code of this project is available at CodePlex. Please visit MVC Time Planner page for further information and downloads.

Prerequisites

Where are jQuery, jQueryUI and FullCalendar files? You need the following JavaScript components in your MVC project:

Download these components and include them to your ASP.NET MVC project. If you have problems then take a look at the image on right – you can what files I included and where they are located. Click on the image to see it at full size.

I included jQueryUI styles for one good reason – I am not designer but ol’ school MS Paint gangsta and I will be never able to make such a nice designs as pros. I think I am not the only one. :)

Including scripts and styles

As a next thing let’s include script and styles we need to make calendar work. Because my sample application offers currently no more functionality I included these scripts to my master page.


<link href="<%= Url.Content("~/Content/jquery-ui-1.7.2.custom.css") %>" rel="stylesheet" type="text/css" />

<link href="<%= Url.Content("~/Content/fullcalendar.css") %>" rel="stylesheet" type="text/css" />

 

<script type="text/javascript"
src="<%= Url.Content("~/Scripts/jquery-1.3.2.min.js") %>">

</script>

<script type="text/javascript"
src="<%= Url.Content("~/Scripts/jquery-ui-1.7.2.custom.min.js") %>">

</script>

<script type="text/javascript"
src="<%= Url.Content("~/Scripts/fullcalendar.min.js") %>">

</script>


Url.Content method creates correct URL-s and it is way better than MS strategy (href like ..\..\Content\Site.css).

Defining FullCalendar

FullCalendar is typical jQuery component. It needs a container with unique id to be defined in HTML. By example:


<div id="calendar"></div>


Now let’s use jQuery to make calendar look like calendar. Now paste the following script to page header between <script> and </script> tags.


$(document).ready(function() {            
    $('#calendar').fullCalendar({
        theme: true,
        header: {
            left: '',
            center: '',
            right: ''
        },
        defaultView: 'agendaDay',
        editable: false,
        events: "/Calendar/GetEvents/"
    });
});

Now you should see calendar like this when you run your application and move to the page where you added FullCalendar.

FullCalendar in day agenda view

Reading events from server

If you look at calendar definition of calendar you can see that there is attribute called events (currently it has value "Calendar/GetEvents/"). FullCalendar uses this URL to get data about event sin selected view. Let’s take a look request to this URL in FireBug.

Events reading request of FullCalendar

We can see that this request contains three parts: start and end time of current view and one additional parameter that avoids browsers caching the response. Also we can see that start and end times are given as timestamps from Epoch.

Let’s see the controller action that returns events for us.


public JsonResult GetEvents(double start, double end)

{

    var userName = Session["UserName"] as string;

    if(string.IsNullOrEmpty(userName))

    {

        return null;

    }

 

    var fromDate = ConvertFromUnixTimestamp(start);

    var toDate = ConvertFromUnixTimestamp(end);

 

    var rep = Resolver.Resolve<IEventRepository>();

    var events = rep.ListEventsForUser(userName,fromDate,toDate);

 

    var eventList = from e in events

                    select new {

                                id = e.Id,

                                title = e.Title,

                                start = e.FromDate.ToString("s"),

                                end = e.ToDate.ToString("s"),

                                allDay = false

                            };

    var rows = eventList.ToArray();

    return Json(rows,JsonRequestBehavior.AllowGet);           

}


ConvertFromUnixTimestamp method is borrowed from CodeClimber blog posting Convert a Unix timestamp to a .NET DateTime. So, let’s say thanks to Simone Chiaretta.


private static DateTime ConvertFromUnixTimestamp(double timestamp)

{

    var origin = new DateTime(1970, 1, 1, 0, 0, 0, 0);

    return origin.AddSeconds(timestamp);

}


If there were no problems and we inserted some events to database then we should see something like this. Pretty nice?

FullCalendar with events

As a quick update you can follow my previous posting about FullCalendar Linking jQueryUI DatePicker and FullCalendar and link you calendar to jQueryUI DatePicker. The result is here.

FullCalendar working with jQueryUI DatePicker

That’s it for now. Happy coding! :)


kick it on DotNetKicks.com Shout it! 顶 Progg it Shout it

Comments

Timo said:

Hi,

can you download your copy ready? I do not get the point :(.

# February 4, 2010 7:28 AM

DigiMortal said:

Hi Timo!

What problems you are facing?

# February 4, 2010 10:05 AM

Timo said:

Hi,

I skipped the MVC :-). How can I build without MVC?

Greeting

Timo

# February 5, 2010 10:23 AM

Steve said:

Can this be setup to connect to/pull from  Outlook ?

# February 5, 2010 3:04 PM

DigiMortal said:

Timo, you can use basically same code also for ASP.NET Forms. You just have to create JSON responses and write them out. After that you should immediately close response to avoid another mark-up. Also you should set correct content type. It is all pretty simple.

# February 5, 2010 4:45 PM

DigiMortal said:

Steve, it is usual web application and it is not able to communicate with Outlook that runs on your desktop. You can extend it to add support for vCal or iCal downloads. Outlook can detect those files and add events to your calendar.

# February 5, 2010 4:46 PM

DigiMortal said:

I don't have ASP.NET forms example. I have ASP.NET MVC version only. If it is okay for you I can send it to you. If you want forms example then you must wait some days as I am pretty busy right now. Please send me a message with your e-mail address and I will send you the example like it is right now.

# February 8, 2010 8:02 AM

Timo said:

Hi,

ok thanks. I sent you an e-mail!

Thank you very much

# February 8, 2010 9:12 AM

Dave Horner said:

I too would be interested in seeing this sample code if possible...dave -at- thehorners.com.  Thanks!!!

# February 15, 2010 3:17 PM

yhrchan said:

Can you please send me an example for asp.net via email too at yhrchan@hotmail.com?

Thanks,

Ricky

# February 25, 2010 4:04 PM

bryan said:

Can you send me the sample code please? My email is: algobed@yahoo.es

Thanks!

# March 9, 2010 3:53 PM

Mike said:

Awesome post - you saved me a lot of time.  Thanks a lot!!!

# March 26, 2010 6:01 PM

Hasan said:

Please send the code... thanks

# March 27, 2010 3:07 AM

Hasan said:

Please send the code to shmoulana@ymail.com

# March 27, 2010 3:17 AM

Joseph Tang said:

Can you send me the sample code please? My email is: jhtang@bellsouth.net

# April 5, 2010 8:49 PM

Steven watson said:

Can you send me the sample code please.

My email is sthaival@yahoo.com

Thanks

# April 13, 2010 5:22 PM

ogrist said:

Can you send me the sample code please?

My email is: ogrist93@hotmail.com

Thanks a lot!!!

# April 15, 2010 5:59 AM

zesenator said:

Can you send me the sample code please? My email is: zesenator@hotmail.com

# April 25, 2010 5:45 PM

wildwester said:

Can you send me the sample code please? My email is: wildewester2003@hotmail.com

thank you!

# April 28, 2010 6:37 PM

Al D said:

Can you send me the sample code please? My email is: addenton03@yahoo.com

thank you!

# May 6, 2010 8:53 AM

SpencerC said:

Can you send me the sample code please? My email is: spencerclark -at- gmail.com

Thanks for producing such great code!

# May 26, 2010 12:52 PM

James West said:

I would also like a copy of the code if possible.

james.west at westdarley . co . uk

Thank you

# June 20, 2010 8:41 PM

suradecs said:

very cool code and i will get you sourc code from codeplex

Thank so much.

# June 28, 2010 5:14 AM

DigiMortal said:

You can find source and binaries from CodePlex. There is project called ASP.NET MVC Time Planner: weblogs.asp.net/.../asp-net-mvc-mvc-time-planner-is-available-at-codeplex.aspx

# July 8, 2010 3:40 PM

DigiMortal said:

Raman, you should be able to control HTML of calendar. You can use divs in calendar and switch them on and off in JavaScript.

# November 20, 2010 5:19 AM

duobee said:

do you have any story about how to integrate with wdCalendar?

# April 15, 2011 3:35 AM

nchekwube said:

Hey.

I guess I'm the only one having this problem but this technique doesn't show any events for me.

I think it's because DateTime.ToString("s") gives a string of the format:"2011-04-10T17:00:00"... The T seems to be the problem... Anyone got a solution for this?

# April 16, 2011 6:23 AM

nchekwube said:

nevermind...

# April 16, 2011 7:24 AM

nchekwube said:

great tut by the way. thanx

# April 16, 2011 7:25 AM

nchekwube said:

Is it possible to synchronize my fullcalendar with a google calendar? What about downloading the calendar as an excel file, pdf or word?

# April 16, 2011 7:49 AM

DigiMortal said:

Thanks for feedback, nchekwube!

I have tons of plans how to improve this calendar and I hope to continue with it as soon as some of my busy projects are not so busy anymore. :)

# April 16, 2011 3:00 PM

ematsuno said:

Where is IEventRepository defined?  

# April 21, 2011 3:58 PM

DigiMortal said:

IEventRepository is my own interface defined my own code.

# April 22, 2011 5:32 AM

shang said:

where is Json defined?

# May 4, 2011 2:42 AM

DigiMortal said:

Json is method of controller class.

# May 4, 2011 5:47 PM

pcisewski said:

Very cool, extremely useful and simple to implement. Thank you.

# May 6, 2011 2:38 PM

ANJAN said:

I want to customize the JSON call for event.

How can i add parameters to the following function public JsonResult GetEvents(double start, double end)

I have to add some more filter parameters. Currently i am doing it by session variables. But i do not want to use session for this

# May 16, 2011 8:20 AM

senthil said:

Were you able to update the control to month/week views? just curious.

# June 24, 2011 2:12 PM

Shantanu said:

Can this script be used with ASP.NET MVC3 RAZOR..?? Please help.

If not, can you give any calender script that can work with ASP.NET MVC3 RAZOR.

# July 10, 2011 3:11 AM

SouF said:

thnk u for the tutoriel!

i have a problem with this line

Resolver.Resolve<IEventRepository>();

my project doesn't know this class (Resolver) , same think with the interface (IEventRepository)

should i import an additionnal assembly ?

# August 26, 2011 11:27 AM

mohanad said:

can i make it read events from a database i made it ??? plz i need answer

# March 13, 2012 8:17 AM

wifi said:

this's really good :)

thx bro ;)

# August 22, 2012 9:25 AM