fullcalendar ui fixes

pages/_includes/layout/page-title.html

@@ -25,10 +25,14 @@
       <!-- Page title actions -->
       <div class="col-auto ml-auto">
          {% if page.page-title-actions == 'users' %}
-            <div class="d-flex">
-               <input type="search" class="form-control d-inline-block w-9 mr-3" placeholder="Search user&hellip;" />
-               {% include ui/button.html text="New user" color="primary" icon="plus" %}
-            </div>
+         <div class="d-flex">
+            <input type="search" class="form-control d-inline-block w-9 mr-3" placeholder="Search user&hellip;" />
+            {% include ui/button.html text="New user" color="primary" icon="plus" %}
+         </div>
+         {% elsif page.page-title-actions == 'calendar' %}
+         <div class="d-flex">
+            {% include ui/button.html text="Add event" color="primary" icon="plus" %}
+         </div>
          {% else %}
             <span class="d-none d-sm-inline">
                {% include ui/button.html text="New view" color="secondary" icon="plus" %}

pages/_includes/ui/fullcalendar.html

@@ -1,29 +1,85 @@
 {% assign calendar-id = include.calendar-id | default: 'main' %}
 
-<div id="calendar-{{ calendar-id }}"></div>
+<div id="calendar-{{ calendar-id }}" class="card-calendar"></div>
 
 {% capture_global scripts %}
 <script>
 	document.addEventListener('DOMContentLoaded', function () {
       {% if jekyll.environment == 'development' %}window.tabler_calendar = window.tabler_calendar || {};{% endif %}
-      var calendarEl = document.getElementById('calendar-{{ calendar-id }}');
+      var calendarEl = document.getElementById('calendar-{{ calendar-id }}'),
+         today = new Date(),
+         y = today.getFullYear(),
+         m = today.getMonth(),
+         d = today.getDate();
 
       window.FullCalendar && ({% if jekyll.environment == 'development' %}window.tabler_calendar["calendar-{{ calendar-id }}"] = {% endif %}new FullCalendar.Calendar(calendarEl, {
-		   plugins: [ 'interaction', 'dayGrid', 'timeGrid', 'list' ],
+		   plugins: [ 'interaction', 'dayGrid' ],
          themeSystem: 'standard',
 
 		   header: {
-			   left: 'prev,next today',
-			   center: 'title',
-			   right: 'dayGridMonth,timeGridWeek,timeGridDay'
+			   left: 'title',
+			   center: '',
+			   right: 'prev,next'
 		   },
+
+		   selectable: true,
+		   selectHelper: true,
+		   nowIndicator: true,
 		   views: {
 			   dayGridMonth: { buttonText: 'month' },
 			   timeGridWeek: { buttonText: 'week' },
 			   timeGridDay: { buttonText: 'day' }
 		   },
 		   defaultView: 'dayGridMonth',
+		   timeFormat: 'H(:mm)',
 
+		   events: [
+		   	{
+               title: 'All Day Event',
+               start: new Date(y, m, 1),
+				   className: 'bg-blue-lt'
+            },
+            {
+               id: 999,
+               title: 'Repeating Event',
+               start: new Date(y, m, 7, 6, 0),
+               allDay: false,
+               className: 'bg-blue-lt'
+            },
+            {
+               id: 999,
+               title: 'Repeating Event',
+               start: new Date(y, m, 14, 6, 0),
+               allDay: false,
+               className: 'bg-lime-lt'
+            },
+            {
+               title: 'Meeting',
+               start: new Date(y, m, 4, 10, 30),
+               allDay: false,
+               className: 'bg-green-lt'
+            },
+            {
+               title: 'Lunch',
+               start: new Date(y, m, 5, 12, 0),
+               end: new Date(y, m, 5, 14, 0),
+               allDay: false,
+               className: 'bg-red-lt'
+            },
+            {
+               title: 'LBD Launch',
+               start: new Date(y, m, 19, 12, 0),
+               allDay: true,
+               className: 'bg-azure-lt'
+            },
+            {
+               title: 'Birthday Party',
+               start: new Date(y, m, 16, 19, 0),
+               end: new Date(y, m, 16, 22, 30),
+               allDay: false,
+			      className: 'bg-orange-lt'
+            }
+         ]
 	   })).render();
 	});
 </script>

pages/calendar.html

@@ -1,6 +1,7 @@
 ---
 title: Calendar
 page-title: Calendar
+page-title-actions: calendar
 menu: calendar
 ---