Vue component
This page offers documentation for the Vue-specific usage of the Schedule-X calendar. For general documentation on
configuring and interacting with the calendar, refer to the rest of the calendar documentation. If you are using
Schedule-X with Nuxt, all code examples below should work, but everything needs to be wrapped in a
<ClientOnly>
component.
Installing
npm install @schedule-x/vue @schedule-x/theme-default
This installs the Vue component and the default theme. If you're using a package manager that does not automatically
download peer dependencies, you will additionally need to install @schedule-x/calendar
, @preact/signals
and
preact
. This is for example the case for yarn and npm < v7.
Basic usage
Example
<script setup>
import { ScheduleXCalendar } from '@schedule-x/vue'
import {
createCalendar,
viewDay,
viewWeek,
viewMonthGrid,
viewMonthAgenda,
} from '@schedule-x/calendar'
import '@schedule-x/theme-default/dist/index.css'
const calendarApp = createCalendar({
selectedDate: '2023-12-19',
views: [viewDay, viewWeek, viewMonthGrid, viewMonthAgenda],
defaultView: viewWeek.name,
events: [
{
id: 1,
title: 'Event 1',
start: '2023-12-19',
end: '2023-12-19',
},
{
id: 2,
title: 'Event 2',
start: '2023-12-20 12:00',
end: '2023-12-20 13:00',
},
],
})
</script>
<template>
<div>
<ScheduleXCalendar :calendar-app="calendarApp" />
</div>
</template>
Explanation
Dependencies
From @schedule-x/vue
you need to import the ScheduleXCalendar
component. From @schedule-x/calendar
you need to
import the views you want to use and the createCalendar
function. Lastly, from @schedule-x/theme-default
you
import the default theme.
The calendar instance
The createCalendar
function takes a configuration object as its single argument,
and returns an instance of the calendar app. The calendar instance contains some methods that you can use to
interact with the calendar events and toggle between light and dark mode. For more on this, refer to the rest of the
calendar docs.
The component
The ScheduleXCalendar
component then takes the calendar instance as a prop calendar-app
and renders the calendar
for you. This means you should not call the render
method of the calendar instance yourself, as shown in other
examples in the docs.
Slots & custom components
The Schedule-X calendar is built with customization in mind. Using Vue slots or custom components, you can take control over the rendering in parts of the UI. Currently, these components can be customized:
Slot / Component name | Description | Props |
---|---|---|
timeGridEvent | The component for timed events used in the week- and day views | calendarEvent |
dateGridEvent | The component for all-day events used in the week- and day views | calendarEvent |
monthGridEvent | The component for events used in the month grid view | calendarEvent , hasStartDate |
monthAgendaEvent | The component for events used in the month agenda view | calendarEvent |
eventModal | The component for the modal that opens when clicking an event | calendarEvent |
An example of how to use these components can be found here: https://github.com/schedule-x/vue-example/blob/main/src/App.vue (opens in a new tab)
Slot example
<template>
<ScheduleXCalendar :calendar-app="calendarApp">
<template #timeGridEvent="{ calendarEvent }">
<div class="event">
{{ calendarEvent.title }}
</div>
</template>
</ScheduleXCalendar>
</template>
Custom component example
<script setup>
import { ScheduleXCalendar } from '@schedule-x/vue'
import { createCalendar, viewWeek } from '@schedule-x/calendar'
import CustomTimeGridEvent from './some-path/CustomTimeGridEvent.vue'
import '@schedule-x/theme-default/dist/index.css'
const calendarApp = createCalendar({
views: [viewWeek],
defaultView: viewWeek.name,
events: [
{
id: 2,
title: 'Event 2',
start: '2023-12-20 12:00',
end: '2023-12-20 13:00',
},
],
})
const customComponents = {
timeGridEvent: CustomTimeGridEvent,
}
</script>
<template>
<div>
<ScheduleXCalendar
:calendar-app="calendarApp"
:custom-components="customComponents"
/>
</div>
</template>
Links
Vue example: https://github.com/schedule-x/vue-example (opens in a new tab)
Nuxt example: https://github.com/schedule-x/nuxt-example (opens in a new tab)