Features
- DayPilot Navigator showing 3 months
- CSS theme applied to DayPilot Navigator
- CSS theme applied to DayPilot Calendar
- Automatic Navigator - Calendar binding
Requirements
- .NET Framework 2.0 or higher
- Visual Studio 2017
Includes
- DayPilot Pro for ASP.NET WebForms 8.4 (trial version)
1. Setting the Bound Control
Assign the ID of the DayPilot ASP.NET Calendar to DayPilotNavigator.BoundDayPilotID property.
Supported target controls:
2. Updating the Calendar StartDate
Handle the DayPilotCalendar.Command event and watch for e.Command == "navigate". The selected start/end range is stored in e.Data:
DateTime start = (DateTime) e.Data["start"]; DateTime end = (DateTime) e.Data["end"];
You should set the new StartDate and reload the events - DataBind(). Don't forget to call full Update() to redraw the Calendar on the client side:
C#
protected void DayPilotCalendar1_Command(object sender, DayPilot.Web.Ui.Events.CommandEventArgs e) { switch (e.Command) { case "navigate": DateTime start = (DateTime) e.Data["start"]; DayPilotCalendar1.StartDate = start; DayPilotCalendar1.DataSource = dbGetEvents(DayPilotCalendar1.StartDate, DayPilotCalendar1.Days); DayPilotCalendar1.DataBind(); DayPilotCalendar1.Update(DayPilot.Web.Ui.Enums.CallBackUpdateType.Full); break; } }
VB.NET
Protected Sub DayPilotCalendar1_Command(ByVal sender As Object, ByVal e As DayPilot.Web.Ui.Events.CommandEventArgs) Handles DayPilotCalendar1.Command Select Case e.Command Case "navigate" Dim start As DateTime = e.Data("start") DayPilotCalendar1.StartDate = start DayPilotCalendar1.DataSource = dbGetEvents(DayPilotCalendar1.StartDate, DayPilotCalendar1.Days) DayPilotCalendar1.DataBind() DayPilotCalendar1.Update(DayPilot.Web.Ui.Enums.CallBackUpdateType.Full) Exit Select End Select End Sub
The dbGetEvents method loads the event data from a database:
C#
private DataTable dbGetEvents(DateTime start, int days) { SQLiteDataAdapter da = new SQLiteDataAdapter("SELECT [id], [name], [eventstart], [eventend] FROM [event] WHERE NOT (([eventend] <= @start) OR ([eventstart] >= @end))", ConfigurationManager.ConnectionStrings["db"].ConnectionString); da.SelectCommand.Parameters.AddWithValue("start", start); da.SelectCommand.Parameters.AddWithValue("end", start.AddDays(days)); DataTable dt = new DataTable(); da.Fill(dt); return dt; }
VB.NET
Private Function dbGetEvents(ByVal start As DateTime, ByVal days As Integer) As DataTable Dim da As New Data.SQLite.SQLiteDataAdapter("SELECT [id], [name], [eventstart], [eventend] FROM [event] WHERE NOT (([eventend] <= @start) OR ([eventstart] >= @end))", ConfigurationManager.ConnectionStrings("db").ConnectionString) da.SelectCommand.Parameters.AddWithValue("start", start) da.SelectCommand.Parameters.AddWithValue("end", start.AddDays(days)) Dim dt As New DataTable() da.Fill(dt) Return dt End Function
3. Free/busy information
It is possible to show free/busy information in the DayPilot Navigator.
Steps:
1. Set the control properties:
- VisibleRangeChangedHandling="CallBack"
- DataStartField="eventstart"
- DataEndField="eventend".
2. Handle VisibleRangeChanged event:
C#
protected void DayPilotNavigator1_VisibleRangeChanged(object sender, DayPilot.Web.Ui.Events.Navigator.VisibleRangeChangedEventArgs e) { int days = (int)(DayPilotNavigator1.VisibleEnd - DayPilotNavigator1.VisibleStart).TotalDays; DayPilotNavigator1.DataSource = dbGetEvents(DayPilotNavigator1.VisibleStart, days); DayPilotNavigator1.DataBind(); }
VB.NET
Protected Sub DayPilotNavigator1_VisibleRangeChanged(ByVal sender As Object, ByVal e As DayPilot.Web.Ui.Events.Navigator.VisibleRangeChangedEventArgs) Handles DayPilotNavigator1.VisibleRangeChanged Dim days As Integer = (DayPilotNavigator1.VisibleEnd - DayPilotNavigator1.VisibleStart).TotalDays DayPilotNavigator1.DataSource = dbGetEvents(DayPilotNavigator1.VisibleStart, days) DayPilotNavigator1.DataBind() End Sub
3. The font of the busy day is defined using navigator_silver_busy CSS class (CssClassPrefix="navigator_silver_")..
4. Database
In this tutorial, we are using SQLite embedded database and SQLite ADO.NET Provider to limit the external dependencies (both the ADO.NET driver and the database engine are in a single file - System.Data.SQLite.DLL - in Bin directory).
The database file (daypilot.sqlite) can be found in App_Data directory. The database structure can be examined using SQLite Administrator.
The database contains a single table with the following structure:
CREATE TABLE event ( id VARCHAR(50), name VARCHAR(50), eventstart DATETIME, eventend DATETIME );