html5-javascript-resource-calendar-columns.png

In the resource calendar mode, the calendar component shows custom columns as specified using columns property.

  • You can show resources instead of days on the horizontal axis.
  • You can show a 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 header hierarchy
  • Use fixed column width to add a horizontal scrollbar when displaying a large number of resources.

Each column has the following properties:

  • name (visible in the column title)
  • id (the column resource id)
  • start (the column date; if the date isn't specified, the column will use the startDate value)

JavaScript Resource Calendar

Calendar with resources as columns

In order to display the events in the correct column you need to specify the resource for each event using the resource property.

const dp = new DayPilot.Calendar("dp");
dp.viewType = "Resources";
dp.columns.list = [
  { name: "Meeting Room A", id: "A"},
  { name: "Meeting Room B", id: "B" },
  { name: "Meeting Room C", id: "C" },
  { name: "Meeting Room D", id: "D" },
  { name: "Meeting Room E", id: "E" },
  { name: "Meeting Room F", id: "F" },
];
dp.events.list = [
  {
    start: "2022-03-25T12:00:00",
    end: "2022-03-25T14:00:00",
    id: "1",
    text: "Event 1",
    resource: "B"
  },
  {
    start: "2022-03-25T15:00:00",
    end: "2022-03-25T17:00:00",
    id: "2",
    text: "Event 2",
    resource: "C"
  }
];
dp.init();

JavaScript Resource Calendar Demo

Calendar with a custom set of days

You can also use the resources view to display a custom set of days (e.g. 2 weeks without weekends):

dp.viewType = "Resources";
dp.columns = [];

var first = DayPilot.Date.today().firstDayOfWeek();

for (var i = 0; i < 14; i++) {
  var day = first.addDays(i);
  var dayOfWeek = day.getDayOfWeek();

  // skip weekends
  if (dayOfWeek === 0 || dayOfWeek === 6) {
    continue;
  }
  dp.columns.push({start: day, name: day.toString("dddd MMMM d, yyyy")});
}

Angular Resource Calendar

In the Angular calendar component, you can configure the resource calendar mode using viewType and columns properties of the [config] object.

The following example displays a resource calendar with a hierarchy of column headers:

import {Component} from "@angular/core";
import {DayPilot, DayPilotCalendarComponent} from "daypilot-pro-angular";

@Component({
  selector: 'calendar-component',
  template: `<daypilot-calendar [config]="config"></daypilot-calendar>`,
  styles: [``]
})
export class CalendarComponent implements AfterViewInit {

  config: DayPilot.CalendarConfig = {
    viewType: "Resources",
    startDate: "2021-10-01",
    headerLevels: 2,
    columns: any[] = [
      { name: "Group A", id: "GA", children: [
          { name: "Resource 1", id: "R1"},
          { name: "Resource 2", id: "R2"},
          { name: "Resource 3", id: "R3"},
          { name: "Resource 4", id: "R4"}
        ]},
      { name: "Group B", id: "GB", children: [
          { name: "Resource 5", id: "R5"},
          { name: "Resource 6", id: "R6"},
          { name: "Resource 7", id: "R7"},
          { name: "Resource 8", id: "R8"}
        ]}
    ]
  };
}

Tutorial:

React Resource Calendar

You can switch the React calendar component to resources mode by adding viewType={"Resources"} to the component attributes. You can specify the resources using columns attribute.

import React, {Component} from 'react';
import {DayPilot, DayPilotCalendar} from "daypilot-pro-react";

class Calendar extends Component {

  constructor(props) {
    super(props);
    this.state = {
      startDate: "2022-07-12",
      viewType: "Resources",
      columns: [
        { name: "Resource 1", id: "R1"},
        { name: "Resource 2", id: "R2"},
        { name: "Resource 3", id: "R3"},
        { name: "Resource 4", id: "R4"},
        { name: "Resource 5", id: "R5"}
      ],
      events: [
        { id: 1, text: "Event 1", start: "2022-07-22T10:00:00", end: "2022-07-22T14:00:00", resource: "R2" }
      ]
    };
  }

  render() {
    const {...config} = this.state;
    return (
      <div>
        <DayPilotCalendar
          {...config}
          ref={component => {
            this.calendar = component && component.control;
          }}
        />
      </div>
    );
  }
}

export default Calendar;

React Resource Calendar Tutorial

The React Resource Calendar tutorial explores the display options, including a view with 50 columns, a view with columns arranged into groups and a resources/days view.

ASP.NET WebForms

In order to display the events in the correct column you need to specify the resource for each event (DataColumnField).

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"
        DataIdField="Id" 
        ...
        >
        <Columns>
            <DayPilot:Column Name="Meeting Room A" Value="A" Date="2021-12-31" />
            <DayPilot:Column Name="Meeting Room B" Value="B" Date="2021-12-31" />
            <DayPilot:Column Name="Meeting Room C" Value="C" Date="2021-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);
  }
}

ASP.NET MVC

In order to display the events in the correct column you need to specify the resource for each event (DataResourceField).

Example 1: Manually setting the columns in the view

@Html.DayPilotCalendar("dpc", new DayPilotCalendarConfig
{
   BackendUrl = ResolveUrl("~/Calendar/Backend"),
   ViewType = DayPilot.Web.Mvc.Enums.Calendar.ViewType.Resources,
   Columns = new ColumnCollection
  {
    new Column("Column A", "A", DateTime.Today),
    new Column("Column B", "B", DateTime.Today)
  }
})

Example 2: Generating the columns in the backend controller 

View

@Html.DayPilotCalendar("dpc", new DayPilotCalendarConfig
{
   BackendUrl = ResolveUrl("~/Calendar/Backend"),
   ViewType = DayPilot.Web.Mvc.Enums.Calendar.ViewType.Resources
})

Controller

public class CalendarController : Controller
{
  public ActionResult Backend()
  {
    return new Dpc().CallBack(this);
  }

  public class Dpc : DayPilotCalendar
  {

    protected override void OnInit(InitArgs initArgs)
    {
      UpdateWithMessage("Welcome!", CallBackUpdateType.Full);

      Columns.Clear();
      Columns.Add("Column A", "A", DateTime.Today);
      Columns.Add("Column B", "B", DateTime.Today);
        
    }

    protected override void OnFinish()
    {
      // only load the data if an update was requested by an Update() call
      if (UpdateType == CallBackUpdateType.None)
      {
        return;
      }

      // this select is a really bad example, no where clause
      Events = new EventManager(Controller).Data.AsEnumerable();

      DataStartField = "start";
      DataEndField = "end";
      DataTextField = "name";
      DataIdField = "id";
      DataResourceField = "resource";
    }
  }
}