Laravel 11, Vuexy Admin 10.3, by admin@koneko.mx

modules/Admin/Resources/assets/vendor/libs/flatpickr/_mixins.scss

@@ -0,0 +1,114 @@
+@import '../../scss/_bootstrap-extended/functions';
+
+@mixin flatpickr-theme($background, $color: null) {
+  $in-range-bg: rgba-to-hex(rgba($background, 0.16), $card-bg);
+  $color: if($color, $color, color-contrast($background));
+  $in-range-color: $background;
+
+  .flatpickr-day {
+    &.today,
+    &.today:hover {
+      color: $background !important;
+      border-color: rgba-to-hex(rgba($background, 0.16), $card-bg);
+      background-color: rgba-to-hex(rgba($background, 0.16), $card-bg) !important;
+    }
+
+    &.inRange,
+    &.nextMonthDay.inRange,
+    &.prevMonthDay.inRange,
+    &.today.inRange,
+    &.prevMonthDay.today.inRange,
+    &.nextMonthDay.today.inRange {
+      color: $background !important;
+      background: $in-range-bg !important;
+      border-color: $in-range-bg !important;
+    }
+
+    &.selected,
+    &.selected.inRange,
+    &.selected:focus,
+    &.selected:hover,
+    &.selected.nextMonthDay,
+    &.selected.prevMonthDay,
+    &.startRange,
+    &.startRange.inRange,
+    &.startRange:focus,
+    &.startRange:hover,
+    &.startRange.nextMonthDay,
+    &.startRange.prevMonthDay,
+    &.endRange,
+    &.endRange.inRange,
+    &.endRange:focus,
+    &.endRange:hover,
+    &.endRange.nextMonthDay,
+    &.endRange.prevMonthDay,
+    &.week.selected {
+      color: $color !important;
+      background: $background !important;
+      border-color: $background !important;
+      box-shadow: 0 0.125rem 0.375rem 0 rgba($background, 0.3);
+    }
+  }
+}
+
+@mixin flatpickr-dark-theme($background, $color: null) {
+  $color: if($color, $color, color-contrast($background));
+  $in-range-bg: rgba-to-hex(rgba($background, 0.16), $card-bg);
+  $in-range-color: $background;
+
+  .flatpickr-calendar .numInputWrapper span {
+    &.arrowUp:after {
+      border-bottom-color: $color;
+    }
+
+    &.arrowDown:after {
+      border-top-color: $color;
+    }
+  }
+
+  .flatpickr-day {
+    &.today,
+    &.today:hover,
+    &.inRange {
+      color: $background !important;
+      border-color: rgba-to-hex(rgba($background, 0.16), $card-bg) !important;
+      background-color: rgba-to-hex(rgba($background, 0.16), $card-bg) !important;
+    }
+
+    &.inRange,
+    &.nextMonthDay.inRange,
+    &.prevMonthDay.inRange,
+    &.today.inRange,
+    &.nextMonthDay.today.inRange,
+    &.prevMonthDay.today.inRange {
+      border-color: $in-range-bg !important;
+      background: $in-range-bg !important;
+      color: $background !important;
+    }
+
+    &.selected,
+    &.selected.inRange,
+    &.selected:focus,
+    &.selected:hover,
+    &.selected.prevMonthDay,
+    &.selected.nextMonthDay,
+    &.startRange,
+    &.startRange.inRange,
+    &.startRange:focus,
+    &.startRange:hover,
+    &.startRange.prevMonthDay,
+    &.startRange.nextMonthDay,
+    &.endRange,
+    &.endRange.inRange,
+    &.endRange:focus,
+    &.endRange:hover,
+    &.endRange.nextMonthDay,
+    &.endRange.prevMonthDay,
+    &.week.selected {
+      background: $background !important;
+      border-color: $background !important;
+      color: $color !important;
+      box-shadow: 0 0.125rem 0.375rem 0 rgba($background, 0.3);
+    }
+  }
+}

modules/Admin/Resources/assets/vendor/libs/flatpickr/flatpickr.js

@@ -0,0 +1,7 @@
+import flatpickr from 'flatpickr/dist/flatpickr';
+
+try {
+  window.flatpickr = flatpickr;
+} catch (e) {}
+
+export { flatpickr };