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-10"}]}'></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>