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
Design standup
Docs review
13:00 - 14:00
Usage
"use client";

import { EventCalendar, type CalendarEvent } from '@photonix/ultimate';

const events: CalendarEvent[] = [
    {
        id: 'standup',
        title: 'Design standup',
        start: new Date(2026, 5, 3, 9, 30),
        end: new Date(2026, 5, 3, 10, 0),
        type: 'Work',
        location: 'Room 2A',
    },
    {
        id: 'review',
        title: 'Docs review',
        start: new Date(2026, 5, 3, 13, 0),
        end: new Date(2026, 5, 3, 14, 0),
        type: 'Focus',
    },
];

export default function EventCalendarBasicExample() {
    return <EventCalendar events={events} initialDate={new Date(2026, 5, 3)} initialView="week" hideSidebar />;
}

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