PageCalendar Pro

Part of Pro. Versions up to 0.10 of the open source package include it under MIT; later releases keep it in Pro.

Calendar and schedule page. Slots: toolbar, grid, mini, details.

Jump to API reference

Import

Vue
import { UiPageCalendar } from '@ziyarago/ui-pro/vue'

Default

Calendar and schedule

Section

Toolbar slot
Event grid slot
Mini calendar slot
Event details slot
Vue
<UiPageCalendar title="Calendar and schedule" subtitle="Section">
  <template #toolbar>Toolbar slot</template>
  <template #grid>Event grid slot</template>
  <template #mini>Mini calendar slot</template>
  <template #details>Event details slot</template>
</UiPageCalendar>

API reference

Calendar template: view switch, time grid, mini calendar and event details.

Props

PropType and valuesDefaultDescription
titlestring—Page heading. The built-in header renders only when title is set and the header slot is empty.
subtitlestring—Caption under the heading.
crumbs{ label: string; href?: string }[]—Breadcrumb trail above the title.

Slots

Vue: named slots. React: a prop with the same name; default is children.

headerCustom page header; replaces the built-in title/subtitle/crumbs header.
actionsButtons on the right of the built-in header. With a title they sit beside it; without a title they render alone, right-aligned (unless the header slot is filled).
toolbarSegmentedControl, Button, IconButton.
gridTime grid with events; Card with custom grid, or CalendarView for the month.
miniMonth picker; Calendar.
detailsSelected event; Card, Descriptions, Avatar, Button.

Notes

  • Place inside AppShell; fill only the slots you need.
  • The grid sits beside the mini calendar and details; they stack under 860 px.