FullScheduler — Guide - Typing

// RendererData.ts
export type RendererData = {
  id: string
  color?: string
  icon?: string
  description?: string
}

// Public types you import from "fullscheduler"
import FullScheduler from 'fullscheduler'

export type { Colors } from 'fullscheduler'                     // palette keys accepted by setColors()
export type { FullSchedulerDay } from 'fullscheduler'           // day cell payload (T-aware)
export type { FullSchedulerDrop } from 'fullscheduler'          // drag/drop payload (T-aware)
export type { FullSchedulerResize } from 'fullscheduler'        // resize payload (T-aware)

export type { FullSchedulerEvent } from 'fullscheduler'         // core event shape (generic T for data)

export type {
  FullSchedulerApiInitOptions,                                  // init options (generic over T)
  FullSchedulerUserApi                                          // user API facade (generic over T)
} from 'fullscheduler'

// Function types exposed by the user API (most are generic over T)
export type {
  SetStartDate,
  SetEvents,            // <T>(events: FullSchedulerEvent<T>[]) => FullSchedulerEvent<T>[]
  AddEvents,            // <T>(events: FullSchedulerEvent<T>[]) => FullSchedulerEvent<T>[]
  DeleteEvents,         // <T>(predicate: (event: FullSchedulerEvent<T>) => boolean) => FullSchedulerEvent<T>[]
  UpdateEvents,         // <T>(predicate: (event: FullSchedulerEvent<T>) => boolean, patch: Partial<FullSchedulerEvent<T>>) => FullSchedulerEvent<T>[]
  SetStartHour,
  SetEndHour,
  SetTimeRange,
  SwitchViewMode,
  SetDaysForward,
  SetDateRange,
  SetRenderer,
  SetThreshold,
  SetEventTemplate,     // (eventTemplate: EventTemplate) => string
  GetDates,             // () => { startDate: Date; endDate: Date }
  SetColors             // (colors: Colors) => void
} from 'fullscheduler'

// HTML template signature (factory for string HTML)
export type { EventTemplate } from 'fullscheduler'              // (event: FullSchedulerEvent<T>, api: FullSchedulerUserApi<T>) => string

// Callback types — all receive (payload, api)
export type {
  OnFullSchedulerApiReady, OnEventClicked, OnDayClicked,
  OnDayDblClicked, OnEventDropped, OnEventStartResized, OnEventEndResized
} from 'fullscheduler'

import type { Colors, FullSchedulerEvent } from 'fullscheduler'

/**
 * @summary Set the start of the visible date range.
 * @param date New start date.
 * @returns A fresh Date after applying the change.
 */
type SetStartDate = (date: Date) => Date

/**
 * @summary Replace the entire event collection.
 * @template T Custom payload carried by each event (event.data).
 */
type SetEvents<T = any> = (events: FullSchedulerEvent<T>[]) => FullSchedulerEvent<T>[]

/**
 * @summary Add events to the existing collection.
 * @template T Custom payload carried by each event (event.data).
 */
type AddEvents<T = any> = (events: FullSchedulerEvent<T>[]) => FullSchedulerEvent<T>[]

/**
 * @summary Remove events based on a predicate over the whole event (typically by data.id).
 * @template T Custom payload type stored in event.data.
 */
type DeleteEvents<T = any> =
  (predicate: (event: FullSchedulerEvent<T>) => boolean) => FullSchedulerEvent<T>[]

/**
 * @summary Update all events matching a predicate with a shallow patch.
 * @template T Custom payload type stored in event.data.
 */
type UpdateEvents<T = any> = (
  predicate: (event: FullSchedulerEvent<T>) => boolean,
  patch: Partial<FullSchedulerEvent<T>>
) => FullSchedulerEvent<T>[]

/** @summary Set first/last visible hour or both at once. */
type SetStartHour = (hour: number) => void
type SetEndHour   = (hour: number) => void
type SetTimeRange = (startHour: number, endHour: number) => void

