javascript html5 resource calendar columns rooms

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).

Advanced features available in the Pro version:

  • 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.
  • The resource calendar columns can have different widths (specified per column).
  • You can move a column to a different position in the hierarchy using drag and drop. This way, you can change the resource group or reorder the columns.
  • You can change the columnn width using drag and drop.
  • Use the all-day event area as a queue of tasks that can be scheduled for a specific time of day using drag and drop.
  • The resource calendar can display a large number of columns and load many events thanks to the progressive rendering optimization.

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)

The open-source DayPilot Lite (JavaScript, Angular, React, Vue) can display a flat list of resources as columns since version 2022.2.384.

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.list = [];

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.list.push({start: day, name: day.toString("dddd MMMM d, yyyy")});
}

JavaScript Tutorials

Open-Source JavaScript Resource Calendar Tutorial

javascript resource calendar tutorial php mysql open source

Angular Resource Calendar

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

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: "Resource 1", id: "R1"},
      {name: "Resource 2", id: "R2"},
      {name: "Resource 3", id: "R3"},
      {name: "Resource 4", id: "R4"},
      {name: "Resource 5", id: "R5"},
      {name: "Resource 6", id: "R6"},
      {name: "Resource 7", id: "R7"},
      {name: "Resource 8", id: "R8"}
    ]
  };
}

In the Pro version, you can display a resource calendar with a hierarchy of column headers.

Angular 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.

Open-Source React Resource Calendar Tutorial

react resource calendar open source editable columns

See the React Resource Calendar with Editable Columns (Open-Source) tutorial to learn how to create a scheduling application for multiple groups of resources (locations, people, tools).

Vue Resource Calendar

The Vue calendar component will display a resource calendar if you add viewType: "Resources" to the calendarConfig object.

The resources defined using the columns property will be displayed as columns.

<template>
  <DayPilotCalendar id="dp" :config="calendarConfig" ref="calendar" />
</template>

<script>
import {DayPilot, DayPilotCalendar} from 'daypilot-pro-vue'

export default {
  name: 'ResourceCalendar',
  data: function() {
    return {
      calendarConfig: {
        viewType: "Resources",
        startDate: "2022-08-01",
        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"},
          {name: "Resource 6", id: "R6"},
        ]
      },
    }
  },
  components: {
    DayPilotCalendar,
  },
  computed: {
    // DayPilot.Calendar object - https://api.daypilot.org/daypilot-calendar-class/
    calendar() {
      return this.$refs.calendar.control;
    },
  },
  methods: {
    loadEvents() {
      // placeholder for an HTTP call
      const events = [
        / ...
      ];
      this.calendar.update({events});
    },
  },
  mounted() {
    this.loadEvents();
  }
}
</script>

Vue Resource Calendar Tutorial

vue resource calendar open source

The resource calendar is also supported in the open-source version of the Vue calendar. See the following tutorial to learn more about adding the component to your Vue application:

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";
    }
  }
}