Create Calendar & Context Menu

DayFlow provides built-in capabilities for managing calendars directly from the sidebar. This includes creating new calendars and a context menu for managing existing ones.

Calendar Creation

The default sidebar includes a “plus” button that allows users to create new calendars. This feature supports two modes: Inline and Modal.

Configuration

You can configure the creation mode via the useSidebar option in useCalendarApp.

const calendar = useCalendarApp({
  // ...
  useSidebar: {
    enabled: true,
    createCalendarMode: 'inline', // 'inline' (default) or 'modal'
  },
});

Inline Mode (Default)

In inline mode, clicking the create button immediately adds a new “Untitled” calendar to the list and places it in edit mode. Users can type the name directly in the sidebar. The calendar is assigned a random color automatically.

Modal Mode

In modal mode, clicking the create button opens a dialog where users can enter the calendar name and select a color from a preset palette.

const calendar = useCalendarApp({
  // ...
  useSidebar: {
    createCalendarMode: 'modal',
  },
});

Custom Creation Dialog

If you need a custom UI for the creation dialog, you can provide a renderCreateCalendarDialog function.

const calendar = useCalendarApp({
  // ...
  useSidebar: {
    createCalendarMode: 'modal',
    renderCreateCalendarDialog: ({ onClose, onCreate }) => (
      <MyCustomDialog
        onCancel={onClose}
        onConfirm={(name, color) => {
          onCreate({
            /* ... new calendar object ... */
          });
        }}
      />
    ),
  },
});

Context Menu

Right-clicking on a calendar in the sidebar opens a context menu.

Default Context Menu

The default context menu provides the following options:

1. Color Picker: Allows users to change the calendar’s color.
2. Delete: Allows users to delete the calendar.

Custom Context Menu

You can customize the context menu by providing a renderCalendarContextMenu function in the useSidebar configuration. This gives you full control over the menu items and their behavior.

import { ContextMenuItem, ContextMenuSeparator } from '@dayflow/core'; // Assuming these are exported or you use your own
 
const calendar = useCalendarApp({
  // ...
  useSidebar: {
    renderCalendarContextMenu: (calendar, onClose) => (
      <>
        <div className="px-3 py-1.5 text-xs font-semibold text-gray-500">
          {calendar.name}
        </div>
        <div className="my-1 h-px bg-gray-200" />
        <div
          className="flex cursor-pointer items-center px-3 py-2 text-sm hover:bg-gray-100"
          onClick={() => {
            console.log('Custom action for', calendar.id);
            onClose();
          }}
        >
          Custom Action
        </div>
        {/* You can still use the default actions if you implement them yourself using the app instance */}
      </>
    ),
  },
});

Programmatic Control

The CalendarApp instance exposes methods to manage calendars programmatically, which you can use in your custom components:

• app.createCalendar(calendar: CalendarType): Registers a new calendar.
• app.deleteCalendar(id: string): Removes a calendar by ID.
• app.updateCalendar(id: string, updates: Partial<CalendarType>): Updates calendar properties (name, colors, etc.).