From 13e216a741a2e9939ff6bbb7d58b740e4fb2c562 Mon Sep 17 00:00:00 2001
From: codecalm <codecalm@gmail.com>
Date: Mon, 28 Oct 2019 23:12:11 +0100
Subject: [PATCH] fullcalendar

---
 package.json                         |  5 ++++-
 pages/_data/libs.json                | 10 ++++++++--
 pages/_data/menu.yml                 |  5 +++++
 pages/_includes/ui/chart.html        | 10 +++++-----
 pages/_includes/ui/fullcalendar.html | 16 ++++++++++++++++
 pages/calendar.html                  | 11 +++++++++++
 6 files changed, 49 insertions(+), 8 deletions(-)
 create mode 100644 pages/_includes/ui/fullcalendar.html
 create mode 100644 pages/calendar.html

diff --git a/package.json b/package.json
index b1f5e7a17..256d122e5 100644
--- a/package.json
+++ b/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",
diff --git a/pages/_data/libs.json b/pages/_data/libs.json
index f088df092..4e0746cd5 100644
--- a/pages/_data/libs.json
+++ b/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"
   ]
 }
diff --git a/pages/_data/menu.yml b/pages/_data/menu.yml
index 208065334..a584c39c0 100644
--- a/pages/_data/menu.yml
+++ b/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
diff --git a/pages/_includes/ui/chart.html b/pages/_includes/ui/chart.html
index a4cdd0717..6c83a3b81 100644
--- a/pages/_includes/ui/chart.html
+++ b/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 %}
diff --git a/pages/_includes/ui/fullcalendar.html b/pages/_includes/ui/fullcalendar.html
new file mode 100644
index 000000000..081e0b145
--- /dev/null
+++ b/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 %}
diff --git a/pages/calendar.html b/pages/calendar.html
new file mode 100644
index 000000000..301fb1399
--- /dev/null
+++ b/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>