Resource Timeline View Not Rendering Correctly

[bartek3xe]

I have a problem where the Resource Timeline view does not render as expected. The calendar fails to display the resources and events.

I tried:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@event-calendar/[email protected]/event-calendar.min.css">
<script src="https://cdn.jsdelivr.net/npm/@event-calendar/[email protected]/event-calendar.min.js"></script>

or:

npm install @event-calendar/core @event-calendar/resource-timeline

import EventCalendar from '@event-calendar/core';
import ResourceTimeline from '@event-calendar/resource-timeline';
import '@event-calendar/core/index.css';

then:

<div id="reservationsCalendar" style="width: 100%; height: 600px;"></div>

js:

document.addEventListener('DOMContentLoaded', function () {
    const resources = [
        { id: '1', title: 'Yacht 1' },
        { id: '2', title: 'Yacht 2' },
        { id: '3', title: 'Yacht 3' },
    ];

    const events = [
        { id: '1', title: 'Reservation 1', start: '2024-12-15', end: '2024-12-17', resourceId: '1' },
        { id: '2', title: 'Reservation 2', start: '2024-12-16', end: '2024-12-18', resourceId: '2' },
        { id: '3', title: 'Reservation 3', start: '2024-12-18', end: '2024-12-20', resourceId: '3' },
    ];

    new EventCalendar(document.getElementById('reservationsCalendar'), {
        view: 'resourceTimeline',
        resources: resources,
        events: events,
        timeline: {
            slotDuration: '1 day',
            slotDateFormat: { weekday: 'short', day: 'numeric', month: 'short' },
        },
        resourceLabelContent: (info) => info.resource.title,
    });
});

The calendar's toolbar renders, displaying the date range and navigation buttons, but the main calendar area is empty. The resources and events do not appear.

DOM:

<div id="reservationsCalendar" style="width: 100%; height: 600px;">
  <div class="ec" role="table">
    <nav class="ec-toolbar">
      <div class="ec-start">
        <h2 class="ec-title">Dec 15&thinsp;–&thinsp;21, 2024</h2>
      </div>
      <div class="ec-center"></div>
      <div class="ec-end">
        <button class="ec-button ec-today" disabled>today</button>
        <div class="ec-button-group">
          <button class="ec-button ec-prev">
            <i class="ec-icon ec-prev"></i>
          </button>
          <button class="ec-button ec-next">
            <i class="ec-icon ec-next"></i>
          </button>
        </div>
      </div>
    </nav>
  </div>
</div>

Console Output:
There are no error messages in the browser's console.

Network Requests:
All necessary CSS and JS files are loaded successfully, as verified in the Network tab of the developer tools.

---

Am I doing something wrong? How can I resolve this?

[bartek3xe]

The previous configuration was incorrect; the correct view for me is resourceTimelineWeek. My mistake.