ASP.NET MVC Scheduler open-source?

Question

.NET MVC Scheduler/appointment open-source? Thanks!

Answer 1

Our team had an MVC 5 project recently with this need. The project required the ability to display a calendar of events from a database as well as add and delete existing calendar items. We looked at DayPilot Lite's & Dhtmlx's JavaScript version 4.1 open source versions.

What we found

Both have JavaScript versions and .Net WebForms and/or MVC integrated versions however for our project we desired the JavaScript versions over the MVC integrated versions as we felt it was cleaner and fit more with our development model (We don't tend to use 3rd party integrated controls). JavaScript was the only free version offered by Dhtmlx while DayPilot offers the lite open source version for WebForms and MVC.

Both have nice tutorials available on their site and on various sites like code project.

What we chose

We used dhtmlx's JavaScript Event Calendar / Ajax Scheduler in an ASP.Net MVC 5 app as it had a few more features in it's open source version that we desired. Namely the color coding option was ready to go out of the box and we found the API very flexible, exposed events and customization options to be very powerful. We have been very happy with it and found it was easy to use their documentation site and samples site to figure out all that we needed to do. We did not use their data connector as we found straight AJAX calls worked easy enough for our scenario.

Getting started with dhtmlx

Here's a couple of articles on code project that we used to get us going with dhtmlx.

http://www.codeproject.com/Articles/148500/Event-Calendar-for-an-ASP-NET-MVC-Application

http://www.codeproject.com/Articles/249921/How-to-Build-a-Room-Booking-Calendar-with-dhtmlxSc

In case the links stop working the author is Stas Wolski for both of them. Both examples are old but still effective. Finally, we used their online demos (can be downloaded) and online documentation site as well.

Knowledge share

One of our biggest tricks to the calendar was the date format matching (or mismatch in our initial case).

We used the format of scheduler.config.xml_date = "%m/%d/%Y %H:%i".

For dates coming from our MVC View Model (VM) we made sure to convert them to string formats of short date (@Model.StartDate.ToString("d")) if it was a date in the VM.

If the VM passed a date as a string then we made sure the controller used the following format example (item.StartDate.ToString("MM/dd/yyyy HH:mm:ss")).

Some potential helpful API's we used that might just be of use.

Reacting to calendar clicks - take a look at scheduler.attachEvent

Changing the Hours Scale look - take a look at scheduler.templates.hour_scale

Need to customize the view of different event types - take a look at scheduler.renderEvent and scheduler.templates.event_class

Hiding/Ignoring Weekends in the calendar - take a look at scheduler.ignore_week

Need to have a confirm dialog for a calendar action - take a look at scheduler._dhtmlx_confirm

Minifying Issue

We did find one gotcha with the JS version and MVC in particular that we didn't resolve. If you bundle and minify the dhtmlx's scripts the scheduler breaks as the scheduler object is renamed and becomes undefined. We simply setup the scripts to bundle but not to minify by using Bundle instead of ScriptBundle.

    bundles.Add(new Bundle("~/bundles/dhtmlx/calendar").Include(
        "~/Scripts/dhtmlx/dhtmlxscheduler.js",
        "~/Scripts/dhtmlx/ext/dhtmlxscheduler_limit.js",
        "~/Scripts/dhtmlx/ext/dhtmlxscheduler_minical.js",
        "~/Scripts/dhtmlx/ext/dhtmlxscheduler_readonly.js"));

I'm sure there is a way to solve that but we weren't too worried about this in our case as this part of the app was not going to be getting high amounts of traffic....