Core Features guides category | React Calendar Documentation

📄️ Editing events

This guide covers mounting the event editor next to the calendar, choosing which fields users can change, and controlling where the form appears. The editor handles the full lifecycle of an event: it opens on selection, saves edits through the calendar action pipeline, and clears the selection on close.

📄️ Navigation Bar

This guide covers the toolbar above the calendar grid - the default layout, how to swap or hide it, how to compose your own from building blocks, and how to wire custom buttons back into the calendar.

📄️ Scales

This guide covers the two scales you configure most often: the time axis on day, week, resources, and timeline views - which hours appear, how tall each slot is, where dragged events snap - and the unit scale that maps events onto resource columns or rows, including events assigned to several resources at once.

📄️ Styling

This guide covers how to recolor calendar cells, restyle event wrappers, and replace the markup inside events without touching the underlying view layout.

📄️ Themes

This guide covers how to apply Calendar's built-in themes, layer the sidebar panel and locale on top, and override CSS variables when you need a custom look.

📄️ Tooltips

This guide covers the two ways to show event details without opening the editor: a hover tooltip through the tooltip prop, and a clickable card through eventPopup. Both take a React component, and the calendar owns when it mounts and where it goes.

📄️ Context Menu

This guide covers how to attach a right-click menu to events in the calendar - the default edit/delete pair, custom entries, and the gates that hide the menu or its items based on event state.

📄️ Calendar groups

How to expose multiple calendars (work, home, holidays) as a sidebar with checkbox filters and a mini date picker

📄️ Localization

Localization controls every word the calendar shows users - toolbar labels, view names, editor field captions, accessibility strings - plus the date and time format strings used by titles, axis headers, and the agenda. You wire it in by wrapping ` (and its companions) in the component from @svar-ui/react-core` and passing a merged dictionary.