Calendar: View Types

calendar-viewtype.png

The ViewType property supports 5 modes:

  • Day (one day)
  • Days (custom number of subsequent days)
  • Resources (custom columns, allows showing resources or any set of days)
  • WorkWeek (five days of work week)
  • Week (seven days of week)

ViewType="Day"

calendar-day.png

This mode shows one day (Days property is automatically set to 1).

ViewType="WorkWeek"

calendar-work-week.png

This mode shows a work week.

The StartDate property is automatically set to the past Monday. The Days property is set to 5.

ViewType="Week"

calendar-week.png

This mode shows a week.

The StartDate property is set to the first day of week. The first day of week is determined using WeekStarts property. The Days property is set to 7.

ViewType="Days"

calendar-days.png

This mode shows a custom number of days.

Both StartDate and Days properties must be set manually.

ViewType="Resources" (Resources View)

calendar-resources.png

This mode shows custom columns as specified using Columns property.

  • You can show resources instead of days on the horizontal axis.
  • You can show discontinuous sequence of days on the horizontal axis (e.g. Monday, Wednesday, Friday).
  • You can show a hierarchy of columns on the horizontal axis. See also Column Headers Hierarchy

Each Column has the following properties:

  • Name (visible in the column title)
  • Date (the column day)
  • Value (the column resource id)

Example 1

The Columns can be defined in the .aspx file.

<DayPilot:DayPilotCalendar ID="DayPilotCalendar1" runat="server" 
        ViewType="Resources"
        DataColumnField="Column" 
        DataEndField="End" 
        DataStartField="Start" 
        DataTextField="Name"
        DataValueField="Id" 
        ...
        >
        <Columns>
            <DayPilot:Column Name="Meeting Room A" Value="A" Date="2011-12-31" />
            <DayPilot:Column Name="Meeting Room B" Value="B" Date="2011-12-31" />
            <DayPilot:Column Name="Meeting Room C" Value="C" Date="2011-12-31" />
        </Columns>
    </DayPilot:DayPilotCalendar>

Example 2

You can also define the Columns in the code behind.

    protected void Page_Load(object sender, EventArgs e)
    {
        defineColumns();

        if (!IsPostBack)
        {
            DataBind();
        }
    }

    private void defineColumns()
    {
        DayPilotCalendar1.Columns.Clear();

        DateTime first = DayPilotCalendar1.StartDate;

        string[] resources = new string[] {"A", "B", "C"};

        foreach (string res in resources)
        {

            Column c = new Column(res, res); // using the same Name and Value
            c.Date = DateTime.Today;
            DayPilotCalendar1.Columns.Add(c);
        }
    }

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