The Monthly Calendar can be initialized using the built-in jQuery calendar plugin.

Note:

  • The monthly event calendar 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>
<link type="text/css" rel="stylesheet" href="themes/month_white.css" />    

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

<script type="text/javascript">
    var dp = $("dp").daypilotMonth({
      cssClassPrefix: "month_white",
      startDate: new DayPilot.Date("2013-03-25")
    });
</script>

JavaScript

<script src="js/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="js/daypilot-all.min.js" type="text/javascript"></script>
<link type="text/css" rel="stylesheet" href="themes/month_white.css" />

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

<script type="text/javascript">
    var dp = $("dp").daypilotMonth({
      cssClassPrefix: "calendar_white",
      startDate: "2013-03-01"
    });
</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).daypilotMonth(options);
  • Set the properties using options parameter.
  • The .init() method will be called automatically.

Example

<script src="scripts/daypilot-all.min.js" type="text/javascript"></script>
<link type="text/css" rel="stylesheet" href="themes/month_white.css" />    

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

<script type="text/javascript">
    var dp = $("dp").daypilotCalendar({
      backendUrl: '<%= ResolveUrl("~/Month/Backend") %>', 
      cssClassPrefix: "month_white",
      startDate: new DayPilot.Date("2013-03-25")
    });
</script>

Demo

Java

 
<script src="scripts/daypilot-all.min.js" type="text/javascript"></script>
<link type="text/css" rel="stylesheet" href="themes/calendar_white.css" />    

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

<script type="text/javascript">
    var dp = $("dp").daypilotCalendar({
      backendUrl : '${pageContext.request.contextPath}/dpm',
      cssClassPrefix: "month_white",
      startDate: new DayPilot.Date("2013-03-25")
    });
</script>

Demo