fullcalendar

pages/_data/libs.json

@@ -12,10 +12,16 @@
     "jqvmap/dist/maps/jquery.vmap.usa.js",
     "jqvmap/dist/maps/continents/jquery.vmap.europe.js",
     "peity/jquery.peity.min.js",
-    "selectize/dist/js/selectize.min.js"
+    "selectize/dist/js/selectize.min.js",
+
+    "@fullcalendar/core/main.min.js",
+    "@fullcalendar/daygrid/main.min.js"
   ],
   "css": [
     "jqvmap/dist/jqvmap.min.css",
-    "selectize/dist/css/selectize.css"
+    "selectize/dist/css/selectize.css",
+
+    "@fullcalendar/core/main.min.css",
+    "@fullcalendar/daygrid/main.min.css"
   ]
 }

pages/_data/menu.yml

@@ -18,6 +18,11 @@ charts:
   title: Charts
   icon: pie-chart
 
+calendar:
+  title: Calendar
+  icon: calendar
+  url: calendar.html
+
 layouts:
   title: Layouts
   icon: layout

pages/_includes/ui/chart.html

@@ -9,11 +9,11 @@
 document.addEventListener("DOMContentLoaded", function(event) {
    {% if jekyll.environment == 'development' %}window.tabler_chart = window.tabler_chart || {};{% endif %}
    
-   var chartElement = document.getElementById('chart-{{ id }}');
-   window.ApexCharts && ({% if jekyll.environment == 'development' %}window.tabler_chart["chart-{{ include.chart-id }}"] = {% endif %}new ApexCharts(chartElement, {
+   var chartEl = document.getElementById('chart-{{ id }}');
+   window.ApexCharts && chartEl && ({% if jekyll.environment == 'development' %}window.tabler_chart["chart-{{ include.chart-id }}"] = {% endif %}new ApexCharts(chartEl, {
       chart: {
          type: '{{ data.type }}',
-         height: chartElement.offsetHeight,
+         height: chartEl.offsetHeight,
          {% if data.sparkline %}
          sparkline: {
             enabled: true
@@ -61,7 +61,7 @@ document.addEventListener("DOMContentLoaded", function(event) {
 
       {% if data.type == 'pie' or data.type == 'donut' %}
       pie: {
-         height: chartElement.offsetHeight
+         height: chartEl.offsetHeight
       },
       {% endif %}
 
@@ -133,7 +133,7 @@ document.addEventListener("DOMContentLoaded", function(event) {
       {% endif %}
    })).render();
    
-   console.log('chartElement.offsetHeight', chartElement.offsetHeight);
+   console.log('chartEl.offsetHeight', chartEl.offsetHeight);
 });
 </script>
 {% endcapture_global %}

pages/_includes/ui/fullcalendar.html

@@ -0,0 +1,16 @@
+{% assign calendar-id = include.calendar-id | default: 'main' %}
+
+<div id="calendar-{{ calendar-id }}"></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 }}');
+
+      window.FullCalendar && ({% if jekyll.environment == 'development' %}window.tabler_calendar["calendar-{{ calendar-id }}"] = {% endif %}new FullCalendar.Calendar(calendarEl, {
+         plugins: ['dayGrid']
+      })).render();
+	});
+</script>
+{% endcapture_global %}

pages/calendar.html

@@ -0,0 +1,11 @@
+---
+title: Calendar
+page-title: Calendar
+menu: calendar
+---
+
+<div class="card">
+   <div class="card-body">
+      {% include ui/fullcalendar.html %}
+   </div>
+</div>