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":"2023-06-19"}]}'></div>Stylesheet
<pre><code class="language-html"> <script src="vendors/fullcalendar/main.min.js" rel="stylesheet"></script></code></pre> <script src="vendors/fullcalendar/main.min.js" rel="stylesheet"></script>Javascript
<pre><code class="language-html"> <script src="vendors/sortablejs/sortable.min.js"></script></code></pre> <script src="vendors/sortablejs/sortable.min.js"></script>