Skip to content

Using DayPilot with ASP.NET MVC

I’m going to demonstrate how to use the open-source DayPilot Lite calendar control in an ASP.NET MVC application. I will discuss the capabilities of the control and consider the general problem of how to use controls designed for "plain" ASP.NET in MVC applications. I’m including a demo solution which you can download and run yourself.

Download the demo solution: DayPilot ASP.NET MVC demo

We needed a calendar control for an ASP.NET MVC application. In particular, we needed a control which would show a number of events and when they occur within a particular day, "Outlook-style." I’ll include a screenshot of the demo application here, since it’s the best way to explain the type of control we were looking for:

DayPilot example

DayPilot example

Possible Alternatives to DayPilot

In my experience, the type of control which works best with ASP.NET MVC is a control which is completely ignorant of ASP.NET, and all the lies such as ViewState and postbacks which accompany it. In particular, I’ve had a good deal of success with controls designed for the jQuery JavaScript framework, which is included, by default, with ASP.NET MVC applications. Unfortunately, I was unable to find a jQuery control which data what we needed. The closest I found was jMonthCalendar which cannot display a single day in the manner illustrated above. I would still prefer a jQuery-based solution if one ever turns up.

I did, however, find a couple of controls designed for "plain" ASP.NET which, from an end-user point of view, it exactly what we needed. One was the DayPilot control illustrated above, the other was the scheduler component included with Telerik’s control suite. Telerik’s control claims some support for MVC, but this is really limited to loading calendar data asynchronously, which was not actually what we wanted to do. Also, Telerik’s control can only be purchased as part of their suite, which is rather expensive if you only need the calendar/scheduler control. Paying for the entire suite would not be a problem for us if it was filled with controls we needed, designed for the environment (MVC) we use. While Telerik seems serious about supporting MVC, they are in the early stages right now, so it is difficult to justify paying for a large suite in order to get a single control, which I would have to use in a mostly-unsupported way. The Telerik control has many more features than the DayPilot control, and, in my opinion, looks a little nicer.

The DayPilot calendar is available in two different editions. There is an open source edition, which is free, and a non-open-source edition, which adds features. The principal difference is that the date version includes editing (via postbacks) and UpdatePanel support, which are not really useful in an ASP.NET MVC application anyway. As with Telerik’s control, I have to adapt the control for use within ASP.NET MVC. So we selected the open source version, even though the paid version is priced reasonably.

Adapting DayPilot to ASP.NET MVC

In order to use the DayPilot control in ASP.NET MVC, I wanted to use markup which would look familiar to ASP.NET MVC developers:

<%= Html.DayPilot(Model, new DayPilotViewOptions
                             {
                                 HourHeight = 30
                             }) %>

This means that I needed to write an Html helper which will render the control based on the data passed in Model and return the literal HTML markup. In order to make that easier, I created two new types, DayPilotData and DayPilotViewOptions, in order to encapsulate access to the properties of the control. The reason I created two different types was to separate the concerns of data for the events (which will be set up in the controller) and display of the control (which is the concern of the view). The types are trivial, so I’m not going to show them in this post, but you can examine them in the demo solution. There is an overload to this Html helper which does not include the options argument in case you are happy with the defaults.

        public static string DayPilot(
            this HtmlHelper helper,
            DayPilotData model,
            DayPilotViewOptions options)
        {
            var calendar = new DayPilotCalendar();
            if (model != null)
            {
                model.CopyTo(calendar);
            }
            if (options != null)
            {
                options.CopyTo(calendar);
            }
            var sb = new System.Text.StringBuilder();
            sb.Append("<div class=\"dayPilot\">"); // allows working around td cellpadding bug in css
            using (var sw = new System.IO.StringWriter(sb))
            {
                using (var tw = new HtmlTextWriter(sw))
                {
                    calendar.RenderControl(tw);
                }
            }
            sb.Append("</div>");
            return sb.ToString();
        }

Note the div. The current version of DayPilot astonishingly, as of this writing, does not put a class anywhere in its rendered markup. Since the stylesheet for the default ASP.NET MVC site conflicts with DayPilot, to some degree, I wrapped the whole control in a div so that I could fix the layout in CSS.

Another way which I could have used the control in ASP.NET MVC would be to register a tag prefix and use code behind/code generation, as with standard ASP.NET. I’ve registered a tag prefix in the demo solution in case you want to try that yourself. Be aware, however, that setting up codebehind and code generation files in an MVC application is somewhat less than simple; doing it right requires, among other things, manual editing of the csproj file. So I do recommend using the control in the way I’ve illustrated.

Finally, here’s the source code for the action which supplies data for the control. Since this is a demo solution, I’m generating random events:

        public ActionResult Index()
        {
            var r = new Random();
            var q = from i in Enumerable.Range(1, 4)
                    let start = DateTime.Today.AddHours(r.Next(47))
                    select new DayPilotDataItem
                    {
                        Id = i,
                        Start = start,
                        End = start.AddHours(1),
                        Text = string.Format("Event {0}", i)
                    };
            var model = new DayPilotData
            {
                StartDate = DateTime.Today,
                Days = 2,
                Data = q
            };
            return View(model);
        }

Of course, it’s just as easy to select data from a database.

The current version of DayPilot has a kind of a weird limitation: You cannot make it smaller, in the vertical dimension, than 30 pixels per hour. Based on some inspection of the source code, I think this is fixable if you are comfortable altering the source. But be aware of the limitation.

There are more DayPilot features which I have not covered, but that should be enough to get you on your way. If you have any questions, post them in comments, and I’ll see whdat I can do to help out.

{ 3 } Comments

  1. Alex | May 20, 2009 at 10:45 am | Permalink

    http://www.redredred.com.au/projects/jquery-week-calendar/

  2. Brent Bulla | March 24, 2010 at 12:29 am | Permalink

    I know this is old…but is there a port of this demo for vs2010 RC? :) I have some performance issues using jquery with fullcalendar b/c I have multiple calendars that are dynamically created and rendered. There is an undesirable lag while the newly injected calendars are rendered…

    I’m wondering if the DayPilot calendar control can overcome these issues. We have a licensed copy, but I don’t know how to separate the daypilot calendar from the viewstate, etc. that jquery doesn’t need (and I would like to not enable on my page).

    Any pointers or suggestions would be helpful.

    Response: Have you tried it? My wild guess is that it will work as-is. It would probably be a good idea to convert the HTML helper to use MvcHtmlString, but that is simple enough.

  3. Jocelyn Masserot | June 2, 2010 at 10:42 am | Permalink

    Hi, nice work,
    I wondering if there are a methods to set the color of each event with different color? Because with your code it’s not possible, so I modified DayPilotData.cs file to access to the other properties but the calendar display method can’t set independently event color.

    Have you an idea?

    Thanks

Post a Comment

Your email is never published nor shared. Required fields are marked *

Bad Behavior has blocked 713 access attempts in the last 7 days.

Close