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 calendar = new DayPilot.Calendar("calendar", {
  viewType: "Resources",
  // ...
});
calendar.init();

const app = {
  init() {
    const columns = [
      { 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" },
    ];
    const events = [
      {
        start: "2026-03-25T12:00:00",
        end: "2026-03-25T14:00:00",
        id: "1",
        text: "Event 1",
        resource: "B",
      },
      {
        start: "2026-03-25T15:00:00",
        end: "2026-03-25T17:00:00",
        id: "2",
        text: "Event 2",
        resource: "C",
      },
    ];
    calendar.update({columns, events});
  },
};
app.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):

const calendar = new DayPilot.Calendar("calendar", {
  viewType: "Resources",
  // ...
});
calendar.init();

const app = {
  init() {
    const columns = [];

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

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

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

    calendar.update({ columns });
  },
};
app.init();

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: "2026-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 the columns attribute.

import React, { useState, useEffect } from 'react';
import { DayPilotCalendar } from 'daypilot-pro-react';

const Calendar = () => {
  const [calendar, setCalendar] = useState();
  const [startDate, setStartDate] = useState(DayPilot.Date.today());
  const [events, setEvents] = useState([]);
  const [columns, setColumns] = useState([]);

  useEffect(() => {
    const columnData = [
      { 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' },
    ];
    setColumns(columnData);

    const eventData = [
      {
        id: 1,
        text: 'Event 1',
        start: '2026-07-22T10:00:00',
        end: '2026-07-22T14:00:00',
        resource: 'R2',
      },
    ];

    setEvents(eventData);
  }, []);

  return (
    <div>
      <DayPilotCalendar
        viewType={'Resources'}
        startDate={startDate}
        columns={columns}
        events={events}
        controlRef={setCalendar}
      />
    </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" prop to the <DayPilotCalendar> tag.

The resources defined using the columns ref variable will be displayed as columns.

<template>
  <DayPilotCalendar 
    :viewType="'Resources'"
    :columns="columns"
    :events="events"
    :startDate="startDate"
    ref="calendarRef" />
</template>

<script setup>
import { ref, reactive, computed, onMounted } from 'vue'
import { DayPilot, DayPilotCalendar } from 'daypilot-pro-vue'

const calendarRef = ref(null)
const columns = ref([])
const events = ref([])
const startDate = ref(DayPilot.Date.today())

const loadEvents = () => {
  events.value = [
    // ...
  ]
}

const loadResources = () => {
  columns.value = [
    { 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" },
  ]
}

onMounted(() => {
  loadResources()
  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)

Vue Scheduler with Vertical Timeline

How to use the Vue Calendar component to create a scheduler UI with resources displayed as columns and a vertical timeline:

• Vue Scheduler with Vertical Timeline

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