Calendar

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":"2024-04-08"}]}'></div>

Stylesheet

<pre><code class="language-html"> &lt;link href=&quot;vendors/fullcalendar/main.min.css&quot; rel=&quot;stylesheet&quot; /&gt;</code></pre>
 <link href="vendors/fullcalendar/main.min.css" rel="stylesheet" />

Javascript

<pre><code class="language-html"> &lt;script src=&quot;vendors/fullcalendar/main.min.js&quot;&gt;&lt;/script&gt;</code></pre>
 <script src="vendors/fullcalendar/main.min.js"></script>

Thank you for creating with Phoenix|
2024 ©Themewagon

v1.16.0

Theme Customizer

Explore different styles according to your preferences

Color Scheme
RTL

Change text direction

Support Chat

Toggle support chat

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