### Install Schedule-X Calendar and Theme Source: https://schedule-x.dev/docs/calendar Install the calendar, default theme, and temporal-polyfill using npm. ```bash npm i @schedule-x/calendar @schedule-x/theme-default temporal-polyfill ``` -------------------------------- ### Setup Calendar Instance Source: https://schedule-x.dev/docs/calendar Create a calendar instance with views, events, and render it to a DOM element. Uses Temporal Polyfill for event times. ```javascript import { createCalendar, createViewMonthGrid } from '@schedule-x/calendar' import '@schedule-x/theme-default/dist/index.css' import 'temporal-polyfill/global' const calendar = createCalendar({ views: [createViewMonthGrid()], events: [ { id: 1, title: 'Coffee with John', start: Temporal.ZonedDateTime.from('2023-12-04T10:05:00+01:00[Europe/Berlin]'), end: Temporal.ZonedDateTime.from('2023-12-04T10:35:00+01:00[Europe/Berlin]') }, ], }) calendar.render(document.getElementById('calendar')) ``` -------------------------------- ### Usage over CDN Source: https://schedule-x.dev/docs/calendar Full HTML example for using Schedule-X Calendar via CDN, including all necessary script and link tags, and basic setup. ```html

``` -------------------------------- ### Install Premium Package Source: https://schedule-x.dev/docs/calendar/installing-premium Command to install a specific premium package using npm. ```bash npm i @sx-premium/interactive-event-modal ``` -------------------------------- ### Installation Source: https://schedule-x.dev/docs/calendar/plugins/resize Install the Resize plugin using npm. ```bash npm i @sx-premium/resize ``` -------------------------------- ### Install the plugin Source: https://schedule-x.dev/docs/calendar/plugins/scheduling-assistant Install the scheduling assistant plugin and its dependencies. ```bash npm install @sx-premium/scheduling-assistant @sx-premium/resource-scheduler @schedule-x/calendar @schedule-x/theme-default ``` -------------------------------- ### Install Draw Plugin Source: https://schedule-x.dev/docs/calendar/plugins/draw Installation command for the premium draw plugin. ```bash npm install @sx-premium/draw ``` -------------------------------- ### Installation Source: https://schedule-x.dev/docs/calendar/plugins/drag-and-drop Install the drag and drop plugin using npm. ```bash npm i @sx-premium/drag-and-drop ``` -------------------------------- ### Install the plugin Source: https://schedule-x.dev/docs/calendar/plugins/drag-to-create Install the drag-to-create plugin using npm. ```bash npm install @sx-premium/drag-to-create ``` -------------------------------- ### npm installation Source: https://schedule-x.dev/docs/frameworks/react Install the necessary Schedule-X packages using npm. ```bash npm install @schedule-x/react @schedule-x/calendar @schedule-x/theme-default @schedule-x/events-service temporal-polyfill ``` -------------------------------- ### CSS for Wrapping Element Source: https://schedule-x.dev/docs/calendar Example CSS for the element that will wrap the calendar, setting its dimensions and responsiveness. ```css #calendar { width: 100%; height: 800px; max-height: 90vh; } ``` -------------------------------- ### Install with npm Source: https://schedule-x.dev/docs/frameworks/vue Install the necessary Schedule-X packages using npm. ```bash npm install @schedule-x/vue @schedule-x/calendar @schedule-x/theme-default temporal-polyfill ``` -------------------------------- ### yarn installation Source: https://schedule-x.dev/docs/frameworks/react Install the necessary Schedule-X packages using yarn. ```bash yarn add @schedule-x/react @schedule-x/calendar @schedule-x/theme-default @schedule-x/events-service @preact/signals preact temporal-polyfill ``` -------------------------------- ### Set Calendar Theme Programmatically Source: https://schedule-x.dev/docs/calendar Demonstrates how to set the calendar theme to 'dark' or 'light' after creation. ```javascript const calendar = createCalendar(/***/) calendar.setTheme('dark') // or calendar.setTheme('light') ``` -------------------------------- ### Install with yarn Source: https://schedule-x.dev/docs/frameworks/vue Install the necessary Schedule-X packages using yarn. ```bash yarn add @schedule-x/vue @schedule-x/calendar @schedule-x/theme-default @preact/signals preact temporal-polyfill ``` -------------------------------- ### Installation Source: https://schedule-x.dev/docs/calendar/plugins/scroll-controller Install the scroll controller plugin using npm. ```bash npm i @schedule-x/scroll-controller ``` -------------------------------- ### All Views Example Source: https://schedule-x.dev/docs/calendar/views This example demonstrates how to create a calendar instance and include all available views: Day, Week Agenda, Month Agenda, Month Grid, Week, and List. ```javascript import { createViewDay, createViewWeekAgenda, createViewMonthAgenda, createViewMonthGrid, createViewWeek, createViewList, createCalendar } from '@schedule-x/calendar' import '@schedule-x/theme-default/dist/index.css' const calendar = createCalendar({ views: [createViewDay(), createViewWeekAgenda(), createViewMonthAgenda(), createViewMonthGrid(), createViewWeek(), createViewList()], events: [], }) calendar.render(document.getElementById('calendar')) ``` -------------------------------- ### Installation Source: https://schedule-x.dev/docs/calendar/plugins/recurrence Install the event recurrence plugin using npm. ```bash npm install @schedule-x/event-recurrence ``` -------------------------------- ### Usage Example Source: https://schedule-x.dev/docs/calendar/plugins/sidebar Example demonstrating how to import and use the sidebar plugin with Schedule-X, including other related plugins and CSS. ```javascript import { createCalendar } from '@schedule-x/calendar' import { createSidebarPlugin, translations as sidebarTranslations } from "@sx-premium/sidebar"; import { createEventsServicePlugin } from "@schedule-x/events-service"; import { createInteractiveEventModal, translations as modalTranslations } from "@sx-premium/interactive-event-modal"; import { createDragToCreatePlugin } from "@sx-premium/drag-to-create"; import { translations, mergeLocales } from '@schedule-x/translations' import '@sx-premium/sidebar/index.css' import '@sx-premium/interactive-event-modal/index.css' import '@schedule-x/theme-default/dist/time-picker.css' const eventsService = createEventsServicePlugin() const interactiveEventModal = createInteractiveEventModal({ eventsService, availablePeople: ['John Doe', 'Jane Doe'], onAddEvent: (event) => { console.log('Event added', event) } }) const sidebar = createSidebarPlugin({ eventsService, // Optional: Should the sidebar be open on render openOnRender: false, // Optional: Which calendars should be active on render activeCalendarIds: ['personal', 'work', 'leisure', 'school'], // Optional: Should there be calendar toggles hasCalendarToggles: true, // Optional: placeholder events for drag-to-create. These can later be updated by calling updatePlaceholderEvents placeholderEvents: [ { title: 'Morning brief', calendarId: 'internal', people: ['John Doe', 'Jane Doe', 'Steve Smith'], }, { title: 'Client demo', calendarId: 'internal', people: ['John Doe', 'Jane Doe'], }, { title: 'Team meeting', calendarId: 'clients', people: ['John Doe', 'Jane Doe', 'Steve Smith'], } ], /** * Optional: Should placeholder events be selectable * If set to true, you can later grab the currently selected placeholder event via sidebar.selectedPlaceholderEvent.value * This can, for example, help your users draw events belonging to different calendars * */ isPlaceholderEventSelectable: true, // Optional: factory function for generating event ids when events are created idFactory: () => uuidv4() // or any other id generator }) // Update placeholder events sidebar.updatePlaceholderEvents([ { title: 'event 1', calendarId: 'internal', } ]) const calendar = createCalendar( { translations: mergeLocales( translations, sidebarTranslations, modalTranslations ), plugins: [ eventsService, sidebar, interactiveEventModal, createDragToCreatePlugin(/* drag-to-create options */) ] // ...config options }, ) calendar.render(document.getElementById('your-calendar-wrapper')) ``` -------------------------------- ### Installation Source: https://schedule-x.dev/docs/calendar/plugins/ical Install the iCalendar plugin using npm. ```shell npm install @schedule-x/ical ``` -------------------------------- ### Install with pnpm Source: https://schedule-x.dev/docs/frameworks/vue Install the necessary Schedule-X packages using pnpm. ```bash pnpm install @schedule-x/vue @schedule-x/calendar @schedule-x/theme-default @preact/signals preact temporal-polyfill ``` -------------------------------- ### pnpm installation Source: https://schedule-x.dev/docs/frameworks/react Install the necessary Schedule-X packages using pnpm. ```bash pnpm install @schedule-x/react @schedule-x/calendar @schedule-x/theme-default @schedule-x/events-service @preact/signals preact temporal-polyfill ``` -------------------------------- ### Full Example Source: https://schedule-x.dev/docs/calendar/plugins/drag-to-create A comprehensive example demonstrating how to integrate and use the drag-to-create plugin with Schedule-X, including event handling and configuration. ```javascript import { createCalendar } from '@schedule-x/calendar' import { createEventsServicePlugin } from "@schedule-x/events-service"; import { createDragToCreatePlugin } from '@sx-premium/drag-to-create' import '@sx-premium/drag-to-create/index.css' import '@schedule-x/theme-default/dist/calendar.css' const onAddEvent = (event) => { console.log('Event added', event) } const dragToCreatePlugin = createDragToCreatePlugin({ onAddEvent, // Optional: add a validation hook. Return false to prevent the event from being added. onBeforeAddEvent: (event, $app) => { // Your validation logic return true }, // Optional: async version of onBeforeAddEvent onBeforeAddEventAsync: async (event, $app) => { // Your async validation logic // Return false to prevent the event from being added. return true } }) const calendar = createCalendar({ plugins: [ createEventsServicePlugin(), dragToCreatePlugin, ], }) const eventPlaceholder = document.getElementById('event-placeholder') eventPlaceholder.addEventListener('dragstart', () => { dragToCreatePlugin.dragToCreate('yourEventId123', { title: '(No title)', calendarId: 'leisure', }) }) calendar.render(document.getElementById('your-calendar-calendar-wrapper')) ``` -------------------------------- ### Installation Source: https://schedule-x.dev/docs/calendar/plugins/timezone-select Install the timezone-select plugin using npm. ```bash npm install @schedule-x/timezone-select ``` -------------------------------- ### Install the resource scheduler Source: https://schedule-x.dev/docs/calendar/resource-scheduler Install the resource scheduler package along with its dependencies. ```bash npm install @sx-premium/resource-scheduler @schedule-x/calendar @schedule-x/translations @schedule-x/theme-default ``` -------------------------------- ### Install the plugin Source: https://schedule-x.dev/docs/calendar/plugins/current-time Install the current time indicator plugin using npm. ```bash npm i @schedule-x/current-time ``` -------------------------------- ### Install Shadcn Theme Source: https://schedule-x.dev/docs/calendar/theme Install the Shadcn theme package using npm. ```bash npm i @schedule-x/theme-shadcn ``` -------------------------------- ### Draw Plugin Usage Example Source: https://schedule-x.dev/docs/calendar/plugins/draw Example demonstrating how to integrate and use the draw plugin with Schedule-X, including event drawing callbacks and configuration. ```javascript import { createCalendar, viewWeek, viewMonthGrid, viewDay, } from '@schedule-x/calendar' import { createDrawPlugin } from "@sx-premium/draw"; const drawPlugin = createDrawPlugin({ onFinishDrawing: (event) => { // do something, like saving the event to the server }, // (Optional) callback that runs on mouseup after drawing an event, before calling onFinishDrawing onBeforeFinishDrawing: (event) => { // do something, like validating the event // return false to remove the event, and true to keep it }, // (Optional) async version of onBeforeFinishDrawing onBeforeFinishDrawingAsync: async (event) => { // do something, like validating the event // return false to remove the event, and true to keep it }, // (Optional) configure the intervals, in minutes, at which a time grid-event can be drawn. Valid values: 15, 30, 60 snapDuration: 30 }) const calendar = createCalendar({ callbacks: { onMouseDownDateTime(dateTime, mouseDownEvent) { drawPlugin.drawTimeGridEvent(dateTime, mouseDownEvent, { title: 'Unknown event' }) }, onMouseDownMonthGridDate(date, _mouseDownEvent) { console.log(_mouseDownEvent) drawPlugin.drawMonthGridEvent(date, { title: 'Unknown event' }) }, onMouseDownDateGridDate(date, mouseDownEvent) { drawPlugin.drawDateGridEvent(date, mouseDownEvent, { title: 'Unknown event' }) } }, views: [viewMonthGrid, viewWeek, viewDay], plugins: [ drawPlugin ] }) ``` -------------------------------- ### Calendar Initialization Source: https://schedule-x.dev/docs/calendar/configuration Example of creating and rendering a calendar instance with a configuration object. ```javascript const calendar = createCalendar(config) calendar.render(document.getElementById('calendar')) ``` -------------------------------- ### Install with npm Source: https://schedule-x.dev/docs/frameworks/svelte Installs the necessary Schedule-X packages and temporal-polyfill using npm. ```bash npm install @schedule-x/svelte @schedule-x/calendar @schedule-x/theme-default temporal-polyfill ``` -------------------------------- ### Usage example Source: https://schedule-x.dev/docs/calendar/plugins/scheduling-assistant Example of how to use the scheduling assistant plugin with Schedule-X calendar. ```javascript import { createCalendar } from '@schedule-x/calendar' import { createHourlyView, createConfig, TimeUnits } from "@sx-premium/resource-scheduler"; import { createSchedulingAssistant } from '@sx-premium/scheduling-assistant' import '@sx-premium/resource-scheduler/index.css' import '@sx-premium/scheduling-assistant/index.css' import '@schedule-x/theme-default/dist/index.css' const rConfig = createConfig() rConfig.initialHours.value = new TimeUnits().getDayHoursBetween( '2025-03-07 08:00', '2025-03-07 19:00' ) rConfig.infiniteScroll.value = false const hourlyView = createHourlyView(rConfig) rConfig.resources.value = [ { id: 'janedoe', label: 'Jane Doe' }, { id: 'johnsmith', label: 'John Smith' }, { id: 'tedmosby', label: 'Ted Mosby' } ] const schedulingAssistant = createSchedulingAssistant({ initialStart: Temporal.ZonedDateTime.from('2025-03-07T10:00:00+09:00[Asia/Tokyo]'), initialEnd: Temporal.ZonedDateTime.from('2025-03-07T12:00:00+09:00[Asia/Tokyo]') }) const calendar = createCalendar({ selectedDate: Temporal.PlainDate.from('2025-03-07'), events: [ { id: 'event1', resourceId: 'janedoe', start: Temporal.ZonedDateTime.from('2025-03-07T09:00:00+09:00[Asia/Tokyo]'), end: Temporal.ZonedDateTime.from('2025-03-07T10:00:00+09:00[Asia/Tokyo]'), title: 'Event 1' }, { id: 'event2', resourceId: 'johnsmith', start: Temporal.ZonedDateTime.from('2025-03-07T10:00:00+09:00[Asia/Tokyo]'), end: Temporal.ZonedDateTime.from('2025-03-07T11:00:00+09:00[Asia/Tokyo]'), title: 'Event 2' }, { id: 'event3', resourceId: 'tedmosby', start: Temporal.ZonedDateTime.from('2025-03-07T11:00:00+09:00[Asia/Tokyo]'), end: Temporal.ZonedDateTime.from('2025-03-07T12:00:00+09:00[Asia/Tokyo]'), title: 'Event 3' }, { id: 'event4', resourceId: 'janedoe', start: Temporal.ZonedDateTime.from('2025-03-07T17:00:00+09:00[Asia/Tokyo]'), end: Temporal.ZonedDateTime.from('2025-03-07T18:00:00+09:00[Asia/Tokyo]'), title: 'Event 4' } ], views: [hourlyView], plugins: [ schedulingAssistant ] }) calendar.render(document.getElementById('your-calendar-wrapper')) ``` -------------------------------- ### yarn Installation Source: https://schedule-x.dev/docs/frameworks/preact Install the Schedule-X Preact component and its dependencies using yarn. ```bash yarn add @schedule-x/preact @schedule-x/calendar @schedule-x/theme-default @preact/signals preact temporal-polyfill ``` -------------------------------- ### Install Calendar Controls Source: https://schedule-x.dev/docs/calendar/plugins/calendar-controls Install the calendar controls plugin using npm. ```bash npm i @schedule-x/calendar-controls ``` -------------------------------- ### Install Event Modal Plugin Source: https://schedule-x.dev/docs/calendar/plugins/event-modal Install the event modal plugin using npm. ```bash npm i @schedule-x/event-modal ``` -------------------------------- ### Install the package Source: https://schedule-x.dev/docs/calendar/time-grid-resource-view Install the time grid resource view package along with the core calendar and default theme. ```bash npm install @sx-premium/time-grid-resource-view @schedule-x/calendar @schedule-x/theme-default ``` -------------------------------- ### pnpm Installation Source: https://schedule-x.dev/docs/frameworks/preact Install the Schedule-X Preact component and its dependencies using pnpm. ```bash pnpm install @schedule-x/preact @schedule-x/calendar @schedule-x/theme-default @preact/signals preact temporal-polyfill ``` -------------------------------- ### npm Installation Source: https://schedule-x.dev/docs/frameworks/preact Install the Schedule-X Preact component and its dependencies using npm. ```bash npm install @schedule-x/preact @schedule-x/calendar @schedule-x/theme-default temporal-polyfill ``` -------------------------------- ### Install Sidebar Plugin Source: https://schedule-x.dev/docs/calendar/plugins/sidebar Command to install the sidebar plugin using npm. ```bash npm install @sx-premium/sidebar ``` -------------------------------- ### npm installation Source: https://schedule-x.dev/docs/frameworks/angular Install the Schedule-X Angular component and its dependencies using npm. ```bash npm install @schedule-x/angular @schedule-x/calendar @schedule-x/theme-default ``` -------------------------------- ### Basic example Source: https://schedule-x.dev/docs/calendar/plugins You can add plugins to the calendar by adding them to the config object. ```javascript import { createCalendar, createViewMonthGrid } from '@schedule-x/calendar' import { createDragAndDropPlugin } from '@sx-premium/drag-and-drop' import '@schedule-x/theme-default/dist/index.css' const calendar = createCalendar({ views: [createViewMonthGrid()], events: [ { id: 1, title: 'Coffee with John', start: '2023-12-04 10:05', end: '2023-12-04 10:35', }, ], plugins: [ createDragAndDropPlugin() ], }) calendar.render(document.getElementById('calendar')) ``` -------------------------------- ### Usage Example Source: https://schedule-x.dev/docs/calendar/plugins/interactive-event-modal Example demonstrating how to import and configure the interactive event modal plugin with Schedule-X calendar. ```typescript import { createCalendar } from '@schedule-x/calendar' import { createEventsServicePlugin, createEventRecurrencePlugin } from "@schedule-x/event-recurrence" import { createInteractiveEventModal } from "@sx-premium/interactive-event-modal" import '@sx-premium/interactive-event-modal/index.css' const eventsService = createEventsServicePlugin() const eventRecurrence = createEventRecurrencePlugin() const eventModal = createInteractiveEventModal({ // dependency needed to add events eventsService, // (Optional): Available people for the event form availablePeople: ['John Doe', 'Jane Doe'], // (Optional): callback for when an event is added onAddEvent: (event) => { console.log(event) }, // Optional: async callback for when an event is added. If added, it takes precedence over the onAddEvent callback. onAddEventAsync: async (event) => { console.log(event) }, // (Optional): callback for when an event is updated onDeleteEvent: (eventId) => { console.log(eventId) }, // (Optional): callback for when an event start property is updated onStartUpdate(start) { console.log(start) }, // (Optional): callback for when an event end property is updated onEndUpdate(end) { console.log(end) }, // (Optional): callback which is invoked before opening the modal. Return false to prevent the modal from opening canOpenModal: (event) => { return event.calendarId === 'calendar-1'; }, // (Optional): callback for deciding whether to display edit- and delete buttons for an event isEventEditable(event) { return event.calendarId === 'internal' }, // (Optional): configure the time picker to use 12-hour format has12HourTimeFormat: true, // (Optional): prevent the modal from closing on click outside. "false" by default preventClosingOnClickOutside: true, // (Optional): add a gray "move-bar" bar at the top of the modal, which can be used to move the modal movable: true, // (Optional): configure whether the title field should be hidden (is currently shown by default) hideTitle: false, // (Optional): configuration for the field "title" fields: { title: { label: 'Event Title', name: 'event-title', validator: (value) => { return { isValid: !!value && value.length >= 3, message: 'Title must be at least 3 characters long' } } }, description: {}, }, // (Optional): date picker config datePicker: { min: Temporal.PlainDate.from('2025-01-01'), max: Temporal.PlainDate.from('2025-12-31'), } }) const calendar = createCalendar({ // ...other configuration plugins: [ eventModal, eventsService, eventRecurrence, ], callbacks: { onDoubleClickDateTime(dateTime) { eventModal.clickToCreate(dateTime, { id: 'some-event-id', }) } } }) calendar.render(document.getElementById('your-calendar-wrapper')) ``` -------------------------------- ### Basic Usage Example Source: https://schedule-x.dev/docs/frameworks/preact A basic example demonstrating how to use the Schedule-X calendar component in a Preact application. ```javascript import { useCalendarApp, ScheduleXCalendar } from '@schedule-x/preact' import { createViewDay, createViewWeekAgenda, createViewMonthAgenda, createViewMonthGrid, createViewWeek, } from '@schedule-x/calendar' import { createDragAndDropPlugin } from '@sx-premium/drag-and-drop' import 'temporal-polyfill/global' import '@schedule-x/theme-default/dist/index.css' const dragAndDrop = createDragAndDropPlugin() function CalendarApp() { const calendar = useCalendarApp({ views: [ createViewDay(), createViewWeekAgenda(), createViewWeek(), createViewMonthGrid(), createViewMonthAgenda(), ], events: [ { id: '1', title: 'Event 1', start: Temporal.PlainDate.from('2023-12-16'), end: Temporal.PlainDate.from('2023-12-16'), }, ], plugins: [dragAndDrop], }) return (

) } export default CalendarApp; ``` -------------------------------- ### pnpm installation Source: https://schedule-x.dev/docs/frameworks/angular Install the Schedule-X Angular component and its dependencies using pnpm. ```bash pnpm install @schedule-x/angular @schedule-x/calendar @schedule-x/theme-default @preact/signals preact ``` -------------------------------- ### yarn installation Source: https://schedule-x.dev/docs/frameworks/angular Install the Schedule-X Angular component and its dependencies using yarn. ```bash yarn add @schedule-x/angular @schedule-x/calendar @schedule-x/theme-default @preact/signals preact ``` -------------------------------- ### Usage Source: https://schedule-x.dev/docs/calendar/resource-scheduler Example of how to use the resource scheduler in a web application. ```javascript import { createCalendar } from '@schedule-x/calendar' import { createEventsServicePlugin } from "@schedule-x/events-service"; import { createInteractiveEventModal, translations as modalTranslations } from "@sx-premium/interactive-event-modal"; import { createHourlyView, createDailyView, createConfig, translations as resourceViewTranslations, TimeUnits } from "@sx-premium/resource-scheduler"; import { translations, mergeLocales } from '@schedule-x/translations' import { signal } from "@preact/signals"; import '@sx-premium/resource-scheduler/index.css' import '@sx-premium/interactive-event-modal/index.css' import '@schedule-x/theme-default/dist/time-picker.css' const resourceConfig = createConfig(); const hourlyView = createHourlyView(resourceConfig); const dailyView = createDailyView(resourceConfig); // enable or disable drag and drop, resizing resourceConfig.resize.value = true resourceConfig.dragAndDrop.value = true // optionally set the initially displayed columns of the hourly view // can be combined with `infiniteScroll.value = false` to achieve a scheduler with fixed columns resourceConfig.initialHours.value = new TimeUnits().getDayHoursBetween( Temporal.PlainDateTime.from('2025-03-07T08:00'), Temporal.PlainDateTime.from('2025-03-07T19:00') ) // optionally set the initially displayed days of the daily view // can be combined with `infiniteScroll.value = false` to achieve a scheduler with fixed columns resourceConfig.initialDays.value = new TimeUnits().getDaysBetween( Temporal.PlainDate.from('2025-03-05'), Temporal.PlainDate.from('2025-03-20') ) const resources = [ { label: 'Room 100', id: '1', resources: [ { label: 'Room 100A', id: '1.1', isOpen: signal(false), resources: [ { label: 'Room 100A1', id: '1.1.1', colorName: 'room-100A1', lightColors: { main: '#1c7df9', container: '#d2e7ff', onContainer: '#002859', }, }, { label: 'Room 100A2', id: '1.1.2', }, { label: 'Room 100A3', id: '1.1.3', } ], }, { label: 'Room 100B', id: '1.2', isOpen: signal(false), resources: [ { label: 'Room 100B1', id: '1.2.1', }, { label: 'Room 100B2', id: '1.2.2', }, { label: 'Room 100B3', id: '1.2.3', } ] } ] }, { labelHTML: 'Room 101', id: '2', colorName: 'room-101', lightColors: { main: '#1c7df9', container: '#d2e7ff', onContainer: '#002859' }, darkColors: { main: '#c0dfff', onContainer: '#dee6ff', container: '#426aa2' } } ] const eventsService = createEventsServicePlugin() const interactiveEventModal = createInteractiveEventModal({ eventsService, onAddEvent: (event) => { console.log('Event added', event) }, fields: { title: {}, resourceId: {} } }) const calendar = createCalendar({ resources, translations: mergeLocales( translations, modalTranslations, resourceViewTranslations ), events: [ { id: 1, title: 'Event 1', start: Temporal.ZonedDateTime.from('2024-05-11T14:00:00+09:00[Asia/Tokyo]'), end: Temporal.ZonedDateTime.from('2024-05-11T17:00:00+09:00[Asia/Tokyo]') , resourceId: '1' }, { id: 2, title: 'Event 2', start: Temporal.ZonedDateTime.from('2024-05-11T14:00:00+09:00[Asia/Tokyo]') , end: Temporal.ZonedDateTime.from('2024-05-11T16:00:00+09:00[Asia/Tokyo]') , resourceId: '2' } ], views: [hourlyView, dailyView], plugins: [ eventsService, interactiveEventModal ] }) calendar.render(document.getElementById('your-calendar-wrapper')) ``` -------------------------------- ### Install with yarn Source: https://schedule-x.dev/docs/frameworks/svelte Installs the necessary Schedule-X packages, preact/signals, preact, and temporal-polyfill using yarn. ```bash yarn add @schedule-x/svelte @schedule-x/calendar @schedule-x/theme-default @preact/signals preact temporal-polyfill ``` -------------------------------- ### Install with pnpm Source: https://schedule-x.dev/docs/frameworks/svelte Installs the necessary Schedule-X packages, preact/signals, preact, and temporal-polyfill using pnpm. ```bash pnpm install @schedule-x/svelte @schedule-x/calendar @schedule-x/theme-default @preact/signals preact temporal-polyfill ``` -------------------------------- ### Basic usage example Source: https://schedule-x.dev/docs/frameworks/vue A basic example of how to use the ScheduleXCalendar component in a Vue application. ```vue ``` -------------------------------- ### Basic usage - app.component.ts Source: https://schedule-x.dev/docs/frameworks/angular Example of setting up the Schedule-X calendar in an Angular component. ```typescript // app.component.ts import { Component } from '@angular/core'; import { RouterOutlet } from '@angular/router'; import { CalendarComponent } from "@schedule-x/angular"; import { createCalendar, createViewWeek } from "@schedule-x/calendar"; import '@schedule-x/theme-default/dist/index.css' // can alternatively be added in your angular.json import 'temporal-polyfill/global'; @Component({ selector: 'app-root', standalone: true, imports: [RouterOutlet, CalendarComponent], templateUrl: './app.component.html', styleUrl: './app.component.css' }) export class AppComponent { title = 'angular-example'; calendarApp = createCalendar({ events: [ { id: '1', title: 'Event 1', start: Temporal.Now.zonedDateTimeISO(), end: Temporal.Now.zonedDateTimeISO().add({ hours: 1 }), }, ], views: [createViewWeek()], }) } ``` -------------------------------- ### Example Usage of Events Service Plugin Source: https://schedule-x.dev/docs/calendar/plugins/events-service Demonstrates how to create and use the events service plugin with a calendar instance, including adding, getting, updating, and removing events. ```javascript import { createEventsServicePlugin } from '@schedule-x/events-service' const eventsServicePlugin = createEventsServicePlugin(); const calendar = createCalendar( { /* config */ }, [eventsServicePlugin] ) calendar.render(document.getElementById('calendar')) calendar.eventsService.add({ title: 'Event 1', start: Temporal.PlainDate.from('2024-04-20'), end: Temporal.PlainDate.from('2024-04-20'), id: 1 }) eventsServicePlugin.get(1) // { title: 'Event 1', start: '2024-04-20', end: '2024-04-20', id: 1 } eventsServicePlugin.getAll() // [{ title: 'Event 1', start: '2024-04-20', end: '2024-04-20', id: 1 }] eventsServicePlugin.update({ title: 'Real title', start: Temporal.PlainDate.from('2024-04-20'), end: Temporal.PlainDate.from('2024-04-20'), id: 1 }) eventsServicePlugin.remove(1) ``` -------------------------------- ### Polyfilling Temporal Example Source: https://schedule-x.dev/docs/calendar/temporal Demonstrates how to import the temporal-polyfill and use Temporal.PlainDate and Temporal.ZonedDateTime to create dates and events. ```javascript import 'temporal-polyfill/global' const date = Temporal.PlainDate.from('2025-01-01') console.log(date.toString()) const calendar = createCalendar({ events: [ { id: 1, start: Temporal.PlainDate.from('2025-01-01'), end: Temporal.PlainDate.from('2025-01-02'), }, { id: 2, start: Temporal.ZonedDateTime.from('2025-01-01T12:00:00+01:00[Europe/Berlin]'), end: Temporal.ZonedDateTime.from('2025-01-01T13:00:00+01:00[Europe/Berlin]') } ] }) ``` -------------------------------- ### Calendar Initialization with Events Source: https://schedule-x.dev/docs/calendar/events Example of creating a Schedule X calendar with initial events. ```javascript import { createCalendar } from '@schedule-x/calendar' import '@schedule-x/theme-default/dist/index.css' const calendar = createCalendar({ // ... other config events: [ { id: 1, title: 'Coffee with John', start: Temporal.ZonedDateTime.from('2023-11-04T10:05:00+01:00[Europe/Berlin]'), end: Temporal.ZonedDateTime.from('2023-11-04T10:35:00+01:00[Europe/Berlin]') }, { id: 2, title: 'Ski trip', start: Temporal.PlainDate.from('2023-12-04'), end: Temporal.PlainDate.from('2023-12-06') }, ] }) calendar.render(document.getElementById('calendar')) ``` -------------------------------- ### Usage Example Source: https://schedule-x.dev/docs/calendar/plugins/scroll-controller Demonstrates how to import, create, and use the scroll controller plugin with Schedule-X. ```javascript import { createScrollControllerPlugin } from '@schedule-x/scroll-controller' const scrollController = createScrollControllerPlugin({ initialScroll: '07:50' }) const calendar = createCalendar({ /* other configuration */ plugins: [scrollController] }) calendar.render(document.getElementById('calendar')) scrollController.scrollTo('04:00') ``` -------------------------------- ### Usage Example Source: https://schedule-x.dev/docs/calendar/time-grid-resource-view Demonstrates how to create a calendar with the time grid resource view, including defining resources and events associated with them. ```javascript import { createCalendar } from '@schedule-x/calendar' import { createViewTimeGridResource } from "@sx-premium/time-grid-resource-view"; import '@schedule-x/theme-default/dist/index.css' import '@sx-premium/time-grid-resource-view/index.css' const resources = [ { id: 'room-1', label: 'Conference Room A', colorName: 'room-a', lightColors: { main: '#1c7df9', container: '#d2e7ff', onContainer: '#002859', }, darkColors: { main: '#c0dfff', onContainer: '#dee6ff', container: '#426aa2', }, }, { id: 'room-2', label: 'Meeting Room B', colorName: 'room-b', lightColors: { main: '#f91c45', container: '#ffd2dc', onContainer: '#59000d', }, darkColors: { main: '#ffc0cc', onContainer: '#ffdee6', container: '#a24258', }, }, ] const calendar = createCalendar({ resources, views: [createViewTimeGridResource()], events: [ { id: '1', title: 'Team standup', start: Temporal.ZonedDateTime.from('2024-05-06T09:00:00-04:00[America/New_York]'), end: Temporal.ZonedDateTime.from('2024-05-06T09:30:00-04:00[America/New_York]'), resourceId: 'room-1', }, { id: '2', title: 'Client presentation', start: Temporal.ZonedDateTime.from('2024-05-06T10:00:00-04:00[America/New_York]'), end: Temporal.ZonedDateTime.from('2024-05-06T12:00:00-04:00[America/New_York]'), resourceId: 'room-1', }, { id: '3', title: 'Product review', start: Temporal.ZonedDateTime.from('2024-05-06T09:00:00-04:00[America/New_York]'), end: Temporal.ZonedDateTime.from('2024-05-06T10:30:00-04:00[America/New_York]'), resourceId: 'room-2', }, { id: '4', title: 'Design workshop', start: Temporal.ZonedDateTime.from('2024-05-06T13:00:00-04:00[America/New_York]'), end: Temporal.ZonedDateTime.from('2024-05-06T15:00:00-04:00[America/New_York]'), resourceId: 'room-2', }, ], }) calendar.render(document.getElementById('your-calendar-wrapper')) ``` -------------------------------- ### Timed Event Example Source: https://schedule-x.dev/docs/calendar/events An example of a timed event using Temporal.ZonedDateTime. ```javascript const timedEvent = { id: 1, start: Temporal.ZonedDateTime.from('2025-10-01T20:15:00+02:00[Europe/Berlin]'), end: Temporal.ZonedDateTime.from('2025-10-01T21:15:00+02:00[Europe/Berlin]') } ``` -------------------------------- ### Install Events Service Plugin Source: https://schedule-x.dev/docs/calendar/plugins/events-service Install the events-service plugin using npm. ```bash npm i @schedule-x/events-service ``` -------------------------------- ### Full Day Event Example Source: https://schedule-x.dev/docs/calendar/events An example of a full day event using Temporal.PlainDate. ```javascript const fullDayEvent = { id: 2, start: Temporal.PlainDate.from('2025-10-01'), end: Temporal.PlainDate.from('2025-10-01') } ``` -------------------------------- ### Calendar Configuration Example Source: https://schedule-x.dev/docs/calendar/calendars This JavaScript code snippet demonstrates how to configure multiple calendars, including their names, color schemes for light and dark modes, and associated events. ```javascript const config = { // ... other configuration calendars: { personal: { colorName: 'personal', lightColors: { main: '#f9d71c', container: '#fff5aa', onContainer: '#594800', }, darkColors: { main: '#fff5c0', onContainer: '#fff5de', container: '#a29742', }, }, work: { colorName: 'work', lightColors: { main: '#f91c45', container: '#ffd2dc', onContainer: '#59000d', }, darkColors: { main: '#ffc0cc', onContainer: '#ffdee6', container: '#a24258', }, }, leisure: { colorName: 'leisure', lightColors: { main: '#1cf9b0', container: '#dafff0', onContainer: '#004d3d', }, darkColors: { main: '#c0fff5', onContainer: '#e6fff5', container: '#42a297', }, }, school: { colorName: 'school', lightColors: { main: '#1c7df9', container: '#d2e7ff', onContainer: '#002859', }, darkColors: { main: '#c0dfff', onContainer: '#dee6ff', container: '#426aa2', }, }, }, events: [ // ... other events { title: "Meeting with Mr. boss", start: Temporal.ZonedDateTime.from('2024-01-05T05:15:00+01:00[Europe/Berlin]\n'), end: Temporal.ZonedDateTime.from('2024-01-05T06:00:00+01:00[Europe/Berlin]\n'), id: "98d85d98541f", calendarId: "work" }, { title: "Sipping Aperol Spritz on the beach", start: Temporal.ZonedDateTime.from('2024-01-05T12:00:00+01:00[Europe/Berlin]\n'), end: Temporal.ZonedDateTime.from('2024-01-05T15:20:00+01:00[Europe/Berlin]\n'), id: "0d13aae3b8a1", calendarId: "leisure" }, ] } ```