Buy a license to get a bundle of fast scheduling components with source code.

Features

This tutorials shows how to create a simple timesheet web application in ASP.NET MVC using DayPilot ASP.NET MVC scheduler control. The scheduler control supports a special timesheet view that displays one day per row.

Timesheet Width

By default, the cell width is set to 40 pixels. This makes the whole timesheet 3840 pixels wide (40 pixels * 24 hours * 4 cells per hour). We want the total width to match the available space so we will add CellWidthSpec = Auto option. This may lead to very small cell size on small displays so we will specify the minimum cell width using CellWidthMin property:

The records are loaded to "Events" property and the database table fields are mapped using Data*Field properties.

The OnFinish() method is called at the end of every callback. Whenever we call Update() in one of the event handlers the OnFinish() method will automatically load the updated records and send them to the client side.

Employee Filter

We will use a simple drop-down list to filter the timesheet data by employee:

Public Class HomeController
Inherits Controller
Public Function Index() As ActionResult
Dim dc As New TimesheetDataContext()
ViewBag.Employees = From e In dc.Employees _
Order By e.EmployeeName _
Select e
Return View()
End Function
End Class

The selected employee number will be stored in the ClientState. This property is synchronized with the server during every callback so we can use it to filter the data on the server side:

Business Hours

The current view displays 24 hours in each row. Normally, business hours only take 8 hours. In such case a large part (2/3) of the timesheet is mostly empty so we will add an option to hide the non-business hours.

ASP.NET MVC 5 application for hotel room booking. It keeps track of the rooms and reservations, showing the available slots, reservation and payment status. Drag and drop reservation scheduling is supported.