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.
[code]
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");
scheduler.setLoadMode("month");
scheduler.load("/Club/Data");
var dp = new dataProcessor("/Club/Save");
dp.init(scheduler);
dp.setTransactionMode("POST", false);
}
</script>
[/code]
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>