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

 {% 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

 ---
 title: Calendar
 page-title: Calendar
+page-title-actions: calendar
 menu: calendar
 ---
 

scss/_variables.scss

@@ -128,12 +128,12 @@ $headings-font-weight: 600 !default;
 
 $small-font-size: 87.5% !default;
 
-$h1-font-size: (26em / 16) !default;
-$h2-font-size: (21em / 16) !default;
-$h3-font-size: (18em / 16) !default;
-$h4-font-size: (16em / 16) !default;
-$h5-font-size: (14em / 16) !default;
-$h6-font-size: (12em / 16) !default;
+$h1-font-size: (26rem / 16) !default;
+$h2-font-size: (21rem / 16) !default;
+$h3-font-size: (18rem / 16) !default;
+$h4-font-size: (16rem / 16) !default;
+$h5-font-size: (14rem / 16) !default;
+$h6-font-size: (12rem / 16) !default;
 
 $blockquote-font-size: $h4-font-size !default;
 

scss/tabler.scss

@@ -54,6 +54,7 @@
 @import "vendor/jqvmap";
 @import "vendor/apexcharts";
 @import "vendor/sparkline";
+@import "vendor/fullcalendar";
 
 @import "utils/border";
 @import "utils/background";

scss/ui/_nav.scss

@@ -46,6 +46,7 @@
 
   .icon {
     display: block;
+    stroke-width: 1.5;
   }
 }
 

scss/vendor/_fullcalendar.scss

+
+.fc-unthemed {
+  .fc-content,
+  .fc-divider,
+  .fc-list-heading td,
+  .fc-list-view,
+  .fc-popover,
+  .fc-row,
+  tbody,
+  td,
+  th,
+  thead {
+    border-color: $border-color;
+  }
+
+  .fc-toolbar {
+    h2 {
+      font-size: $h2-font-size;
+      margin: 0;
+    }
+  }
+
+  .fc-button {
+    @include button-variant(#ffffff, $border-color, $text-muted);
+    @include button-size($btn-padding-y, $btn-padding-x, $btn-font-size, $btn-border-radius);
+    @include transition($btn-transition);
+  }
+
+  .fc-widget-header {
+    border: 0;
+  }
+
+  .fc-day-header {
+    padding-bottom: .25rem;
+    font-weight: 600;
+  }
+
+  &.card-calendar {
+    .fc-day-grid-container {
+      border-bottom: 0;
+      border-left: 0;
+
+      td:last-child {
+        //border-right: 0;
+      }
+
+      td:first-child {
+        //border-left: 0;
+      }
+    }
+  }
+
+  .fc-time {
+    font-weight: 600;
+  }
+
+  .fc-event {
+    border-color: rgba(0, 0, 0, .05);
+    color: $primary;
+    background-color: theme-color-lighter($primary);
+    padding: 0 .25rem;
+  }
+}