jquery scheduler

The Scheduler can be initialized using the built-in jQuery scheduler plugin. Note that the plug-in is only activated if jQuery is loaded before daypilot-all.min.js.

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/jquery.min.js" type="text/javascript"></script>
<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/jquery.min.js" type="text/javascript"></script>
<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 WebForms

Not supported.

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

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

<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

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

<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