Note: The Scheduler can be initialized using a jQuery plugin.
Source
<script type="text/javascript"> $(document).ready(function() { $("#dps").daypilotScheduler({ backendUrl : '/sandbox/dps', onTimeRangeSelected : function(args) { createEvent(args.start, args.end, args.resource); }, eventMoveHandling : 'CallBack', eventResizeHandling : 'CallBack', onEventClick : function(args) { editEvent(args.e); }, cellGroupBy : "Month", cellDuration : 1440, cellWidth : 60, startDate : "2011-01-01", days : 365, treeEnabled : true, bubble : new DayPilot.Bubble(), resourceBubble : new DayPilot.Bubble(), contextMenu : new DayPilot.Menu({ items: [ {text:"Show event ID", onclick: function() {alert("Event value: " + this.source.value());} }, {text:"Show event text", onclick: function() {alert("Event text: " + this.source.text());} }, {text:"Show event start", onclick: function() {alert("Event start: " + this.source.start().toStringSortable());} }, {text:"Go to google.com", href: "http://www.google.com/?q={0}"}, {text:"CallBack: Delete this event", command: "delete"} ] }) }); }); </script>