Skip to Content
Welcome to DayFlow 🎉
IntroductionSidebar

Sidebar

The DayFlow sidebar surfaces multiple calendar sources, upcoming events, and any additional controls you need for day-to-day planning. It ships with a polished default UI and can be swapped for a custom React component when you need bespoke layouts. View Sidebar Example

Configuration

The sidebar can be configured by passing a SidebarConfig object to useSidebar in useCalendarApp.

PropertyTypeDescriptionDefault
enabledbooleanWhether the sidebar is enabled.true
widthnumber | stringWidth of the sidebar (e.g., 240 or '20%').'240px'
initialCollapsedbooleanWhether the sidebar is collapsed by default.false
render(props: CalendarSidebarRenderProps) => React.ReactNodeFull override for the sidebar UI.-
createCalendarMode'inline' | 'modal'Mode for creating new calendars: inline (direct edit in list) or modal (pop-up dialog).'inline'
renderCalendarContextMenu(calendar: CalendarType, onClose: () => void) => React.ReactNodeCustom renderer for the right-click context menu on calendar items.-
renderCreateCalendarDialog(props: CreateCalendarDialogProps) => React.ReactNodeCustom renderer for the calendar creation dialog (used in modal mode).-

Enable the built-in sidebar

Set useSidebar to true (or supply options) when creating your calendar application. The default sidebar includes visibility toggles, color chips, and collapse support out of the box.

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,
  },
});
 
<DayFlowCalendar calendar={calendar} />;

Fully Custom

You can replace the sidebar with your own component by passing a render function to useSidebar. It receives real-time calendar state and helper actions.

import type { CalendarSidebarRenderProps } from '@dayflow/core';
 
const CustomSidebar = ({
  app,
  calendars,
  toggleCalendarVisibility,
  toggleAll,
  isCollapsed,
  setCollapsed,
}: CalendarSidebarRenderProps) => {
  if (isCollapsed) {
    return <button onClick={() => setCollapsed(false)}>Expand</button>;
  }
 
  return (
    <aside className="flex h-full flex-col gap-4 p-4">
      <header className="flex items-center justify-between">
        <h3 className="text-sm font-semibold">Calendars</h3>
        <div className="space-x-2">
          <button onClick={() => toggleAll(true)}>All</button>
          <button onClick={() => toggleAll(false)}>None</button>
        </div>
      </header>
      <ul className="space-y-2">
        {calendars.map(calendar => (
          <li key={calendar.id} className="flex items-center gap-2 text-sm">
            <input
              type="checkbox"
              checked={calendar.isVisible}
              onChange={() =>
                toggleCalendarVisibility(calendar.id, !calendar.isVisible)
              }
            />
            <span
              className="h-2.5 w-2.5 rounded-full"
              style={{ backgroundColor: calendar.colors.eventColor }}
            />
            {calendar.name}
          </li>
        ))}
      </ul>
      <section className="rounded-xl border border-slate-200 p-3 text-xs">
        <p>Current Date: {app.getCurrentDate().toDateString()}</p>
        <p>Total Events: {app.getEvents().length}</p>
      </section>
    </aside>
  );
};
 
const calendar = useCalendarApp({
  /* … */
  useSidebar: {
    enabled: true,
    width: 320,
    render: props => <CustomSidebar {...props} />,
  },
});

CalendarSidebarRenderProps provides toggleCalendarVisibility, toggleAll, isCollapsed, setCollapsed, and the current app instance, making it easy to read event lists, selected dates, and more in your custom sidebar.

See Sidebar Features for more interactive examples.

Last updated on
PluginsViews