Photonix

EventCalendar

Calendar for displaying scheduled events.

Preview

June 2026
Week
GMT +7
1
Mon
2
Tue
3
Wed
4
Thu
5
Fri
6
Sat
7
Sun
All day
00:00
00:30
01:00
01:30
02:00
02:30
03:00
03:30
04:00
04:30
05:00
05:30
06:00
06:30
07:00
07:30
08:00
08:30
09:00
09:30
10:00
10:30
11:00
11:30
12:00
12:30
13:00
13:30
14:00
14:30
15:00
15:30
16:00
16:30
17:00
17:30
18:00
18:30
19:00
19:30
20:00
20:30
21:00
21:30
22:00
22:30
23:00
23:30
Meeting
01:59
Usage
import { EventCalendar } from '@photonix/ultimate';

<EventCalendar 
  events={[{ title: 'Event 1', start: new Date() }]} 
/>

Component API

EventCalendar

Prop
Type
Default
Description
events
CalendarEvent[]
[]
initialDate
Date
-
initialView
CalendarView
'week'
onEventClick
((event: CalendarEvent, anchorEl: HTMLElement | null) => void)
-
onDateChange
((date: Date) => void)
-
onViewChange
((view: CalendarView) => void)
-
className
string
-
onAddEventClick
(() => void)
-
Callback when the "Add event" button is clicked
onTimeSlotClick
((date: Date) => void)
-
Callback when a time slot is clicked
hideSidebar
boolean
false
Hide the sidebar and render only the main calendar content
hideHeader
boolean
false
Hide the internal calendar header for embedded layouts

On this page

Preview
Component API
Photonix UI - React Components, Templates & Figma Design System