@schedule-x/vue

@schedule-x/vue

This package offers Vue components for the Schedule-X calendar and date picker. For the full documentation, please refer to: https://schedule-x.dev/

Quick start examples

Calendar

<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'

// 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: [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>

Date picker

<script setup lang="ts">
import { SxDatePicker } from '@schedule-x/vue'
import '@schedule-x/theme-default/dist/date-picker.css'
import { ref } from 'vue'

const datePickerModel = ref<string>('2024-07-12')
</script>

<template>
  <div>
    <p id="date-picker-model">{{ datePickerModel }}</p>

    <SxDatePicker ref="datePickerRef" v-model="datePickerModel" />
  </div>
</template>