From 2a3f4a817a2d98e99edab1e0ac9e70172465118b Mon Sep 17 00:00:00 2001
From: Paul Laros <paul@laros.io>
Date: Fri, 28 Aug 2020 19:05:24 +0200
Subject: [PATCH] Replace tempusdominus datetimepicker with flatpickr

---
 examples/index.html                    |   8 +-
 package.json                           |   5 +-
 src/js/app.js                          |   2 +-
 src/js/modules/datetimepicker.js       |  19 -----
 src/js/modules/flatpickr.js            |   3 +
 src/scss/5-vendor/_datetimepicker.scss |  13 ----
 src/scss/5-vendor/_flatpickr.scss      | 104 +++++++++++++++++++++++++
 src/scss/app.scss                      |   4 +-
 8 files changed, 116 insertions(+), 42 deletions(-)
 delete mode 100644 src/js/modules/datetimepicker.js
 create mode 100644 src/js/modules/flatpickr.js
 delete mode 100644 src/scss/5-vendor/_datetimepicker.scss
 create mode 100644 src/scss/5-vendor/_flatpickr.scss

diff --git a/examples/index.html b/examples/index.html
index 229c160..16003ff 100644
--- a/examples/index.html
+++ b/examples/index.html
@@ -785,11 +785,11 @@
 		});
 	</script>
 	<script>
