Sidebar

Explore DayFlow’s sidebar experience with live examples. The demos below demonstrate the built-in sidebar UI and a custom React implementation.

Default sidebar

Enable useSidebar to get the ready-made layout with visibility toggles, calendar color swatches, and collapse controls. The default sidebar also supports Calendar Creation and Context Menus, allowing users to add, edit colors, and delete calendars.

import {
  useCalendarApp,
  DayFlowCalendar,
  createDayView,
  createWeekView,
  createMonthView,
  createDragPlugin,
  ViewType,
} from '@dayflow/core';
 
const calendar = useCalendarApp({
  views: [createMonthView(), createWeekView(), createDayView()],
  plugins: [createDragPlugin()],
  events: events,
  calendars: calendars,
  defaultView: ViewType.WEEK,
  useSidebar: {
    enabled: true,
    width: 280,
  },
});

Custom sidebar layout

Provide a render function to replace the sidebar with bespoke content — like team filters, analytics, or curated quick links — while still relying on the shared calendar state.

What to explore

• Hide and show calendars to see the toggles update instantly.
• Drag events between views; the custom sidebar keeps upcoming highlights in sync.
• Collapse the sidebar to reclaim space when focusing on dense week views.

const calendar = useCalendarApp({
  /* … */
  useSidebar: {
    enabled: true,
    width: 320,
    render: props => <CustomSidebar {...props} />,
  },
});