Essential Studio for React
PRODUCT TOUR
Essential Studio for React

Example of Event Calendar in React Scheduler Component

All Controls
/
Schedule
/
EventCalendar

This demo showcases the way to organize and filter multiple types of events such as Personal, Birthdays, Work, and Holidays in the scheduler.

More Details...

Unplanned Events

Event
Date
grid_815452706_0_header_table
No records to display
July 2025
SuMoTuWeThFrSa
293012345
6789101112
13141516171819
20212223242526
272829303112
3456789
Calendars
  • My Calendar
  • Company
  • Birthday
  • Holiday
Faith Leech
International Children’s Book Day
Janet Rowley
Sun
6
Mon
7
Tue
8
Wed
9
Thu
10
Fri
11
Sat
12
7:56 AM
12:00 AM
1:00 AM
2:00 AM
3:00 AM
4:00 AM
5:00 AM
6:00 AM
7:00 AM
8:00 AM
9:00 AM
10:00 AM
11:00 AM
12:00 PM
1:00 PM
2:00 PM
3:00 PM
4:00 PM
5:00 PM
6:00 PM
7:00 PM
8:00 PM
9:00 PM
10:00 PM
11:00 PM
New launch discussion
5:30 AM - 6:30 AM
Sister-in-law Wedding Ceremony
6:30 AM - 7:30 AM
Grandparent Wedding Day
3:30 AM - 4:30 AM
Product Discussion
3:30 AM - 4:30 AM
Unplanned events
Description

In this example the multiple type of appointments such as Personal, Birthdays, Work, and Holidays organized with filter option in a single scheduler. It helps the user to view a specific or multiple type of appointments at one place.

The left sidebar helps the user to navigate between the scheduler dates and filter the appointments based on their type.

The Schedule component is configured to show the appointments in colors based on their type to identify the appointment type.

The right sidebar displays the list of unplanned events, which can be useful for the user to plan them later.

New Calender
Calendar Name
New Event
Repeat On
Repeat On