Sidebar Plugin

The Sidebar plugin adds a calendar management sidebar to your DayFlow calendar. It includes a mini calendar for date navigation, a calendar list with visibility toggles, and full calendar CRUD operations (create, rename, recolor, merge, delete, import/export).

Installation

Install the plugin package:


npm install @dayflow/plugin-sidebar
# or
pnpm add @dayflow/plugin-sidebar

Usage


import { useCalendarApp, DayFlowCalendar } from '@dayflow/react'; // or '@dayflow/vue', '@dayflow/svelte', '@dayflow/angular'
import { createSidebarPlugin } from '@dayflow/plugin-sidebar';
 
function MyCalendar() {
  const sidebarPlugin = createSidebarPlugin({
    width: 280,
    createCalendarMode: 'modal',
  });
 
  const calendar = useCalendarApp({
    views: [
      /* your views */
    ],
    plugins: [sidebarPlugin],
  });
 
  return <DayFlowCalendar calendar={calendar} />;
}

Configuration

Property	Type	Default	Description
`width`	`number \| string`	`'240px'`	Width of the sidebar (e.g. `280` or `'20rem'`)
`initialCollapsed`	`boolean`	`false`	Whether the sidebar starts collapsed
`createCalendarMode`	`'inline' \| 'modal'`	`'inline'`	How the “create calendar” form is displayed
`colorPickerMode`	`'blossom' \| 'default'`	`'default'`	Which color picker component to use
`render`	`(props: CalendarSidebarRenderProps) => TNode`	`undefined`	Full override for the sidebar UI
`renderCalendarContextMenu`	`(calendar, onClose) => TNode`	`undefined`	Custom context menu renderer for calendar items
`renderCreateCalendarDialog`	`(props) => TNode`	`undefined`	Custom create-calendar dialog renderer

Features

The sidebar provides a ready-made layout with visibility toggles, calendar color swatches, and collapse controls. It also supports Calendar Creation and Context Menus, allowing users to add, edit colors, and delete calendars.

Built-in features include:

Mini Calendar - A compact month view for quick date navigation
Calendar List - Toggle visibility of individual calendars with color-coded checkboxes
Create Calendar - Add new calendars with custom name and color
Rename / Recolor - Right-click a calendar to rename or change its color
Merge Calendars - Move all events from one calendar into another
Delete Calendar - Remove a calendar with a confirmation step (or merge first)
Import / Export - Import .ics files or export calendars to .ics

Live Showcase

Explore the built-in sidebar UI and a custom framework-native implementation below.

What to explore

Visibility Toggles: Hide and show calendars to see the views update instantly.
Drag & Sync: Drag events between views; the sidebar keeps upcoming highlights in sync.
Collapse: Toggle the sidebar to reclaim space when focusing on dense week views.

Fully Custom Sidebar

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


import {
  createSidebarPlugin,
  type CalendarSidebarRenderProps,
} from '@dayflow/plugin-sidebar';
 
const CustomSidebar = ({
  app,
  calendars,
  toggleCalendarVisibility,
  toggleAll,
  isCollapsed,
  setCollapsed,
}: CalendarSidebarRenderProps) => {
  if (isCollapsed) {
    return (
      <div className='p-2'>
        <button onClick={() => setCollapsed(false)}>→</button>
      </div>
    );
  }
 
  return (
    <aside className='flex h-full flex-col gap-4 p-4 bg-slate-50 border-r'>
      <header className='flex items-center justify-between'>
        <h3 className='font-semibold'>My Workspace</h3>
        <button onClick={() => setCollapsed(true)}>←</button>
      </header>
 
      <nav className='space-y-1'>
        {calendars.map(calendar => (
          <label
            key={calendar.id}
            className='flex items-center gap-2 cursor-pointer'
          >
            <input
              type='checkbox'
              checked={calendar.isVisible}
              onChange={e =>
                toggleCalendarVisibility(calendar.id, e.target.checked)
              }
            />
            <span
              className='w-3 h-3 rounded-full'
              style={{ backgroundColor: calendar.colors.lineColor }}
            />
            {calendar.name}
          </label>
        ))}
      </nav>
 
      <div className='mt-auto pt-4 border-t text-xs text-slate-500'>
        Total Events: {app.getEvents().length}
      </div>
    </aside>
  );
};
 
const sidebarPlugin = createSidebarPlugin({
  render: props => <CustomSidebar {...props} />,
});

You can replace the default right-click menu for calendar items:


createSidebarPlugin({
  renderCalendarContextMenu: (calendar, onClose) => (
    <div className='bg-white shadow-lg border rounded p-2'>
      <button
        onClick={() => {
          console.log('Custom action');
          onClose();
        }}
      >
        Custom Action for {calendar.name}
      </button>
    </div>
  ),
});

Custom Create Calendar Dialog

You can replace the default create-calendar dialog:


createSidebarPlugin({
  renderCreateCalendarDialog: ({ onCreate, onClose }) => (
    <MyCustomDialog onSave={onCreate} onCancel={onClose} />
  ),
});