Calendar
Phoenix uses FullCalendar for calendar component. FullCalendar is full-sized drag & drop event calendar.
FullCalendar DocumentationCalendar 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"> <link href="vendors/fullcalendar/main.min.css" rel="stylesheet" /></code></pre>
<link href="vendors/fullcalendar/main.min.css" rel="stylesheet" />
Javascript
<pre><code class="language-html"> <script src="vendors/fullcalendar/main.min.js"></script></code></pre>
<script src="vendors/fullcalendar/main.min.js"></script>