Using dhtmlxScheduler with ASP.NET MVC3

I have set up and got working satisfactorily dhtmlxScheduler with ASP.NET MVC3 using the standard MVC Web Application rather than an empty one where the calendar is displayed on the index page. I have successfully converted it to work with Entity Framework 4.1 Code First. I can display, add and edit event data.

I am now trying to switch the display of the calendar onto a Content page by creating a new menu tab to display it. The calendar is displayed OK but there appears to be a problem displaying the data. I have a popup displaying the following error: Error Type: LoadXML, Description: Incorrect XML. The only change to dhtmlxScheduler is a move of the code to display the calendar from the default index page to a secondary content page. I assume this should work. Any comments?


Means that incorrect xml was returned from the server when you loaded your events. Can you check it?

Best regards,

Hi Ilya

I think the problem is that I have changed the names of the records on my database. I have altered Data.aspx to reflect these, but the returning data still has your field names. Is there a way for me to change the names of the fields used by Scheduler to the names I am using on my database so that it then returns the same names back to me?

Roger H

Next names can’t be changed - start_date, end_date, text
All other custom fields can have any necessary names.

OK. I have changed my field names to the default names and I have the scheduler working under MVC3 and EF Code First. At the moment it is being displayed on a default Index page. I need to now change that to a Master / Content page setup and see if it still works. I will let you know.

OK. I have the scheduler loading data from a databse on a content page. The last ( I hope ) problem I have is with the format of the dates being returned to the Save routine. I am using an MS SQL database where the dates are stored in dd/mm/yyyy format. The date format that is returned to be saved is in mm/dd/yyyy format. This is either saving the wrong date on the SQL table or not saving it at all, depending on whether the day is 12 or less. This also applies when using an App_Data .mdf file. How do I specify the format I need the data in to save it?


Try changing config.xml_date option:

scheduler.config.xml_date="%Y-%m-%d %H:%i";

Best regards,

Thanks Ilya

The whole thing is working well. Now to add Recurring Events and Coloured Events.

Hello Xiecsuk,

Can you post a code sample use MVC 3???

This is the init routine, including recurring events and coloured events. The first block of commented out code allows you to restrict the people allowed to update the scheduler based on Roles.

function init() {
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();

		scheduler.config.xml_date = "%Y/%m/%d %H:%i";
		scheduler.config.repeat_date = "%d/%m/%Y";
		scheduler.config.time_step = 15;
		scheduler.config.first_hour = 9;
		scheduler.config.last_hour = 22;
		scheduler.config.auto_end_date = true;
		scheduler.config.multi_day = true;
		scheduler.locale.labels.section_subject = "Event Type";
		scheduler.locale.labels.section_recurring = "Repeat Event";
		scheduler.locale.labels.section_time = "Time Period";
		scheduler.config.server_utc = true;

// <% if ( User.IsInRole(“EditEvents”) ) { %>
// scheduler.config.readonly = false;
// <% } else { %>
// scheduler.config.readonly = true;
// <% }; %>

		var control_date = new Date(y, m, d);
		scheduler.templates.event_class = function (start, end, event) {

			if (start < control_date) // event start before control date
				return "past_event";

			if (event.event_type) // if event has subject property then special class should be assigned
				return "event_" + event.event_type;

			return ""; // default return

			Note that it is possible to create more complex checks
			events with the same properties could have different CSS classes depending on the current view:

			var mode = scheduler.getState().mode;
			if(mode == "day"){
			// custom logic here
			else {
			// custom logic here

		var subject = [
			{ key: 'default', label: 'Club Event' },
			{ key: 'outsideEvent', label: 'Non-Club Event' },
			{ key: 'meeting', label: 'Club Meeting' },
			{ key: 'social', label: 'Club Social' },
			{ key: 'booking', label: 'Room Booking' }

		scheduler.config.lightbox.sections = [
			{ name: "description", height: 43, map_to: "text", type: "textarea", focus: true },
			{ name: "subject", height: 25, type: "select", options: subject, map_to: "event_type" },
			{ name: "recurring", height: 115, type: "recurring", map_to: "rec_type", button: "recurring" },
			{ name: "time", height: 43, type: "time", map_to: "auto" }

		scheduler.init("scheduler_here", new Date(y, m, d), "week");

		var dp = new dataProcessor("/Club/Save");
		dp.setTransactionMode("POST", false);

The HTML to display the calendar is as in the demo you can download. I initiated it with the following code

<asp:Content ID="Content3" ContentPlaceHolderID="scriptContent" runat="server"> <script type="text/javascript"> dhtmlxEvent(window, "load", init); </script> </asp:Content>
The coding of the Save.aspx routine is also exactly as in the demo. I altered the Data.aspx routine slightly as follows.

<data> <% foreach (var myEvent in Model) { %> <event id="<%=myEvent.EventID%>"> <start_date><![CDATA[<%= String.Format("{0:yyyy/MM/dd HH:mm}",myEvent.start_date) %>]]></start_date> <end_date><![CDATA[<%= String.Format("{0:yyyy/MM/dd HH:mm}",myEvent.end_date) %>]]></end_date> <text><![CDATA[<%= myEvent.text%>]]></text> <rec_type><![CDATA[<%= (myEvent.rec_type == null) ? String.Empty : myEvent.rec_type%>]]></rec_type> <event_length><![CDATA[<%= myEvent.event_length%>]]></event_length> <event_pid><![CDATA[<%= myEvent.event_pid%>]]></event_pid> <event_type><![CDATA[<%= (myEvent.event_type == null) ? "default" : myEvent.event_type%>]]></event_type> </event> <% } %> </data>