/** @summary Switch view mode (e.g. "days" ⇄ "month"). */
type SwitchViewMode = () => void

/** @summary Render N forward days (may be safety-capped). */
type SetDaysForward = (days: number) => void

/** @summary Set the visible date span (start inclusive, end at 00:00). */
type SetDateRange = (startDate: Date | string, endDate: Date | string) => void

/** @summary Choose a registered renderer by name. */
type SetRenderer = (renderer: string) => void

/** @summary Set drag/resize snapping threshold (minutes). */
type SetThreshold = (threshold: number) => void

/**
 * @summary Register an event-to-HTML templating function.
 * @returns An identifier (string) for the registered template.
 */
type SetEventTemplate = (eventTemplate: EventTemplate) => string

/** @summary Read the currently visible date window. */
type GetDates = () => { startDate: Date; endDate: Date }

/** @summary Merge a runtime color palette (known keys only). */
type SetColors = (colors: Colors) => void

import type {
  FullSchedulerUserApi, FullSchedulerDay, FullSchedulerDrop,
  FullSchedulerEvent, FullSchedulerResize
} from 'fullscheduler'

/** Called once when the calendar is ready; API is constructed. */
export type OnFullSchedulerApiReady<T>  = (api: FullSchedulerUserApi<T>) => void
/** Called when an event is clicked. */
export type OnEventClicked<T>           = (event: FullSchedulerEvent<T>, api: FullSchedulerUserApi<T>) => void
/** Called when a day cell is clicked. */
export type OnDayClicked<T>             = (day: FullSchedulerDay<T>, api: FullSchedulerUserApi<T>) => void
/** Called when a day cell is double-clicked. */
export type OnDayDblClicked<T>          = (day: FullSchedulerDay<T>, api: FullSchedulerUserApi<T>) => void
/** Called when an event is dropped after dragging. */
export type OnEventDropped<T>           = (dropped: FullSchedulerDrop<T>, api: FullSchedulerUserApi<T>) => void
/** Called when an event's start is resized. */
export type OnEventStartResized<T>      = (resized: FullSchedulerResize<T>, api: FullSchedulerUserApi<T>) => void
/** Called when an event's end is resized. */
export type OnEventEndResized<T>        = (resized: FullSchedulerResize<T>, api: FullSchedulerUserApi<T>) => void

import { ref } from 'vue'
import FullScheduler from 'fullscheduler'
import type { FullSchedulerApiInitOptions, FullSchedulerUserApi, FullSchedulerEvent } from 'fullscheduler'
import type { RendererData } from './RendererData'

const api = ref<FullSchedulerUserApi<RendererData> | null>(null)

const options: FullSchedulerApiInitOptions<RendererData> = {
  height: 560,
  theme: 'light',
  startDate: new Date(),
  endDate: new Date(new Date().setDate(new Date().getDate() + 5)),
  startHour: 8,
  endHour: 18,

  onFullSchedulerApiReady: (readyApi) => {
    api.value = readyApi
    const data:RendererData = { id: 'evt-1', color: '#93c5fd', icon: 'pi-calendar', description: 'Hello T' }
    const events: FullSchedulerEvent<RendererData>[] = [
      { label: 'Typed item', start: at(9), end: at(10), data },
    ]
    readyApi.setEvents(events)
  }
}

function at(h: number, m = 0) { const d = new Date(); d.setHours(h, m, 0, 0); return d }

import type { FullSchedulerEvent, FullSchedulerUserApi } from 'fullscheduler'
import type { RendererData } from './RendererData'

/**
 * @summary Example: highlight clicked event using your typed data shape.
 */
export const onEventClicked = (
  event: FullSchedulerEvent<RendererData>,
  api: FullSchedulerUserApi<RendererData>
): void => {
  const nextColor = event.data?.color ?? '#fde68a'
  api.updateEvents(
    e => e.data?.id === event.data?.id,
    { data: { ...(event.data || {}), color: nextColor } }
  )
}