1. Context Menu Actions on Calendars
Calendars in the sidebar support a right-click context menu, allowing quick access to common actions.
Available actions include:
- Delete calendar
- Merge calendar
- Change calendar colour
When selecting Custom Colour, a colour picker will be displayed, enabling users to choose any colour from a palette and apply it to the calendar immediately.
2. Rename Calendar via Double-Click
Calendars can be renamed directly in the sidebar. Double-click on a calendar name to enter edit mode.
3. Add a New Calendar
New calendars can be created by clicking the “＋” (Add) button in the sidebar.
Two creation modes are supported:
createCalendarMode?: 'inline' | 'modal';Inline Mode (Default)
The new calendar is created immediately in the sidebar.
The default name is Untitled.
Suitable for fast creation and minimal interruption.
Modal Mode
The calendar is created through a modal dialog.
Allows additional configuration before confirming creation.
Useful when more setup options are required.
4. How to use
const CalendarWithSidebar: React.FC<{}> = () => {
const [events] = useState<Event[]>(getSampleEvents());
const appRef = useRef<CalendarApp | null>(null);
const dragPlugin = createDragPlugin({
enableDrag: true,
enableResize: true,
enableCreate: true,
});
const sidebarConfig = {
createCalendarMode: 'modal' as const,
renderCreateCalendarDialog: (props: any) => (
<CustomCreateCalendarDialog // <---- you can custom create calendar dialog
onClose={props.onClose}
onCreate={props.onCreate}
/>
),
renderCalendarContextMenu: (calendar: CalendarType, onClose: () => void) => (
appRef.current ? (
<CustomContextMenu // <--- you can custom right click context menu
calendar={calendar}
onClose={onClose}
app={appRef.current}
/>
) : null
)
}
const calendar = useCalendarApp({
views: [createDayView(), createWeekView(), createMonthView()],
events: events,
calendars: customCalendarTypes,
defaultCalendar: 'work',
plugins: [dragPlugin],
theme: { mode: 'auto' },
useSidebar: sidebarConfig,
callbacks: {
onCalendarUpdate: async (calendar) => { // <-- get update callback
console.log('update calendar:', calendar);
},
onCalendarDelete: async (calendar) => {
console.log('delete calendar:', calendar);
},
onCalendarCreate: async (calendar) => {
// call server api using promise function
// await ...
console.log('create calendar:', calendar);
},
onCalendarMerge: async (sourceId, targetId) => {
console.log('merge calendar:', sourceId, targetId);
},
}
});
// Assign app ref after initialization
appRef.current = calendar.app as any;
return (
<div >
<DayFlowCalendar calendar={calendar} />
</div>
);
};