Resource-Scheduling Calendar

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

• http://javascript.daypilot.org/demo/calendar/resources.html

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

• JavaScript Calendar: Reorder and Resize Columns using Drag and Drop
  How to enable drag and drop moving and resizing for resource calendar columns.

• ASP.NET Core Resource Scheduling Calendar (Open-Source)
  How to create a resource scheduling calendar in ASP.NET Core that displays resources as columns. Add more UI features, such as free/busy highlighting, next/previous date-changing buttons and a modal dialog for editing event details.

• Spring Boot Resource-Scheduling Calendar (Open Source)
  A Spring Boot application that uses a visual resource-scheduling calendar to display plans for multiple resources side by side.

Open-Source JavaScript Resource Calendar Tutorial

• JavaScript Resource Calendar Tutorial - PHP/MySQL (Open-Source)
  How to use the JavaScript resource calendar in connection with a PHP backend and MySQL database.

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

• Angular Resource Calendar Tutorial (Open-Source)

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, { useState, useRef } from 'react';
import { DayPilotCalendar } from "daypilot-pro-react";

const Calendar = () => {
  const [config, setConfig] = useState({
    startDate: "2024-07-22",
    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: "2024-07-22T10:00:00", end: "2024-07-22T14:00:00", resource: "R2" }
    ]
  });

  const calendarRef = useRef();

  return (
    <div>
      <DayPilotCalendar
        {...config}
        ref={calendarRef}
      />
    </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.

React Scheduler with a Vertical Timeline

The React Scheduler with a Vertical Timeline tutorial shows how to configure the vertical timeline (scale, duration, cell size).

Open-Source React Resource Calendar Tutorial

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

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:

• Vue Resource Calendar (Open-Source)

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

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

@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)
  }
})

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

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