Phoenix uses FullCalendar for calendar component. FullCalendar is full-sized drag & drop event calendar.

FullCalendar Documentation

Calendar Example

Basic example of FullCalendar with default options in Phoenix. You can also pass the extra options using data-calendar attribute.See advanced implementation of fullCalendar

<div data-calendar='{"events":[{"title":"Bootcamp","start":"2023-02-05"}]}'></div>
Theme Customizer

Explore different styles according to your preferences

Color Scheme

Change text direction

Navigation Type
Vertical Navbar Appearance
Horizontal Navbar Shape
Horizontal Navbar Appearance
Purchase template