DayPilot News (July 2013)

Releases

DayPilot Pro for ASP.NET MVC 7.3 SP4 June 4, 2013

Improvements:

• [Demo] Neutral menu_default theme.
• [Calendar] OnBeforeEventRender/e.DataItem available.
• [Scheduler] OnBeforeEventRender/e.DataItem available.
• [Month] OnBeforeEventRender/e.DataItem available.
• [Scheduler] scheduler_white theme supports duration bar.

CSS Theme Designer Update - June 7, 2013

Improvements:

• IE 10 gradients supported.
• Duration bars in scheduler themes
• Duration bars in event calendar themes (see samples)

Theme designer:

• http://themes.daypilot.org/

Tutorials

Event Scheduler for ASP.NET MVC 4 Razor Tutorial (Updated) June 4, 2013

Updated with the latest DayPilot Pro for ASP.NET MVC release (7.3 SP4).

Event Calendar with Day/Week/Month Views (ASP.NET MVC Tutorial) June 14, 2013

ASP.NET MVC project with a toolbar for fast switching between day, week, and month views.

• Navigator (date picker) displaying three months
• Fast switching between day, week, and month view
• Event editing using a modal dialog
• Drag and drop event creating
• Drag and drop event moving
• Drag and drop event resizing
• Event deleting using [x] icon in the upper-right corner
• Sample SQL Server database (SQL Server Express 2008)
• Uses ASP.NET MVC 4 Razor engine
• Source code in both C# and VB.NET

View-Switching Toolbar Example

DayPilot.Switcher in JavaScript

<div id="toolbar">
  <a href="#" id="toolbar_day">Day</a>
  <a href="#" id="toolbar_week">Week</a>
  <a href="#" id="toolbar_month">Month</a>
</div>

<script type="text/javascript">

  var switcher = new DayPilot.Switcher();
  
  // adding views (DayPilot controls)
  switcher.addView(dp_day);
  switcher.addView(dp_week);
  switcher.addView(dp_month);

  // binding the toolbar links (buttons) to views
  switcher.addButton("toolbar_day", dp_day);
  switcher.addButton("toolbar_week", dp_week);
  switcher.addButton("toolbar_month", dp_month);

  // adding navigator
  switcher.addNavigator(dp_navigator);

  // default view
  switcher.show(dp_day);

</script>

Timesheet Tutorial (ASP.NET, C#, VB.NET, SQL Server) June 24, 2013

Timesheet using DayPilot Scheduler in Days mode.

• Monthly time sheet
• Filtering by employee
• Drag and drop editing
• Daily summary

Employee Filter Example

.aspx

<div class="space">
  Employee: 

  <asp:DropDownList 
    runat="server" 
    ID="DropDownListEmployee" 
    ClientIDMode="Static" 
    DataTextField="EmployeeName" 
    DataValueField="EmployeeId" />
</div>

JavaScript

<script type="text/javascript">
    $(document).ready(function () {
        dp.clientState.employee = $("#<%= DropDownListEmployee.ClientID %>").val();
        $("#<%= DropDownListEmployee.ClientID %>").change(function () {
            dp.clientState.employee = this.value;
            dp.commandCallBack("refresh");
        });
    });
</script>