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

How to create a time sheet in ASP.NET. Tutorial with sample source code (C#, VB.NET).
Jun 24, 2013
timesheet asp.net

This tutorial shows how to create a monthly time sheet in ASP.NET using DayPilot Scheduler control.

Tutorial

Download

  • The tutorial includes a sample Visual Studio project with source code in C# and VB.NET.

Features

  • Monthly time sheet
  • Highlighting business hours
  • Daily totals
  • Drag and drop
  • Editing using a modal dialog
  • C# and VB.NET versions
  • Visual Studio project
  • SQL Server database

Online Demo

Examples

Daily Totals

timesheet-asp.net-daily-totals.png

<HeaderColumns>
  <DayPilot:RowHeaderColumn Title="Date" Width="100" />
  <DayPilot:RowHeaderColumn Title="Day" Width="100" />
  <DayPilot:RowHeaderColumn Title="Total" Width="100" />
</HeaderColumns>

Employee Filter

timesheet-asp.net-employee.png

Filter DropDownList:

<div class="space">
  Employee: 

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

Applying the filter

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

Business Hours

timesheet-asp.net-business-hours.png

<DayPilot:DayPilotScheduler
    ID="DayPilotScheduler1" 
    runat="server" 

    BusinessBeginsHour="9"
    BusinessEndsHour="18"
>
</DayPilot:DayPilotScheduler>

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