DayPilot News (July 2013)

Monthly summary of new releases and articles - July 2013.
Jul 2, 2013

Releases

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

scheduler-asp.net-event-duration.png

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

event-calendar-css-theme-dark-blue.png

Improvements:

Theme designer:

Tutorials

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

scheduler-asp.net-mvc-tutorial.png

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

event-calendar-asp.net-mvc-week.png

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

event-calendar-asp.net-mvc-toolbar.png

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-asp.net-daily-totals.png

Timesheet using DayPilot Scheduler in Days mode.

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

Employee Filter Example

timesheet-asp.net-employee.png

.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>

DayPilot for JavaScript, ASP.NET WebForms, ASP.NET MVC, Java