X
Gunnar Peipman

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.

SOURCE CODE Source code of this project is available at CodePlex. Please visit MVC Time Planner page for further information and downloads.

Prerequisites

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.

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.

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?

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.

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

Liked this post? Empower your friends by sharing it!
Categories: ASP.NET JavaScript

View Comments (43)

Leave a Comment
Related Post
  1. Automated date based versioning for ASP.NET Core assemblies using Azure DevOps

    I needed automatic version numbering based on current date when web application is built. It…

  2. Creating configuration reader for web and cloud environments

    Currently it is not possible to make changes to web.config file that is hosted on…

  3. ASP.NET MVC 3: Using AppFabric Access Control Service to authenticate users

    I had Windows Azure training this week and I tried out how easy or hard…

  4. Building Blazor “Hello, Blinky” IoT application

    I thought first my ASP.NET Core edition of Hello, Blinky will be my last Hello,…

  5. JavaScript: Creating timestamps with time zone offsets

    I was converting the example code of my Windows Azure session to Visual Studio 2010…