QCalendar
v5.0.0-rc.0
QCalendarResource
Loading QCalendarResource API...

Children

Children


Custom Height

You can have each resource row have it’s own specific height by including a height key (as a number of pixels, without the px) in each resource object. For example:

;[
  { id: '1', name: 'John', height: 20 },
  {
    id: '2',
    name: 'Board Room',
    height: 40,
    expanded: false,
    children: [
      { id: '2.1', name: 'Room-1', height: 20 },
      {
        id: '2.2',
        name: 'Room-2',
        height: 40,
        expanded: false,
        children: [
          { id: '2.2.1', name: 'Partition-A', height: 20 },
          { id: '2.2.2', name: 'Partition-B', height: 20 },
          { id: '2.2.2', name: 'Partition-C', height: 20 },
        ],
      },
    ],
  },
  { id: '3', name: 'Mary' },
  { id: '4', name: 'Susan' },
  { id: '5', name: 'Olivia' },
]

TIP

If the resource-min-height is more than your custom height, then you won’t see the custom height work. Either set resource-min-height to a lower value or to 0.

Custom Height


Dark

This will only make sense if your browser is currently in light mode.

Dark


Disabled Days

The example anchors its date to a visible week. The first example disables individual days with date strings. The second example uses the object form with from, to, color, and textColor to create a reservation-style disabled range.

Disabled Days


Focusable Hoverable

Focusable Hoverable


Hour 24 Format

Hour 24 Format


Modify Intervals

Using the proerties interval-minutes, interval-start and interval-count, you can control how the calendar looks in terms of the range of intervals.

This has been a difficult concept for some to grasp.

Basically, think of a base interval as 1, which is 60 minutes. To display a full day, the interval count would be set to 24. Say you want the calendar to start at 06:00 in the morning, so you set interval start to 6. What happens now, is the intervals start at 6am, but the last 6 intervals got pushed into the next day. In this case, you must remove 6 from the count, thereby making interval count 18 (24 - 6).

Now, we change interval minutes to 15 (for 15 minute segmented intervals). That means, there are 4 times the number of intervals to deal with for each hour. A full day would then be 96 (24h x 4). Starting at 06:00 means interval start would be 24 (6h * 4), which also means we need to remove that number off the end to prevent bleed-over onto the next day. The interval count then becomes 72 (96 - 24).

Modify Intervals


No Sticky

No Sticky


Slot - Head Resources

Slot - Head Resources


Slot - Interval Label

Slot - Interval Label


Slot - Resource Intervals

Slot - Resource Intervals


Slot - Resource Label

Slot - Resource Label


Theme

Theme


Width Height

Width Height