FullScheduler — Theme & Colors within calendar - Full Guide

Docs, demos, API

Theme & colorsInit options + Runtime API

setColors (v1.0.33)

You can override palette in two ways: 1) statically via colors in FullSchedulerApiInitOptions<T>, and 2) dynamically via api.setColors() (merges only provided keys). Known keys used in our demos: surface, primary, event, highlight, textPrimary, menuBg, dragging.

Colors via init options

import type { FullSchedulerApiInitOptions } from 'fullscheduler'

type HappyEvent = { color?: string }

const options: FullSchedulerApiInitOptions<HappyEvent> = {
  // ...
  colors: {
    surface:    'var(--p-content-border-color)',
    primary:    'var(--p-menubar-background)',
    event:      'var(--p-togglebutton-background)',
    highlight:  'var(--p-surface-50, #f1f5f9)',
    textPrimary:'var(--p-surface-500, #0f172a)',
    menuBg:     'var(--p-menubar-background, var(--p-surface-0, #ffffff))',
    dragging: 'color-mix(in srgb, var(--p-panelmenu-item-focus-background) 50%, transparent)'
  }
}

Runtime: api.setColors()

// Merge only the keys you pass; others keep their values.
api.setColors({
  primary: '#4f46e5',
  highlight: '#eef2ff',
  event: '#e0f2fe'
})

Interactive demoLive