## 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":"2023-12-07"}]}'></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>

##### Demo widget

I need help with something

I can’t reorder a product I previously ordered

How do I place an order?

My payment method not working

##### Eric

Ask us anything – we’ll get back to you here or by email within 24 hours.

##### Theme Customizer

Explore different styles according to your preferences

##### Color Scheme

Light
Dark
Auto

##### RTL

Change text direction

##### Support Chat

Toggle support chat

##### Navigation Type

Vertical
Horizontal
Combo
Dual nav

##### Vertical Navbar Appearance

Default Default
Darker Lighter

##### Horizontal Navbar Shape

Default
Slim

##### Horizontal Navbar Appearance

Default
Darker Lighter
Purchase template
customize