RoomCalendar

Timeline of rooms by day showing booking bars; each booking has a start day index, nights and guest name. The size prop (xs, sm, md, lg, xl) scales padding, text and avatar size.

Jump to API reference

Import

Vue

import { UiRoomCalendar } from '@ziyarago/ui/vue'

14 days

1234567891011121314101102201202

Vue

<UiRoomCalendar
  :days="14"
  :rooms="[{ no: '101', bookings: [{ from: 1, nights: 4, guest: 'Omar Hassan' }, { from: 8, nights: 3, guest: 'Sara Ali' }] }, { no: '102', bookings: [{ from: 0, nights: 6, guest: 'Aisha Rahman' }] }, { no: '201', bookings: [{ from: 4, nights: 7, guest: 'Yusuf Karim' }] }, { no: '202', bookings: [] }]"
 />

Sizes

12345678910101102

Vue

<UiRoomCalendar
  :days="10"
  :rooms="[{ no: '101', bookings: [{ from: 1, nights: 4, guest: 'Omar Hassan' }] }, { no: '102', bookings: [{ from: 0, nights: 6, guest: 'Aisha Rahman' }] }]"
  size="xs"
 />

<UiRoomCalendar
  :days="10"
  :rooms="[{ no: '101', bookings: [{ from: 1, nights: 4, guest: 'Omar Hassan' }] }, { no: '102', bookings: [{ from: 0, nights: 6, guest: 'Aisha Rahman' }] }]"
  size="sm"
 />

<UiRoomCalendar
  :days="10"
  :rooms="[{ no: '101', bookings: [{ from: 1, nights: 4, guest: 'Omar Hassan' }] }, { no: '102', bookings: [{ from: 0, nights: 6, guest: 'Aisha Rahman' }] }]"
  size="md"
 />

<UiRoomCalendar
  :days="10"
  :rooms="[{ no: '101', bookings: [{ from: 1, nights: 4, guest: 'Omar Hassan' }] }, { no: '102', bookings: [{ from: 0, nights: 6, guest: 'Aisha Rahman' }] }]"
  size="lg"
 />

<UiRoomCalendar
  :days="10"
  :rooms="[{ no: '101', bookings: [{ from: 1, nights: 4, guest: 'Omar Hassan' }] }, { no: '102', bookings: [{ from: 0, nights: 6, guest: 'Aisha Rahman' }] }]"
  size="xl"
 />

API reference

Gantt-style occupancy calendar: rooms as rows, days as columns, bookings as bars.

Props

PropType and valuesDefaultDescription

rooms{ no: string; bookings?: { from: number; nights: number; guest: string }[] }[]'[]'Rooms with their bookings; from is the zero-based day index of check-in, nights its length. guest is the cell tooltip.

daysnumber14Number of day columns, labelled 1..days.

sizexssmmdlgxl'md'Scales padding, text and avatars.

Notes

Day headers are plain numbers 1..days; offset them yourself for a month view.