fullcalendar

package.json

@@ -9,7 +9,7 @@
     "bundlesize": "bundlesize",
     "browsersync": "node build/browsersync.js",
     "assets-copy": "mkdir -p dist-demo/dist && cp -R dist/* dist-demo/dist/ && cp -R static/* dist-demo/",
-    "html-watch": "JEKYLL_ENV=development bundle exec jekyll build --watch --incremental",
+    "html-watch": "JEKYLL_ENV=development bundle exec jekyll build --watch",
     "html-build": "JEKYLL_ENV=production bundle exec jekyll build --destination dist-demo",
     "lint": "npm-run-all --parallel js-lint css-lint",
     "clean": "rm -rf dist && mkdir dist && mkdir dist/css && mkdir dist/js",
@@ -90,9 +90,12 @@
     "yaml": "1.7.2"
   },
   "dependencies": {
+    "@fullcalendar/core": "^4.3.1",
+    "@fullcalendar/daygrid": "^4.3.0",
     "apexcharts": "3.10.0",
     "autosize": "4.0.2",
     "bootstrap": "twbs/bootstrap#9ee9b8a",
+    "fullcalendar": "3.10.1",
     "imask": "5.2.1",
     "jquery": "3.4.1",
     "jqvmap": "1.5.1",

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

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

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