Docs
Frameworks
Vue component

file_type_vue Vue component

This page offers documentation for using the Schedule-X calendar in Vue. For general documentation on configuring the calendar, refer to the rest of the 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

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,
  createViewDay,
  createViewMonthAgenda,
  createViewMonthGrid,
  createViewWeek,
} from '@schedule-x/calendar'
import '@schedule-x/theme-default/dist/index.css'
 
// Do not use a ref here, as the calendar instance is not reactive, and doing so might cause issues
// For updating events, use the events service plugin
const calendarApp = createCalendar({
  selectedDate: '2023-12-19',
  views: [
    createViewDay(),
    createViewWeek(),
    createViewMonthGrid(),
    createViewMonthAgenda(),
  ],
  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

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.

Styles

The Schedule-X calendar is a responsive component. To achieve this, it cannot be delivered with a fixed height or width of its own. You need to define the height and width of the wrapping element .sx-vue-calendar-wrapper according to your needs. For a regular desktop application, something like this might do the trick for you:

.sx-vue-calendar-wrapper {
  width: 1200px;
  max-width: 100vw;
  height: 800px;
  max-height: 90vh;
}

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 nameDescriptionProps
timeGridEventThe component for timed events used in the week- and day viewscalendarEvent
dateGridEventThe component for all-day events used in the week- and day viewscalendarEvent
monthGridEventThe component for events used in the month grid viewcalendarEvent, hasStartDate
monthAgendaEventThe component for events used in the month agenda viewcalendarEvent
eventModalThe component for the modal that opens when clicking an eventcalendarEvent
headerContentLeftPrependPrepends content to the left part of the header
headerContentLeftAppendAppends content to the left part of the header
headerContentRightPrependPrepends content to the right part of the header
headerContentRightAppendAppends content to the right part of the header
headerContentReplaces the whole header content

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, createViewWeek } from '@schedule-x/calendar'
import CustomTimeGridEvent from './some-path/CustomTimeGridEvent.vue'
import '@schedule-x/theme-default/dist/index.css'
 
const viewWeek = createViewWeek()
 
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)