jquery-scheduler-html5.png

The Scheduler can be initialized using the built-in jQuery scheduler plugin.

var dp = $("#dp").daypilotScheduler(options);

The properties of the options parameter will be used to initialize the DayPilot.Scheduler properties.

Since 7.9 you can pass events (initial event list) and scrollTo (initial horizontal scrollbar position) properties to the plugin:

<script src="scripts/daypilot-all.min.js" type="text/javascript"></script>

<div id="dp"></div>

<script type="text/javascript">
    var dp = $("dp").daypilotScheduler({
      startDate: new DayPilot.Date("2013-03-25").firstDayOfMonth(),
      cellGroupBy: "Month",
      days: 31,
      cellDuration: 1440, // one day
      resources: [
                 { name: "Room A", id: "A" },
                 { name: "Room B", id: "B" },
                 { name: "Room C", id: "C" }
                ],
      events: [{
        start: "2014-03-25T00:00:00",
        end: "2014-03-25T12:00:00",
        id: "1",
        resource: "B",
        text: "Event"
      }],
      scrollTo: "2013-03-05"
}); </script>

Note:

  • The Scheduler doesn't require jQuery. You only need it if you want to use the jQuery plugin.

JavaScript

<script src="scripts/daypilot-all.min.js" type="text/javascript"></script>

<div id="dp"></div>

<script type="text/javascript">
    var dp = $("dp").daypilotScheduler({
      startDate: new DayPilot.Date("2013-03-25").firstDayOfMonth(),
      cellGroupBy: "Month",
      days: 31,
      cellDuration: 1440, // one day
      resources: [
                 { name: "Room A", id: "A" },
                 { name: "Room B", id: "B" },
                 { name: "Room C", id: "C" }
                ]
}); </script>

ASP.NET MVC

The Scheduler can be initialized using a jQuery plugin instead of the Html Extender.

  • Use $("#dps).daypilotScheduler(options);
  • Set the properties using options parameter.
  • The .init() method will be called automatically.

Example

<div id="dps_jquery"></div> 

<script type="text/javascript"> 
var dps = $("#dps_jquery").daypilotScheduler({ 
  backendUrl: '@ResolveUrl("~/Scheduler/Backend")', 
  height: 300, 
  heightSpec: "Max", 
  timeRangeSelectedHandling: "CallBack", 
  days: 7
}); 
</script>

Demo

Java

<div id="dps_jquery"></div> 

<script type="text/javascript"> 
var dps = $("#dps_jquery").daypilotScheduler({ 
  backendUrl : '${pageContext.request.contextPath}/dps',
  height: 300, 
  heightSpec: "Max", 
  timeRangeSelectedHandling: "CallBack", 
  days: 7
}); 
</script>

Demo

ASP.NET WebForms

Not supported.