-		$(function() {
-			$('#datetimepicker-dashboard').datetimepicker({
+		document.addEventListener("DOMContentLoaded", function() {
+			$('#datetimepicker-dashboard').flatpickr({
 				inline: true,
-				sideBySide: false,
-				format: 'L'
+				prevArrow: '<span class="fas fa-chevron-left" title="Previous month"></span>',
+				nextArrow: '<span class="fas fa-chevron-right" title="Next month"></span>',
 			});
 		});
 	</script>
diff --git a/package.json b/package.json
index 1f70d96..44de559 100644
--- a/package.json
+++ b/package.json
@@ -64,12 +64,11 @@
     "bootstrap": "5.0.0-alpha1",
     "chart.js": "2.9.3",
     "feather-icons": "4.28.0",
+    "flatpickr": "4.6.6",
     "jquery": "3.5.1",
     "jsvectormap": "1.1.1",
     "moment": "2.27.0",
     "popper.js": "1.16.1",
-    "simplebar": "5.2.1",
-    "tempusdominus-bootstrap-4": "5.1.2",
-    "tempusdominus-core": "5.0.3"
+    "simplebar": "5.2.1"
   }
 }
diff --git a/src/js/app.js b/src/js/app.js
index 5e7bd7b..8e73a98 100644
--- a/src/js/app.js
+++ b/src/js/app.js
@@ -9,7 +9,7 @@ import "./modules/sidebar";
 import "./modules/user-agent";
 
 // Forms
-import "./modules/datetimepicker";
+import "./modules/flatpickr";
 
 // Charts
 import "./modules/chartjs";
diff --git a/src/js/modules/datetimepicker.js b/src/js/modules/datetimepicker.js
deleted file mode 100644
index a2b2fcb..0000000
--- a/src/js/modules/datetimepicker.js
+++ /dev/null
@@ -1,19 +0,0 @@
-import "tempusdominus-bootstrap-4";
-
-$.fn.datetimepicker.Constructor.Default = $.extend(
-  {},
-  $.fn.datetimepicker.Constructor.Default,
-  {
-    icons: {
-      time: "far fa-clock",
-      date: "far fa-calendar",
-      up: "fas fa-arrow-up",
-      down: "fas fa-arrow-down",
-      previous: "fas fa-chevron-left",
-      next: "fas fa-chevron-right",
-      today: "far fa-calendar-check-o",
-      clear: "fas fa-trash",
-      close: "fas fa-times"
-    }
-  }
-);
diff --git a/src/js/modules/flatpickr.js b/src/js/modules/flatpickr.js
new file mode 100644
index 0000000..14eb281
--- /dev/null
+++ b/src/js/modules/flatpickr.js
@@ -0,0 +1,3 @@
+import flatpickr from "flatpickr";
+
+window.flatpickr = flatpickr;
\ No newline at end of file
diff --git a/src/scss/5-vendor/_datetimepicker.scss b/src/scss/5-vendor/_datetimepicker.scss
deleted file mode 100644
index caf26a9..0000000
--- a/src/scss/5-vendor/_datetimepicker.scss
+++ /dev/null
@@ -1,13 +0,0 @@
-.bootstrap-datetimepicker-widget {
-  .table th, .table td {
-    border: 0;
-  }
-
-  table th,
-  table td,
-  table td.day {
-    height: 36px;
-    line-height: 36px;
-    width: 36px;
-  }
-}
diff --git a/src/scss/5-vendor/_flatpickr.scss b/src/scss/5-vendor/_flatpickr.scss
new file mode 100644
index 0000000..96a986b
--- /dev/null
+++ b/src/scss/5-vendor/_flatpickr.scss
@@ -0,0 +1,104 @@
+$flatpickr-tile-height: 45px;
+
+.flatpickr-calendar.inline {
+  background: transparent;
+  box-shadow: none;
+  width: 100%;
+  
+  .flatpickr-days {
+    width: 100%;
+  }
+
+  .dayContainer {
+    width: 100%;
+    min-width: 100%;
+    max-width: 100%;
+  }
+
+  .flatpickr-day {
+    border-radius: $border-radius;
+    max-width: inherit;
+    height: $flatpickr-tile-height;
+    line-height: $flatpickr-tile-height;
+
+    &.today {
+      border: 0;
+
+      &:before {
+        content: "";
+        display: inline-block;
+        border-color: rgba(0,0,0,.2) transparent $primary;
+        border-style: solid;
+        border-width: 0 0 7px 7px;
+        position: absolute;
+        bottom: 4px;
+        right: 4px;
+      }
+
+      &.selected:before {
+        border-color: rgba(0,0,0,.2) transparent $white;
+      }
+
+      &:hover {
+        background: #e6e6e6;
+        color: $black;
+      }
+    }
+
+    &.selected {
+      &,
+      &:hover,
+      &:focus {
+        border-radius: $border-radius;
+        background: $primary;
+        color: $white;
+      }
+    }
+  }
+
+  .flatpickr-weekdays {
+    height: $flatpickr-tile-height;
+  }
+  .flatpickr-weekday {
+    height: $flatpickr-tile-height;
+    line-height: $flatpickr-tile-height;
+  }
+
+  .flatpickr-months {
+    .flatpickr-month {
+      height: $flatpickr-tile-height;
+    }
+
+    .flatpickr-prev-month,
+    .flatpickr-next-month {
+      height: $flatpickr-tile-height;
+    }
+  }
+
+  .flatpickr-current-month {
+    padding-top: 0;
+    line-height: $flatpickr-tile-height;
+    height: $flatpickr-tile-height;
+
+    .flatpickr-monthDropdown-months {
+      appearance: none;
+    }
+    
+    .flatpickr-monthDropdown-months,
+    input.cur-year {
+      font-weight: $font-weight-normal;
+      font-size: $h4-font-size;
+    }
+  }
+
+  .flatpickr-prev-month,
+  .flatpickr-next-month {
+    width: 45px;
+    border-radius: $border-radius;
+
+    &:hover {
+      background: #e6e6e6;
+      color: $black;
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/scss/app.scss b/src/scss/app.scss
index 7abe524..dd8c203 100644
--- a/src/scss/app.scss
+++ b/src/scss/app.scss
@@ -54,8 +54,8 @@
 @import "~@fortawesome/fontawesome-free/scss/solid";
 @import "~jsvectormap/dist/css/jsvectormap";
 @import "~simplebar/dist/simplebar";
-@import "~tempusdominus-bootstrap-4/src/sass/tempusdominus-bootstrap-4";
+@import "~flatpickr/dist/flatpickr";
 
 // 3rd party plugin styles
-@import "5-vendor/datetimepicker";
 @import "5-vendor/simplebar";
+@import "5-vendor/flatpickr";