Features

  • A date picker (DayPilot Navigator control) showing 3 months

  • CSS theme applied to DayPilot Navigator

  • CSS theme applied to DayPilot Calendar

  • Automatic Navigator-Calendar binding

Requirements

Includes

1. Setting the Bound Control

Assign the ID of the DayPilot ASP.NET Calendar to DayPilotNavigator.BoundDayPilotID property.

navigator properties 309x250

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.

navigator busy 142x161red

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.

sqlite600x371

The database contains a single table with the following structure:

CREATE TABLE event (
  id VARCHAR(50),
  name VARCHAR(50),
  eventstart DATETIME,
  eventend DATETIME
);