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>