Resource Scheduler

npm install @sx-premium/resource-scheduler @schedule-x/calendar @schedule-x/translations @schedule-x/theme-default

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 } from "@sx-premium/resource-scheduler";
import { translations, mergeLocales } from '@schedule-x/translations'
 
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
 
resourceConfig.resources.value = [
  {
    label: 'Room 100',
    id: '1'
  },
  {
    labelHTML: '<span>Room <strong>101</strong></span>',
    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({
  translations: mergeLocales(
    translations,
    modalTranslations,
    resourceViewTranslations
  ),
  events: [
    {
      id: 1,
      title: 'Event 1',
      start: '2024-05-11 14:00',
      end: '2024-05-11 17:00',
      resourceId: '1'
    },
    {
      id: 2,
      title: 'Event 2',
      start: '2024-05-11 14:00',
      end: '2024-05-11 16:00',
      resourceId: '2'
    }
  ],
  views: [hourlyView, dailyView],
  plugins: [
    eventsService,
    interactiveEventModal
  ]
})
 
calendar.render(document.getElementById('your-calendar-wrapper'))
 

export type ResourceViewConfig = {
  hourWidth: Signal<number>
  dayWidth: Signal<number>
  resources: Signal<Resource[]>
  resourceHeight: Signal<number>
  eventHeight: Signal<number>
  dragAndDrop: Signal<boolean>
  resize: Signal<boolean>
  onLazyLoadDate?: (dates: Date[]) => void
  onLazyLoadMonth?: (dates: Date[]) => void
}

export type Resource = {
  label?: string
  labelHTML?: string
  id: string
  colorName?: string
  lightColors?: ColorDefinition
  darkColors?: ColorDefinition
}

export type ColorDefinition = {
  main: string
  container: string
  onContainer: string
}