plugins updates part 2

- added .editorconfig
- updated package.json & build/npm/Plugins.js according to the following changes
- updated dev dependencies to clear audits
- updated daterangepicker
- updated overlayScrollbars
- moved flot (0.8.2) to flot-old for plugins
- updated flot
- updated fullcalendar
- replaced icheck with icheck-bootstrap & updated demo files
- added icheck-bootstrap color overrides
- updated inputmask
- updated ion-rangeslider
- updated jquery-ui
- updated bootstrap-slider tweaks & demo files
- replaced jvectormap with jqvmap & updated demo files
- added jquery-mapael & replaced in index2 jvectormap
- updated jquery-knob
- replaced pace with pace-progress
- updated select2 & demo files
- replaced jquery.sparkline with sparklines & updated demo files and removed jquery.sparkline demo section

.babelrc

@@ -1,7 +1,7 @@
 {
   "presets": [
     [
-      "env",
+      "@babel/preset-env",
       {
         "loose": true,
         "modules": false
@@ -9,6 +9,6 @@
     ]
   ],
   "plugins": [
-    "external-helpers"
+    "@babel/plugin-external-helpers"
   ]
 }

.editorconfig

@@ -0,0 +1,9 @@
+root = true
+
+[*]
+charset = utf-8
+end_of_line = lf
+insert_final_newline = true
+indent_style = space
+indent_size = 2
+

build/npm/Plugins.js

@@ -37,6 +37,16 @@ const Plugins = [
     from: 'node_modules/chart.js/dist/',
     to  : 'plugins/chart.js'
   },
+  // jQuery UI
+  {
+    from: 'node_modules/jquery-ui-dist/',
+    to  : 'plugins/jquery-ui'
+  },
+  // Flot
+  {
+    from: 'node_modules/flot/dist/es5/',
+    to  : 'plugins/flot'
+  },
   // Summernote
   {
     from: 'node_modules/summernote/dist/',
@@ -83,7 +93,11 @@ const Plugins = [
     from: 'node_modules/fastclick/lib',
     to  : 'plugins/fastclick'
   },
-
+  // Date Range Picker
+  {
+    from: 'node_modules/daterangepicker/',
+    to  : 'plugins/daterangepicker'
+  },
   // DataTables
   {
     from: 'node_modules/datatables.net/js',
@@ -97,6 +111,83 @@ const Plugins = [
     from: 'node_modules/datatables.net-bs4/css',
     to: 'plugins/datatables'
   },
+  // Fullcalendar
+  {
+    from: 'node_modules/@fullcalendar/core/',
+    to  : 'plugins/fullcalendar'
+  },
+  {
+    from: 'node_modules/@fullcalendar/bootstrap/',
+    to  : 'plugins/fullcalendar-bootstrap'
+  },
+  {
+    from: 'node_modules/@fullcalendar/daygrid/',
+    to  : 'plugins/fullcalendar-daygrid'
+  },
+  {
+    from: 'node_modules/@fullcalendar/timegrid/',
+    to  : 'plugins/fullcalendar-timegrid'
+  },
+  {
+    from: 'node_modules/@fullcalendar/interaction/',
+    to  : 'plugins/fullcalendar-interaction'
+  },
+  // icheck bootstrap
+  {
+    from: 'node_modules/icheck-bootstrap/',
+    to  : 'plugins/icheck-bootstrap'
+  },
+  // inputmask
+  {
+    from: 'node_modules/inputmask/dist/',
+    to  : 'plugins/inputmask'
+  },
+  // ion-rangeslider
+  {
+    from: 'node_modules/ion-rangeslider/',
+    to  : 'plugins/ion-rangeslider'
+  },
+  // JQVMap
+  {
+    from: 'node_modules/jqvmap/dist/',
+    to  : 'plugins/jqvmap'
+  },
+  // jQuery Mapael
+  {
+    from: 'node_modules/jquery-mapael/js/',
+    to  : 'plugins/jquery-mapael'
+  },
+  // Raphael
+  {
+    from: 'node_modules/raphael/',
+    to  : 'plugins/raphael'
+  },
+  // jQuery Mousewheel
+  {
+    from: 'node_modules/jquery-mousewheel/',
+    to  : 'plugins/jquery-mousewheel'
+  },
+  // jQuery Knob
+  {
+    from: 'node_modules/jquery-knob-chif/dist/',
+    to  : 'plugins/jquery-knob'
+  },
+  // pace-progress
+  {
+    from: 'node_modules/@lgaitan/pace-progress/dist/',
+    to  : 'plugins/pace-progress'
+  },
+  // Select2
+  {
+    from: 'node_modules/select2/dist/',
+    to  : 'plugins/select2'
+  },
+  // Select2
+  {
+    from: 'node_modules/sparklines/source/',
+    to  : 'plugins/sparklines'
+  },
+
 
   // // Doc Assets
   // // AdminLTE Dist

build/scss/AdminLTE.scss

@@ -41,6 +41,7 @@
 @import "users-list";
 @import "carousel";
 @import "social-widgets";
+@import "modals";
 // PAGES
 // ---------------------------------------------------
 @import "mailbox";
@@ -51,8 +52,12 @@
 @import "profile";
 // Plugins
 // ---------------------------------------------------
-@import "fullcalendar";
-@import "select2";
+@import "plugins/fullcalendar";
+@import "plugins/select2";
+@import "plugins/bootstrap-slider";
+@import "plugins/icheck-bootstrap";
+@import "plugins/mapael";
+@import "plugins/jqvmap";
 // Miscellaneous
 // ---------------------------------------------------
 @import "miscellaneous";

build/scss/_buttons.scss

@@ -34,14 +34,14 @@
 
 // Button color variations
 .btn-default {
-  background-color: #f4f4f4;
-  color: #444;
-  border-color: #ddd;
+  background-color: $button-default-background-color;
+  color: $button-default-color;
+  border-color: $button-default-border-color;
   &:hover,
   &:active,
   &.hover {
-    color: #222;
-    background-color: darken(#f4f4f4, 5%);
+    color: darken($button-default-color, 10%);
+    background-color: darken($button-default-background-color, 5%);
   }
 }
 
@@ -55,8 +55,8 @@
   height: 60px;
   text-align: center;
   color: #666;
-  border: 1px solid #ddd;
-  background-color: #f4f4f4;
+  border: 1px solid $button-default-border-color;
+  background-color: $button-default-background-color;
   font-size: 12px;
   // Icons within the btn
   > .fa,
@@ -70,9 +70,9 @@
   }
 
   &:hover {
-    background: #f4f4f4;
-    color: #444;
-    border-color: #aaa;
+    background: $button-default-background-color;
+    color: $button-default-color;
+    border-color: darken($button-default-border-color, 20%);
   }
 
   &:active,

build/scss/_miscellaneous.scss

@@ -361,46 +361,3 @@ a.text-muted:hover {
 .flex-1 {
   flex: 1;
 }
-
-// Modals
-.modal-dialog {
-  .overlay {
-      display: block;
-      position: absolute;
-      z-index: ($zindex-modal + 2);
-      background: rgba(255, 255, 255, 0.7);
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-  }
-}
-
-.modal-content {
-  &.bg-warning {
-    .modal-header,
-    .modal-footer {
-      border-color: $gray-800;
-    }
-  }
-}
-.modal-content {
-  &.bg-primary,
-  &.bg-secondary,
-  &.bg-info,
-  &.bg-danger,
-  &.bg-success, {
-    .close{
-      color: $white;
-    }
-  }
-}
-
-// Background colors (colors)
-@each $name, $color in $colors {
-  ##{$name}.slider {
-    .slider-selection {
-      background: $color;
-    }
-  }
-}

build/scss/_modals.scss

@@ -0,0 +1,39 @@
+/*
+ * General: Modals
+ * ----------------------
+ */
+
+// Overlay
+.modal-dialog {
+  .overlay {
+      display: block;
+      position: absolute;
+      z-index: ($zindex-modal + 2);
+      background: rgba(255, 255, 255, 0.7);
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+  }
+}
+
+// BG Color Variations Fixes
+.modal-content {
+  &.bg-warning {
+    .modal-header,
+    .modal-footer {
+      border-color: $gray-800;
+    }
+  }
+}
+.modal-content {
+  &.bg-primary,
+  &.bg-secondary,
+  &.bg-info,
+  &.bg-danger,
+  &.bg-success, {
+    .close{
+      color: $white;
+    }
+  }
+}

build/scss/_variables.scss

@@ -151,3 +151,11 @@ $transition-fn: ease-in-out !default;
 // TEXT
 // --------------------------------------------------------
 $font-size-xl: ($font-size-base * 2);
+
+
+// BUTTON
+// --------------------------------------------------------
+$button-default-background-color: #f4f4f4 !default;
+$button-default-color: #444 !default;
+$button-default-border-color: #ddd !default;
+  

build/scss/plugins/_bootstrap-slider.scss

@@ -0,0 +1,25 @@
+/*
+ * Plugin: Bootstrap Slider
+ * ---------------------
+ */
+
+// Style override
+.slider {
+  &.slider-vertical {
+    height: 100%;
+  }
+  &.slider-horizontal {
+    width: 100%;
+  }
+}
+
+// Colors
+@each $name, $color in $colors {
+  .slider-#{$name} .slider {
+    .slider-selection {
+      background: $color;
+    }
+  }
+}
+
+

build/scss/_fullcalendar.scss

@@ -2,7 +2,8 @@
  * Plugin: Full Calendar
  * ---------------------
  */
-//Fullcalendar buttons
+
+// Buttons
 .fc-button {
   background: #f4f4f4;
   background-image: none;

build/scss/plugins/_icheck-bootstrap.scss

@@ -0,0 +1,32 @@
+/*
+ * Plugin: iCheck Bootstrap
+ * ---------------------
+ */
+
+// iCheck colors (theme colors)
+@each $name, $color in $theme-colors {
+  .icheck-#{$name} > input:first-child:not(:checked):not(:disabled):hover + label::before,
+  .icheck-#{$name} > input:first-child:not(:checked):not(:disabled):hover + input[type="hidden"] + label::before {
+      border-color: #{$color};
+  }
+
+  .icheck-#{$name} > input:first-child:checked + label::before,
+  .icheck-#{$name} > input:first-child:checked + input[type="hidden"] + label::before {
+      background-color: #{$color};
+      border-color: #{$color};
+  }
+}
+
+// iCheck colors (colors)
+@each $name, $color in $colors {
+  .icheck-#{$name} > input:first-child:not(:checked):not(:disabled):hover + label::before,
+  .icheck-#{$name} > input:first-child:not(:checked):not(:disabled):hover + input[type="hidden"] + label::before {
+      border-color: #{$color};
+  }
+
+  .icheck-#{$name} > input:first-child:checked + label::before,
+  .icheck-#{$name} > input:first-child:checked + input[type="hidden"] + label::before {
+      background-color: #{$color};
+      border-color: #{$color};
+  }
+}

build/scss/plugins/_jqvmap.scss

@@ -0,0 +1,23 @@
+/*
+ * Plugins: JQVMap
+ * ---------------
+ */
+
+// Zoom Button size fixes
+.jqvmap-zoomin,
+.jqvmap-zoomout {
+    background-color: $button-default-background-color;
+    color: $button-default-color;
+    border: 1px solid $button-default-border-color;
+    border-radius: $btn-border-radius;
+
+    width: 15px;
+    height: 15px;
+
+  &:hover,
+  &:active,
+  &.hover {
+    color: darken($button-default-color, 10%);
+    background-color: darken($button-default-background-color, 5%);
+  }
+}

build/scss/plugins/_mapael.scss

@@ -0,0 +1,75 @@
+/*
+ * Plugins: jQuery Mapael
+ * ----------------------
+ */
+
+.mapael {
+  .map {
+    position: relative;
+  }
+
+  .mapTooltip {
+    @include reset-text();
+    background-color: $tooltip-bg;
+    color: $tooltip-color;
+    display: block;
+    max-width: $tooltip-max-width;
+    padding: $tooltip-padding-y $tooltip-padding-x;
+    position: absolute;
+    text-align: center;
+    word-wrap: break-word;
+    z-index: $zindex-tooltip;
+    @include border-radius($tooltip-border-radius);
+    @include font-size($tooltip-font-size);
+  }
+
+  .myLegend {
+    background-color: #f4f4e8;
+    border: 1px solid #bebeb4;
+    padding: 10px;
+    width: 600px;
+  }
+
+  .zoomButton {
+    border-radius: $btn-border-radius;
+    background-color: $button-default-background-color;
+    color: $button-default-color;
+    border: 1px solid $button-default-border-color;
+    padding-left: 1px;
+    width: 16px;
+    height: 16px;
+    line-height: 14px;
+    text-align: center;
+    cursor: pointer;
+    position: absolute;
+    top: 0;
+    font-weight: bold;
+    left: 10px;
+
+    -webkit-user-select: none;
+    -khtml-user-select : none;
+    -moz-user-select: none;
+    -o-user-select : none;
+    user-select: none;
+
+    &:hover,
+    &:active,
+    &.hover {
+      color: darken($button-default-color, 10%);
+      background-color: darken($button-default-background-color, 5%);
+    }
+  }
+
+  .zoomReset {
+    top: 10px;
+    line-height: 12px;
+  }
+
+  .zoomIn {
+    top: 30px;
+  }
+
+  .zoomOut {
+    top: 50px;
+  }
+}

build/scss/_select2.scss

@@ -91,6 +91,14 @@
     &:focus {
       border-color: theme-color("primary");
     }
+
+    .select2-selection__rendered li:first-child.select2-search.select2-search--inline {
+      width: 100%;
+
+      .select2-search__field {
+        width: 100% !important;
+      }
+    }
   }
   &.select2-container--focus .select2-selection--multiple {
     border-color: $gray-x-light;
@@ -112,6 +120,6 @@
   }
 }
 
-.select2-container .select2-selection--single .select2-selection__rendered {
+.select2-container .select2-selection--single .select2-selection__rendered li {
   padding-right: 10px;
 }

dist/js/pages/dashboard.js

@@ -64,7 +64,7 @@ $(function () {
   }
   // World map by jvectormap
   $('#world-map').vectorMap({
-    map              : 'world_mill_en',
+    map              : 'world_en',
     backgroundColor  : 'transparent',
     regionStyle      : {
       initial: {
@@ -89,30 +89,13 @@ $(function () {
   })
 
   // Sparkline charts
-  var myvalues = [1000, 1200, 920, 927, 931, 1027, 819, 930, 1021]
-  $('#sparkline-1').sparkline(myvalues, {
-    type     : 'line',
-    lineColor: '#92c1dc',
-    fillColor: '#ebf4f9',
-    height   : '50',
-    width    : '80'
-  })
-  myvalues = [515, 519, 520, 522, 652, 810, 370, 627, 319, 630, 921]
-  $('#sparkline-2').sparkline(myvalues, {
-    type     : 'line',
-    lineColor: '#92c1dc',
-    fillColor: '#ebf4f9',
-    height   : '50',
-    width    : '80'
-  })
-  myvalues = [15, 19, 20, 22, 33, 27, 31, 27, 19, 30, 21]
-  $('#sparkline-3').sparkline(myvalues, {
-    type     : 'line',
-    lineColor: '#92c1dc',
-    fillColor: '#ebf4f9',
-    height   : '50',
-    width    : '80'
-  })
+  var sparkline1 = new Sparkline($("#sparkline-1")[0], {width: 80, height: 50, lineColor: '#92c1dc', endColor: '#ebf4f9'});
+  var sparkline2 = new Sparkline($("#sparkline-2")[0], {width: 80, height: 50, lineColor: '#92c1dc', endColor: '#ebf4f9'});
+  var sparkline3 = new Sparkline($("#sparkline-3")[0], {width: 80, height: 50, lineColor: '#92c1dc', endColor: '#ebf4f9'});
+
+  sparkline1.draw([1000, 1200, 920, 927, 931, 1027, 819, 930, 1021]);
+  sparkline2.draw([515, 519, 520, 522, 652, 810, 370, 627, 319, 630, 921]);
+  sparkline3.draw([15, 19, 20, 22, 33, 27, 31, 27, 19, 30, 21]);
 
   // The Calender
   $('#calendar').datetimepicker({
@@ -125,76 +108,157 @@ $(function () {
     height: '250px'
   })
 
-  /* Morris.js Charts */
+  /* Chart.js Charts */
   // Sales chart
-  var area = new Morris.Area({
-    element   : 'revenue-chart',
-    resize    : true,
-    data      : [
-      { y: '2011 Q1', item1: 2666, item2: 2666 },
-      { y: '2011 Q2', item1: 2778, item2: 2294 },
-      { y: '2011 Q3', item1: 4912, item2: 1969 },
-      { y: '2011 Q4', item1: 3767, item2: 3597 },
-      { y: '2012 Q1', item1: 6810, item2: 1914 },
-      { y: '2012 Q2', item1: 5670, item2: 4293 },
-      { y: '2012 Q3', item1: 4820, item2: 3795 },
-      { y: '2012 Q4', item1: 15073, item2: 5967 },
-      { y: '2013 Q1', item1: 10687, item2: 4460 },
-      { y: '2013 Q2', item1: 8432, item2: 5713 }
-    ],
-    xkey      : 'y',
-    ykeys     : ['item1', 'item2'],
-    labels    : ['Item 1', 'Item 2'],
-    lineColors: ['#495057', '#007cff'],
-    hideHover : 'auto'
-  })
-  var line = new Morris.Line({
-    element          : 'line-chart',
-    resize           : true,
-    data             : [
-      { y: '2011 Q1', item1: 2666 },
-      { y: '2011 Q2', item1: 2778 },
-      { y: '2011 Q3', item1: 4912 },
-      { y: '2011 Q4', item1: 3767 },
-      { y: '2012 Q1', item1: 6810 },
-      { y: '2012 Q2', item1: 5670 },
-      { y: '2012 Q3', item1: 4820 },
-      { y: '2012 Q4', item1: 15073 },
-      { y: '2013 Q1', item1: 10687 },
-      { y: '2013 Q2', item1: 8432 }
-    ],
-    xkey             : 'y',
-    ykeys            : ['item1'],
-    labels           : ['Item 1'],
-    lineColors       : ['#efefef'],
-    lineWidth        : 2,
-    hideHover        : 'auto',
-    gridTextColor    : '#fff',
-    gridStrokeWidth  : 0.4,
-    pointSize        : 4,
-    pointStrokeColors: ['#efefef'],
-    gridLineColor    : '#efefef',
-    gridTextFamily   : 'Open Sans',
-    gridTextSize     : 10
-  })
+  var salesChartCanvas = document.getElementById('revenue-chart-canvas').getContext('2d');
+  //$('#revenue-chart').get(0).getContext('2d');
+
+  var salesChartData = {
+    labels  : ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+    datasets: [
+      {
+        label               : 'Digital Goods',
+        backgroundColor     : 'rgba(60,141,188,0.9)',
+        borderColor         : 'rgba(60,141,188,0.8)',
+        pointRadius          : false,
+        pointColor          : '#3b8bba',
+        pointStrokeColor    : 'rgba(60,141,188,1)',
+        pointHighlightFill  : '#fff',
+        pointHighlightStroke: 'rgba(60,141,188,1)',
+        data                : [28, 48, 40, 19, 86, 27, 90]
+      },
+      {
+        label               : 'Electronics',
+        backgroundColor     : 'rgba(210, 214, 222, 1)',
+        borderColor         : 'rgba(210, 214, 222, 1)',
+        pointRadius         : false,
+        pointColor          : 'rgba(210, 214, 222, 1)',
+        pointStrokeColor    : '#c1c7d1',
+        pointHighlightFill  : '#fff',
+        pointHighlightStroke: 'rgba(220,220,220,1)',
+        data                : [65, 59, 80, 81, 56, 55, 40]
+      },
+    ]
+  }
+
+  var salesChartOptions = {
+    maintainAspectRatio : false,
+    responsive : true,
+    legend: {
+      display: false
+    },
+    scales: {
+      xAxes: [{
+        gridLines : {
+          display : false,
+        }
+      }],
+      yAxes: [{
+        gridLines : {
+          display : false,
+        }
+      }]
+    }
+  }
+
+  // This will get the first returned node in the jQuery collection.
+  var salesChart = new Chart(salesChartCanvas, { 
+      type: 'line', 
+      data: salesChartData, 
+      options: salesChartOptions
+    }
+  )
 
   // Donut Chart
-  var donut = new Morris.Donut({
-    element  : 'sales-chart',
-    resize   : true,
-    colors   : ['#007bff', '#dc3545', '#28a745'],
-    data     : [
-      { label: 'Download Sales', value: 12 },
-      { label: 'In-Store Sales', value: 30 },
-      { label: 'Mail-Order Sales', value: 20 }
+  var pieChartCanvas = $('#sales-chart-canvas').get(0).getContext('2d')
+  var pieData        = {
+    labels: [
+        'Instore Sales', 
+        'Download Sales',
+        'Mail-Order Sales', 
     ],
-    hideHover: 'auto'
-  })
+    datasets: [
+      {
+        data: [30,12,20],
+        backgroundColor : ['#f56954', '#00a65a', '#f39c12'],
+      }
+    ]
+  }
+  var pieOptions = {
+    legend: {
+      display: false
+    },
+    maintainAspectRatio : false,
+    responsive : true,
+  }
+  //Create pie or douhnut chart
+  // You can switch between pie and douhnut using the method below.
+  var pieChart = new Chart(pieChartCanvas, {
+    type: 'doughnut',
+    data: pieData,
+    options: pieOptions      
+  });
+
+  // Sales graph chart
+  var salesGraphChartCanvas = $('#line-chart').get(0).getContext('2d');
+  //$('#revenue-chart').get(0).getContext('2d');
+
+  var salesGraphChartData = {
+    labels  : ['2011 Q1', '2011 Q2', '2011 Q3', '2011 Q4', '2012 Q1', '2012 Q2', '2012 Q3', '2012 Q4', '2013 Q1', '2013 Q2'],
+    datasets: [
+      {
+        label               : 'Digital Goods',
+        fill                : false,
+        borderWidth         : 2,
+        lineTension         : 0,
+        spanGaps : true,
+        borderColor         : '#efefef',
+        pointRadius         : 3,
+        pointHoverRadius    : 7,
+        pointColor          : '#efefef',
+        pointBackgroundColor: '#efefef',
+        data                : [2666, 2778, 4912, 3767, 6810, 5670, 4820, 15073, 10687, 8432]
+      }
+    ]
+  }
+
+  var salesGraphChartOptions = {
+    maintainAspectRatio : false,
+    responsive : true,
+    legend: {
+      display: false,
+    },
+    scales: {
+      xAxes: [{
+        ticks : {
+          fontColor: '#efefef',
+        },
+        gridLines : {
+          display : false,
+          color: '#efefef',
+          drawBorder: false,
+        }
+      }],
+      yAxes: [{
+        ticks : {
+          stepSize: 5000,
+          fontColor: '#efefef',
+        },
+        gridLines : {
+          display : true,
+          color: '#efefef',
+          drawBorder: false,
+        }
+      }]
+    }
+  }
+
+  // This will get the first returned node in the jQuery collection.
+  var salesGraphChart = new Chart(salesGraphChartCanvas, { 
+      type: 'line', 
+      data: salesGraphChartData, 
+      options: salesGraphChartOptions
+    }
+  )
 
-  // Fix for charts under tabs
-  $('.box ul.nav a').on('shown.bs.tab', function () {
-    area.redraw()
-    donut.redraw()
-    line.redraw()
-  })
 })

dist/js/pages/dashboard2.js

@@ -116,142 +116,376 @@ $(function () {
    * ------------
    * Create a world map with markers
    */
-  $('#world-map-markers').vectorMap({
-    map              : 'world_mill_en',
-    normalizeFunction: 'polynomial',
-    hoverOpacity     : 0.7,
-    hoverColor       : false,
-    backgroundColor  : 'transparent',
-    regionStyle      : {
-      initial      : {
-        fill            : 'rgba(210, 214, 222, 1)',
-        'fill-opacity'  : 1,
-        stroke          : 'none',
-        'stroke-width'  : 0,
-        'stroke-opacity': 1
-      },
-      hover        : {
-        'fill-opacity': 0.7,
-        cursor        : 'pointer'
-      },
-      selected     : {
-        fill: 'yellow'
-      },
-      selectedHover: {}
-    },
-    markerStyle      : {
-      initial: {
-        fill  : '#00a65a',
-        stroke: '#111'
-      }
-    },
-    markers          : [
-      {
-        latLng: [41.90, 12.45],
-        name  : 'Vatican City'
-      },
-      {
-        latLng: [43.73, 7.41],
-        name  : 'Monaco'
-      },
-      {
-        latLng: [-0.52, 166.93],
-        name  : 'Nauru'
-      },
-      {
-        latLng: [-8.51, 179.21],
-        name  : 'Tuvalu'
-      },
-      {
-        latLng: [43.93, 12.46],
-        name  : 'San Marino'
-      },
-      {
-        latLng: [47.14, 9.52],
-        name  : 'Liechtenstein'
-      },
-      {
-        latLng: [7.11, 171.06],
-        name  : 'Marshall Islands'
-      },
-      {
-        latLng: [17.3, -62.73],
-        name  : 'Saint Kitts and Nevis'
-      },
-      {
-        latLng: [3.2, 73.22],
-        name  : 'Maldives'
-      },
-      {
-        latLng: [35.88, 14.5],
-        name  : 'Malta'
-      },
-      {
-        latLng: [12.05, -61.75],
-        name  : 'Grenada'
-      },
-      {
-        latLng: [13.16, -61.23],
-        name  : 'Saint Vincent and the Grenadines'
-      },
-      {
-        latLng: [13.16, -59.55],
-        name  : 'Barbados'
-      },
-      {
-        latLng: [17.11, -61.85],
-        name  : 'Antigua and Barbuda'
-      },
-      {
-        latLng: [-4.61, 55.45],
-        name  : 'Seychelles'
-      },
-      {
-        latLng: [7.35, 134.46],
-        name  : 'Palau'
-      },
-      {
-        latLng: [42.5, 1.51],
-        name  : 'Andorra'
-      },
-      {
-        latLng: [14.01, -60.98],
-        name  : 'Saint Lucia'
-      },
-      {
-        latLng: [6.91, 158.18],
-        name  : 'Federated States of Micronesia'
-      },
-      {
-        latLng: [1.3, 103.8],
-        name  : 'Singapore'
-      },
-      {
-        latLng: [1.46, 173.03],
-        name  : 'Kiribati'
-      },
-      {
-        latLng: [-21.13, -175.2],
-        name  : 'Tonga'
-      },
-      {
-        latLng: [15.3, -61.38],
-        name  : 'Dominica'
-      },
-      {
-        latLng: [-20.2, 57.5],
-        name  : 'Mauritius'
-      },
-      {
-        latLng: [26.02, 50.55],
-        name  : 'Bahrain'
+  $('#world-map-markers').mapael({
+      map: {
+        name : "world_countries",
+        zoom: {
+          enabled: true,
+          maxLevel: 10
+        },
+        defaultPlot: {
+          size: 12,
+          attrs: {
+            "stroke-width": 0,
+            "stroke-linejoin": "round"
+          },
+          attrsHover: {
+            size: 15,
+            "fill": '#28a745',
+            "stroke-width": 0,
+            animDuration: 0
+          },
+        }
       },
-      {
-        latLng: [0.33, 6.73],
-        name  : 'São Tomé and Príncipe'
+      plots: {
+        "marker1": {
+          latitude: 41.90,
+          longitude: 12.45,
+          href: '#',
+          tooltip: {
+            content: 'Vatican City'
+          }
+        },
+        "marker2": {
+          latitude: 43.73,
+          longitude: 7.41,
+          href: '#',
+          tooltip: {
+            content: 'Monaco'
+          }
+        },
+        "marker3": {
+          latitude: -0.52,
+          longitude: 166.93,
+          href: '#',
+          tooltip: {
+            content: 'Nauru'
+          }
+        },
+        "marker4": {
+          latitude: -8.51,
+          longitude: 179.21,
+          href: '#',
+          tooltip: {
+            content: 'Tuvalu'
+          }
+        },
+        "marker5": {
+          latitude: 43.93,
+          longitude: 12.46,
+          href: '#',
+          tooltip: {
+            content: 'San Marino'
+          }
+        },
+        "marker6": {
+          latitude: 47.14,
+          longitude: 9.52,
+          href: '#',
+          tooltip: {
+            content: 'Liechtenstein'
+          }
+        },
+        "marker7": {
+          latitude: 7.11,
+          longitude: 171.06,
+          href: '#',
+          tooltip: {
+            content: 'Marshall Islands'
+          }
+        },
+        "marker8": {
+          latitude: 17.3,
+          longitude: -62.73,
+          href: '#',
+          tooltip: {
+            content: 'Saint Kitts and Nevis'
+          }
+        },
+        "marker9": {
+          latitude: 3.2,
+          longitude: 73.22,
+          href: '#',
+          tooltip: {
+            content: 'Maldives'
+          }
+        },
+        "marker10": {
+          latitude: 35.88,
+          longitude: 14.5,
+          href: '#',
+          tooltip: {
+            content: 'Malta'
+          }
+        },
+        "marker11": {
+          latitude: 12.05,
+          longitude: -61.75,
+          href: '#',
+          tooltip: {
+            content: 'Grenada'
+          }
+        },
+        "marker12": {
+          latitude: 13.16,
+          longitude: -61.23,
+          href: '#',
+          tooltip: {
+            content: 'Saint Vincent and the Grenadines'
+          }
+        },
+        "marker13": {
+          latitude: 13.16,
+          longitude: -59.55,
+          href: '#',
+          tooltip: {
+            content: 'Barbados'
+          }
+        },
+        "marker14": {
+          latitude: 17.11,
+          longitude: -61.85,
+          href: '#',
+          tooltip: {
+            content: 'Antigua and Barbuda'
+          }
+        },
+        "marker15": {
+          latitude: -4.61,
+          longitude: 55.45,
+          href: '#',
+          tooltip: {
+            content: 'Seychelles'
+          }
+        },
+        "marker16": {
+          latitude: 7.35,
+          longitude: 134.46,
+          href: '#',
+          tooltip: {
+            content: 'Palau'
+          }
+        },
+        "marker17": {
+          latitude: 42.5,
+          longitude: 1.51,
+          href: '#',
+          tooltip: {
+            content: 'Andorra'
+          }
+        },
+        "marker18": {
+          latitude: 14.01,
+          longitude: -60.98,
+          href: '#',
+          tooltip: {
+            content: 'Saint Lucia'
+          }
+        },
+        "marker19": {
+          latitude: 6.91,
+          longitude: 158.18,
+          href: '#',
+          tooltip: {
+            content: 'Federated States of Micronesia'
+          }
+        },
+        "marker20": {
+          latitude: 1.3,
+          longitude: 103.8,
+          href: '#',
+          tooltip: {
+            content: 'Singapore'
+          }
+        },
+        "marker21": {
+          latitude: 1.46,
+          longitude: 173.03,
+          href: '#',
+          tooltip: {
+            content: 'Kiribati'
+          }
+        },
+        "marker22": {
+          latitude: -21.13,
+          longitude: -175.2,
+          href: '#',
+          tooltip: {
+            content: 'Tonga'
+          }
+        },
+        "marker23": {
+          latitude: 15.3,
+          longitude: -61.38,
+          href: '#',
+          tooltip: {
+            content: 'Dominica'
+          }
+        },
+        "marker24": {
+          latitude: -20.2,
+          longitude: 57.5,
+          href: '#',
+          tooltip: {
+            content: 'Mauritius'
+          }
+        },
+        "marker25": {
+          latitude: 26.02,
+          longitude: 50.55,
+          href: '#',
+          tooltip: {
+            content: 'Bahrain'
+          }
+        },
+        "marker26": {
+          latitude: 0.33,
+          longitude: 6.73,
+          href: '#',
+          tooltip: {
+            content: 'São Tomé and Príncipe'
+          }
+        }
       }
-    ]
-  })
+    }
+  );
+
+  // $('#world-map-markers').vectorMap({
+  //   map              : 'world_en',
+  //   normalizeFunction: 'polynomial',
+  //   hoverOpacity     : 0.7,
+  //   hoverColor       : false,
+  //   backgroundColor  : 'transparent',
+  //   regionStyle      : {
+  //     initial      : {
+  //       fill            : 'rgba(210, 214, 222, 1)',
+  //       'fill-opacity'  : 1,
+  //       stroke          : 'none',
+  //       'stroke-width'  : 0,
+  //       'stroke-opacity': 1
+  //     },
+  //     hover        : {
+  //       'fill-opacity': 0.7,
+  //       cursor        : 'pointer'
+  //     },
+  //     selected     : {
+  //       fill: 'yellow'
+  //     },
+  //     selectedHover: {}
+  //   },
+  //   markerStyle      : {
+  //     initial: {
+  //       fill  : '#00a65a',
+  //       stroke: '#111'
+  //     }
+  //   },
+  //   markers          : [
+  //     {
+  //       latLng: [41.90, 12.45],
+  //       name  : 'Vatican City'
+  //     },
+  //     {
+  //       latLng: [43.73, 7.41],
+  //       name  : 'Monaco'
+  //     },
+  //     {
+  //       latLng: [-0.52, 166.93],
+  //       name  : 'Nauru'
+  //     },
+  //     {
+  //       latLng: [-8.51, 179.21],
+  //       name  : 'Tuvalu'
+  //     },
+  //     {
+  //       latLng: [43.93, 12.46],
+  //       name  : 'San Marino'
+  //     },
+  //     {
+  //       latLng: [47.14, 9.52],
+  //       name  : 'Liechtenstein'
+  //     },
+  //     {
+  //       latLng: [7.11, 171.06],
+  //       name  : 'Marshall Islands'
+  //     },
+  //     {
+  //       latLng: [17.3, -62.73],
+  //       name  : 'Saint Kitts and Nevis'
+  //     },
+  //     {
+  //       latLng: [3.2, 73.22],
+  //       name  : 'Maldives'
+  //     },
+  //     {
+  //       latLng: [35.88, 14.5],
+  //       name  : 'Malta'
+  //     },
+  //     {
+  //       latLng: [12.05, -61.75],
+  //       name  : 'Grenada'
+  //     },
+  //     {
+  //       latLng: [13.16, -61.23],
+  //       name  : 'Saint Vincent and the Grenadines'
+  //     },
+  //     {
+  //       latLng: [13.16, -59.55],
+  //       name  : 'Barbados'
+  //     },
+  //     {
+  //       latLng: [17.11, -61.85],
+  //       name  : 'Antigua and Barbuda'
+  //     },
+  //     {
+  //       latLng: [-4.61, 55.45],
+  //       name  : 'Seychelles'
+  //     },
+  //     {
+  //       latLng: [7.35, 134.46],
+  //       name  : 'Palau'
+  //     },
+  //     {
+  //       latLng: [42.5, 1.51],
+  //       name  : 'Andorra'
+  //     },
+  //     {
+  //       latLng: [14.01, -60.98],
+  //       name  : 'Saint Lucia'
+  //     },
+  //     {
+  //       latLng: [6.91, 158.18],
+  //       name  : 'Federated States of Micronesia'
+  //     },
+  //     {
+  //       latLng: [1.3, 103.8],
+  //       name  : 'Singapore'
+  //     },
+  //     {
+  //       latLng: [1.46, 173.03],
+  //       name  : 'Kiribati'
+  //     },
+  //     {
+  //       latLng: [-21.13, -175.2],
+  //       name  : 'Tonga'
+  //     },
+  //     {
+  //       latLng: [15.3, -61.38],
+  //       name  : 'Dominica'
+  //     },
+  //     {
+  //       latLng: [-20.2, 57.5],
+  //       name  : 'Mauritius'
+  //     },
+  //     {
+  //       latLng: [26.02, 50.55],
+  //       name  : 'Bahrain'
+  //     },
+  //     {
+  //       latLng: [0.33, 6.73],
+  //       name  : 'São Tomé and Príncipe'
+  //     }
+  //   ]
+  // })
 
   /* SPARKLINE CHARTS
    * ----------------

index.html

@@ -12,18 +12,16 @@
   <link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
   <!-- Tempusdominus Bbootstrap 4 -->
   <link rel="stylesheet" href="plugins/tempusdominus-bootstrap-4/css/tempusdominus-bootstrap-4.min.css">
+  <!-- iCheck -->
+  <link rel="stylesheet" href="plugins/icheck-bootstrap/icheck-bootstrap.min.css">
+  <!-- JQVMap -->
+  <link rel="stylesheet" href="plugins/jqvmap/jqvmap.min.css">
   <!-- Theme style -->
   <link rel="stylesheet" href="dist/css/adminlte.min.css">
   <!-- overlayScrollbars -->
   <link rel="stylesheet" href="plugins/overlayScrollbars/css/OverlayScrollbars.min.css">
-  <!-- iCheck -->
-  <link rel="stylesheet" href="plugins/iCheck/flat/blue.css">
-  <!-- Morris chart -->
-  <link rel="stylesheet" href="plugins/morris/morris.css">
-  <!-- jvectormap -->
-  <link rel="stylesheet" href="plugins/jvectormap/jquery-jvectormap-1.2.2.css">
   <!-- Daterange picker -->
-  <link rel="stylesheet" href="plugins/daterangepicker/daterangepicker-bs3.css">
+  <link rel="stylesheet" href="plugins/daterangepicker/daterangepicker.css">
   <!-- summernote -->
   <link rel="stylesheet" href="plugins/summernote/summernote-bs4.css">
   <!-- Google Font: Source Sans Pro -->
@@ -654,8 +652,12 @@
                 <div class="tab-content p-0">
                   <!-- Morris chart - Sales -->
                   <div class="chart tab-pane active" id="revenue-chart"
-                       style="position: relative; height: 300px;"></div>
-                  <div class="chart tab-pane" id="sales-chart" style="position: relative; height: 300px;"></div>
+                       style="position: relative; height: 300px;">
+                      <canvas id="revenue-chart-canvas" height="300" style="height: 300px;"></canvas>                         
+                   </div>
+                  <div class="chart tab-pane" id="sales-chart" style="position: relative; height: 300px;">
+                    <canvas id="sales-chart-canvas" height="300" style="height: 300px;"></canvas>                         
+                  </div>  
                 </div>
               </div><!-- /.card-body -->
             </div>
@@ -891,7 +893,10 @@
                       <i class="fas fa-ellipsis-v"></i>
                     </span>
                     <!-- checkbox -->
-                    <input type="checkbox" value="" name="">
+                    <div  class="icheck-primary d-inline ml-2">
+                      <input type="checkbox" value="" name="todo1" id="todoCheck1">
+                      <label for="todoCheck1"></label>
+                    </div>
                     <!-- todo text -->
                     <span class="text">Design a nice theme</span>
                     <!-- Emphasis label -->
@@ -907,7 +912,10 @@
                       <i class="fas fa-ellipsis-v"></i>
                       <i class="fas fa-ellipsis-v"></i>
                     </span>
-                    <input type="checkbox" value="" name="">
+                    <div  class="icheck-primary d-inline ml-2">
+                      <input type="checkbox" value="" name="todo2" id="todoCheck2">
+                      <label for="todoCheck2"></label>
+                    </div>
                     <span class="text">Make the theme responsive</span>
                     <small class="badge badge-info"><i class="far fa-clock"></i> 4 hours</small>
                     <div class="tools">
@@ -920,7 +928,10 @@
                       <i class="fas fa-ellipsis-v"></i>
                       <i class="fas fa-ellipsis-v"></i>
                     </span>
-                    <input type="checkbox" value="" name="">
+                    <div  class="icheck-primary d-inline ml-2">
+                      <input type="checkbox" value="" name="todo3" id="todoCheck3">
+                      <label for="todoCheck3"></label>
+                    </div>
                     <span class="text">Let theme shine like a star</span>
                     <small class="badge badge-warning"><i class="far fa-clock"></i> 1 day</small>
                     <div class="tools">
@@ -933,7 +944,10 @@
                       <i class="fas fa-ellipsis-v"></i>
                       <i class="fas fa-ellipsis-v"></i>
                     </span>
-                    <input type="checkbox" value="" name="">
+                    <div  class="icheck-primary d-inline ml-2">
+                      <input type="checkbox" value="" name="todo4" id="todoCheck4">
+                      <label for="todoCheck4"></label>
+                    </div>
                     <span class="text">Let theme shine like a star</span>
                     <small class="badge badge-success"><i class="far fa-clock"></i> 3 days</small>
                     <div class="tools">
@@ -946,7 +960,10 @@
                       <i class="fas fa-ellipsis-v"></i>
                       <i class="fas fa-ellipsis-v"></i>
                     </span>
-                    <input type="checkbox" value="" name="">
+                    <div  class="icheck-primary d-inline ml-2">
+                      <input type="checkbox" value="" name="todo5" id="todoCheck5">
+                      <label for="todoCheck5"></label>
+                    </div>
                     <span class="text">Check your messages and notifications</span>
                     <small class="badge badge-primary"><i class="far fa-clock"></i> 1 week</small>
                     <div class="tools">
@@ -959,7 +976,10 @@
                       <i class="fas fa-ellipsis-v"></i>
                       <i class="fas fa-ellipsis-v"></i>
                     </span>
-                    <input type="checkbox" value="" name="">
+                    <div  class="icheck-primary d-inline ml-2">
+                      <input type="checkbox" value="" name="todo6" id="todoCheck6">
+                      <label for="todoCheck6"></label>
+                    </div>
                     <span class="text">Let theme shine like a star</span>
                     <small class="badge badge-secondary"><i class="far fa-clock"></i> 1 month</small>
                     <div class="tools">
@@ -1050,7 +1070,7 @@
                 </div>
               </div>
               <div class="card-body">
-                <div class="chart" id="line-chart" style="height: 250px;"></div>
+                <canvas class="chart" id="line-chart" style="height: 250px;"></canvas>
               </div>
               <!-- /.card-body -->
               <div class="card-footer bg-transparent">
@@ -1149,28 +1169,26 @@
 <!-- jQuery -->
 <script src="plugins/jquery/jquery.min.js"></script>
 <!-- jQuery UI 1.11.4 -->
-<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
+<script src="plugins/jquery-ui/jquery-ui.min.js"></script>
 <!-- Resolve conflict in jQuery UI tooltip with Bootstrap tooltip -->
 <script>
   $.widget.bridge('uibutton', $.ui.button)
 </script>
 <!-- Bootstrap 4 -->
 <script src="plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
-<!-- Morris.js charts -->
-<script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
-<script src="plugins/morris/morris.min.js"></script>
+<!-- ChartJS -->
+<script src="plugins/chart.js/Chart.min.js"></script>
 <!-- Sparkline -->
-<script src="plugins/sparkline/jquery.sparkline.min.js"></script>
-<!-- jvectormap -->
-<script src="plugins/jvectormap/jquery-jvectormap-1.2.2.min.js"></script>
-<script src="plugins/jvectormap/jquery-jvectormap-world-mill-en.js"></script>
+<script src="plugins/sparklines/sparkline.js"></script>
+<!-- JQVMap -->
+<script src="plugins/jqvmap/jquery.vmap.min.js"></script>
+<script src="plugins/jqvmap/maps/jquery.vmap.world.js"></script>
 <!-- jQuery Knob Chart -->
-<script src="plugins/knob/jquery.knob.js"></script>
+<script src="plugins/jquery-knob/jquery.knob.min.js"></script>
 <!-- daterangepicker -->
-<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.2/moment.min.js"></script>
+<script src="plugins/moment/moment.min.js"></script>
 <script src="plugins/daterangepicker/daterangepicker.js"></script>
 <!-- Tempusdominus Bootstrap 4 -->
-<script src="plugins/moment/moment.min.js"></script>
 <script src="plugins/tempusdominus-bootstrap-4/js/tempusdominus-bootstrap-4.min.js"></script>
 <!-- Summernote -->
 <script src="plugins/summernote/summernote-bs4.min.js"></script>

index2.html

@@ -588,7 +588,7 @@
 
           <div class="col-12 col-sm-6 col-md-3">
             <div class="info-box mb-3">
-              <span class="info-box-icon bg-success elevation-1"><i class="float-sm-left fa-shopping-cart"></i></span>
+              <span class="info-box-icon bg-success elevation-1"><i class="fas fa-shopping-cart"></i></span>
 
               <div class="info-box-content">
                 <span class="info-box-text">Sales</span>
@@ -774,7 +774,9 @@
                 <div class="d-md-flex">
                   <div class="p-1 flex-1" style="overflow: hidden">
                     <!-- Map will be created here -->
-                    <div id="world-map-markers" style="height: 325px; overflow: hidden"></div>
+                    <div id="world-map-markers" style="height: 325px; overflow: hidden">
+                      <div class="map"></div>
+                    </div>
                   </div>
                   <div class="card-pane-right bg-success pt-2 pb-2 pl-4 pr-4">
                     <div class="description-block mb-4">
@@ -1409,11 +1411,11 @@
 <script src="dist/js/demo.js"></script>
 
 <!-- PAGE PLUGINS -->
-<!-- SparkLine -->
-<script src="plugins/sparkline/jquery.sparkline.min.js"></script>
-<!-- jVectorMap -->
-<script src="plugins/jvectormap/jquery-jvectormap-1.2.2.min.js"></script>
-<script src="plugins/jvectormap/jquery-jvectormap-world-mill-en.js"></script>
+<!-- jQuery Mapael -->
+<script src="plugins/jquery-mousewheel/jquery.mousewheel.js"></script>
+<script src="plugins/raphael/raphael.min.js"></script>
+<script src="plugins/jquery-mapael/jquery.mapael.min.js"></script>
+<script src="plugins/jquery-mapael/maps/world_countries.min.js"></script>
 <!-- ChartJS -->
 <script src="plugins/chart.js/Chart.min.js"></script>
 

package.json

@@ -46,32 +46,49 @@
   "dependencies": {
     "@ckeditor/ckeditor5-build-classic": "^12.2.0",
     "@fortawesome/fontawesome-free": "^5.9.0",
+    "@fullcalendar/bootstrap": "^4.2.0",
+    "@fullcalendar/core": "^4.2.0",
+    "@fullcalendar/daygrid": "^4.2.0",
+    "@fullcalendar/interaction": "^4.2.0",
+    "@fullcalendar/timegrid": "^4.2.0",
+    "@lgaitan/pace-progress": "^1.0.7",
     "bootstrap": "^4.3.1",
     "bootstrap-colorpicker": "^3.1.2",
     "bootstrap-slider": "^10.6.1",
     "chart.js": "^2.8.0",
     "datatables.net": "^1.10.19",
     "datatables.net-bs4": "^1.10.19",
+    "daterangepicker": "^3.0.5",
     "fastclick": "^1.0.6",
     "flot": "^3.1.1",
+    "icheck-bootstrap": "^3.0.1",
+    "inputmask": "^4.0.8",
+    "ion-rangeslider": "^2.3.0",
     "jquery": "^3.4.1",
-    "jquery-ui": "^1.12.1",
+    "jquery-knob-chif": "^1.2.13",
+    "jquery-mapael": "^2.2.0",
+    "jquery-mousewheel": "^3.1.13",
+    "jquery-ui-dist": "^1.12.1",
+    "jqvmap": "github:CivilError/jqvmap",
     "moment": "^2.24.0",
-    "overlayscrollbars": "^1.7.1",
+    "overlayscrollbars": "^1.7.2",
     "popper.js": "^1.15.0",
+    "raphael": "^2.2.8",
+    "select2": "^4.0.7",
+    "sparklines": "^1.2.0",
     "summernote": "^0.8.12",
     "tempusdominus-bootstrap-4": "^5.1.2"
   },
   "devDependencies": {
+    "@babel/cli": "^7.4.4",
+    "@babel/core": "^7.4.5",
+    "@babel/plugin-external-helpers": "^7.2.0",
+    "@babel/preset-env": "^7.4.5",
     "autoprefixer": "^8.6.5",
-    "babel-cli": "^6.26.0",
-    "babel-core": "^6.26.3",
     "babel-eslint": "^8.2.6",
-    "babel-plugin-external-helpers": "^6.22.0",
-    "babel-preset-env": "^1.7.0",
     "browser-sync": "^2.26.7",
     "clean-css-cli": "^4.3.0",
-    "css-loader": "^0.28.11",
+    "css-loader": "^3.0.0",
     "eslint": "^4.19.1",
     "eslint-plugin-compat": "^2.7.0",
     "extract-text-webpack-plugin": "^3.0.2",
@@ -82,8 +99,8 @@
     "npm-run-all": "^4.1.5",
     "path": "^0.12.7",
     "postcss-cli": "^5.0.1",
-    "rollup": "^0.55.5",
-    "rollup-plugin-babel": "^3.0.7",
+    "rollup": "^1.15.1",
+    "rollup-plugin-babel": "^4.3.2",
     "style-loader": "^0.19.1",
     "uglify-js": "^3.6.0"
   }

pages/UI/sliders.html

@@ -12,9 +12,7 @@
   <!-- Ionicons -->
   <link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
   <!-- Ion Slider -->
-  <link rel="stylesheet" href="../../plugins/ionslider/ion.rangeSlider.css">
-  <!-- ion slider Nice -->
-  <link rel="stylesheet" href="../../plugins/ionslider/ion.rangeSlider.skinNice.css">
+  <link rel="stylesheet" href="../../plugins/ion-rangeslider/css/ion.rangeSlider.min.css">
   <!-- bootstrap slider -->
   <link rel="stylesheet" href="../../plugins/bootstrap-slider/css/bootstrap-slider.min.css">
   <!-- Theme style -->
@@ -609,56 +607,80 @@
               <div class="card-body">
                 <div class="row margin">
                   <div class="col-sm-6">
-                    <input type="text" value="" class="slider form-control" data-slider-min="-200" data-slider-max="200"
+                    <div class="slider-red">
+                      <input type="text" value="" class="slider form-control" data-slider-min="-200" data-slider-max="200"
                            data-slider-step="5" data-slider-value="[-100,100]" data-slider-orientation="horizontal"
-                           data-slider-selection="before" data-slider-tooltip="show" data-slider-id="red">
+                           data-slider-selection="before" data-slider-tooltip="show">
+                    </div>
 
-                    <p>data-slider-id="red"</p>
-                    <input type="text" value="" class="slider form-control" data-slider-min="-200" data-slider-max="200"
+                    <p>.slider-red input.slider</p>
+                    <div class="slider-blue">
+                      <input type="text" value="" class="slider form-control" data-slider-min="-200" data-slider-max="200"
                            data-slider-step="5" data-slider-value="[-100,100]" data-slider-orientation="horizontal"
-                           data-slider-selection="before" data-slider-tooltip="show" data-slider-id="blue">
+                           data-slider-selection="before" data-slider-tooltip="show">
+                    </div>
 
-                    <p>data-slider-id="blue"</p>
-                    <input type="text" value="" class="slider form-control" data-slider-min="-200" data-slider-max="200"
+                    <p>.slider-blue input.slider</p>
+                    <div class="slider-green">
+                      <input type="text" value="" class="slider form-control" data-slider-min="-200" data-slider-max="200"
                            data-slider-step="5" data-slider-value="[-100,100]" data-slider-orientation="horizontal"
-                           data-slider-selection="before" data-slider-tooltip="show" data-slider-id="green">
+                           data-slider-selection="before" data-slider-tooltip="show">
+                    </div>
 
-                    <p>data-slider-id="green"</p>
-                    <input type="text" value="" class="slider form-control" data-slider-min="-200" data-slider-max="200"
+                    <p>.slider-green input.slider</p>
+                    <div class="slider-yellow">
+                      <input type="text" value="" class="slider form-control" data-slider-min="-200" data-slider-max="200"
                            data-slider-step="5" data-slider-value="[-100,100]" data-slider-orientation="horizontal"
-                           data-slider-selection="before" data-slider-tooltip="show" data-slider-id="yellow">
+                           data-slider-selection="before" data-slider-tooltip="show">
+                    </div>
 
-                    <p>data-slider-id="yellow"</p>
-                    <input type="text" value="" class="slider form-control" data-slider-min="-200" data-slider-max="200"
+                    <p>.slider-yellow input.slider</p>
+                    <div class="slider-teal">
+                      <input type="text" value="" class="slider form-control" data-slider-min="-200" data-slider-max="200"
                            data-slider-step="5" data-slider-value="[-100,100]" data-slider-orientation="horizontal"
-                           data-slider-selection="before" data-slider-tooltip="show" data-slider-id="teal">
+                           data-slider-selection="before" data-slider-tooltip="show">
+                    </div>
 
-                    <p>data-slider-id="teal"</p>
-                    <input type="text" value="" class="slider form-control" data-slider-min="-200" data-slider-max="200"
+                    <p>.slider-teal input.slider</p>
+                    <div class="slider-purple">
+                      <input type="text" value="" class="slider form-control" data-slider-min="-200" data-slider-max="200"
                            data-slider-step="5" data-slider-value="[-100,100]" data-slider-orientation="horizontal"
-                           data-slider-selection="before" data-slider-tooltip="show" data-slider-id="purple">
+                           data-slider-selection="before" data-slider-tooltip="show">
+                    </div>
 
-                    <p style="margin-top: 10px">data-slider-id="purple"</p>
+                    <p>.slider-purple input.slider</p>
                   </div>
-                  <div class="col-sm-6 text-center">
-                    <input type="text" value="" class="slider form-control" data-slider-min="-200" data-slider-max="200"
+                  <div class="col-sm-6 d-flex justify-content-center">
+                    <div class="slider-red mx-3">
+                      <input type="text" value="" class="slider form-control" data-slider-min="-200" data-slider-max="200"
                            data-slider-step="5" data-slider-value="[-100,100]" data-slider-orientation="vertical"
-                           data-slider-selection="before" data-slider-tooltip="show" data-slider-id="red">
-                    <input type="text" value="" class="slider form-control" data-slider-min="-200" data-slider-max="200"
+                           data-slider-selection="before" data-slider-tooltip="show">
+                    </div>
+                    <div class="slider-blue mx-3">
+                      <input type="text" value="" class="slider form-control" data-slider-min="-200" data-slider-max="200"
                            data-slider-step="5" data-slider-value="[-100,100]" data-slider-orientation="vertical"
-                           data-slider-selection="before" data-slider-tooltip="show" data-slider-id="blue">
-                    <input type="text" value="" class="slider form-control" data-slider-min="-200" data-slider-max="200"
+                           data-slider-selection="before" data-slider-tooltip="show">
+                    </div>
+                    <div class="slider-green mx-3">
+                      <input type="text" value="" class="slider form-control" data-slider-min="-200" data-slider-max="200"
                            data-slider-step="5" data-slider-value="[-100,100]" data-slider-orientation="vertical"
-                           data-slider-selection="before" data-slider-tooltip="show" data-slider-id="green">
-                    <input type="text" value="" class="slider form-control" data-slider-min="-200" data-slider-max="200"
+                           data-slider-selection="before" data-slider-tooltip="show">
+                    </div>
+                    <div class="slider-yellow mx-3">
+                      <input type="text" value="" class="slider form-control" data-slider-min="-200" data-slider-max="200"
                            data-slider-step="5" data-slider-value="[-100,100]" data-slider-orientation="vertical"
-                           data-slider-selection="before" data-slider-tooltip="show" data-slider-id="yellow">
-                    <input type="text" value="" class="slider form-control" data-slider-min="-200" data-slider-max="200"
+                           data-slider-selection="before" data-slider-tooltip="show">
+                    </div>
+                    <div class="slider-teal mx-3">
+                      <input type="text" value="" class="slider form-control" data-slider-min="-200" data-slider-max="200"
                            data-slider-step="5" data-slider-value="[-100,100]" data-slider-orientation="vertical"
-                           data-slider-selection="before" data-slider-tooltip="show" data-slider-id="teal">
-                    <input type="text" value="" class="slider form-control" data-slider-min="-200" data-slider-max="200"
+                           data-slider-selection="before" data-slider-tooltip="show">
+                    </div>
+                    <div class="slider-purple mx-3">
+                      <input type="text" value="" class="slider form-control" data-slider-min="-200" data-slider-max="200"
                            data-slider-step="5" data-slider-value="[-100,100]" data-slider-orientation="vertical"
-                           data-slider-selection="before" data-slider-tooltip="show" data-slider-id="purple">
+                           data-slider-selection="before" data-slider-tooltip="show">
+                    </div>
                   </div>
                 </div>
               </div>
@@ -702,7 +724,7 @@
 <!-- AdminLTE for demo purposes -->
 <script src="../../dist/js/demo.js"></script>
 <!-- Ion Slider -->
-<script src="../../plugins/ionslider/ion.rangeSlider.min.js"></script>
+<script src="../../plugins/ion-rangeslider/js/ion.rangeSlider.min.js"></script>
 <!-- Bootstrap slider -->
 <script src="../../plugins/bootstrap-slider/bootstrap-slider.min.js"></script>
 <script>

pages/calendar.html

@@ -10,9 +10,12 @@
   <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">
   <!-- Ionicons -->
   <link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
-  <!-- fullCalendar 2.2.5-->
-  <link rel="stylesheet" href="../plugins/fullcalendar/fullcalendar.min.css">
-  <link rel="stylesheet" href="../plugins/fullcalendar/fullcalendar.print.css" media="print">
+  <!-- fullCalendar -->
+  <link rel="stylesheet" href="../plugins/fullcalendar/main.min.css">
+  <link rel="stylesheet" href="../plugins/fullcalendar-interaction/main.min.css">
+  <link rel="stylesheet" href="../plugins/fullcalendar-daygrid/main.min.css">
+  <link rel="stylesheet" href="../plugins/fullcalendar-timegrid/main.min.css">
+  <link rel="stylesheet" href="../plugins/fullcalendar-bootstrap/main.min.css">
   <!-- Theme style -->
   <link rel="stylesheet" href="../dist/css/adminlte.min.css">
   <!-- Google Font: Source Sans Pro -->
@@ -646,10 +649,10 @@
 
 <!-- jQuery -->
 <script src="../plugins/jquery/jquery.min.js"></script>
-<!-- Bootstrap 4 -->
+<!-- Bootstrap -->
 <script src="../plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
-<!-- jQuery UI 1.11.4 -->
-<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
+<!-- jQuery UI -->
+<script src="../plugins/jquery-ui/jquery-ui.min.js"></script>
 <!-- FastClick -->
 <script src="../plugins/fastclick/fastclick.js"></script>
 <!-- AdminLTE App -->
@@ -657,8 +660,12 @@
 <!-- AdminLTE for demo purposes -->
 <script src="../dist/js/demo.js"></script>
 <!-- fullCalendar 2.2.5 -->
-<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.2/moment.min.js"></script>
-<script src="../plugins/fullcalendar/fullcalendar.min.js"></script>
+<script src="../plugins/moment/moment.min.js"></script>
+<script src="../plugins/fullcalendar/main.min.js"></script>
+<script src="../plugins/fullcalendar-daygrid/main.min.js"></script>
+<script src="../plugins/fullcalendar-timegrid/main.min.js"></script>
+<script src="../plugins/fullcalendar-interaction/main.min.js"></script>
+<script src="../plugins/fullcalendar-bootstrap/main.min.js"></script>
 <!-- Page specific script -->
 <script>
   $(function () {
@@ -696,17 +703,36 @@
     var d    = date.getDate(),
         m    = date.getMonth(),
         y    = date.getFullYear()
-    $('#calendar').fullCalendar({
+
+    var Calendar = FullCalendar.Calendar;
+    var Draggable = FullCalendarInteraction.Draggable;
+
+    var containerEl = document.getElementById('external-events');
+    var checkbox = document.getElementById('drop-remove');
+    var calendarEl = document.getElementById('calendar');
+
+    // initialize the external events
+    // -----------------------------------------------------------------
+
+    new Draggable(containerEl, {
+      itemSelector: '.external-event',
+      eventData: function(eventEl) {
+        console.log(eventEl);
+        return {
+          title: eventEl.innerText,
+          backgroundColor: window.getComputedStyle( eventEl ,null).getPropertyValue('background-color'),
+          borderColor: window.getComputedStyle( eventEl ,null).getPropertyValue('background-color'),
+          textColor: window.getComputedStyle( eventEl ,null).getPropertyValue('color'),
+        };
+      }
+    });
+
+    var calendar = new Calendar(calendarEl, {
+      plugins: [ 'bootstrap', 'interaction', 'dayGrid', 'timeGrid' ],
       header    : {
         left  : 'prev,next today',
         center: 'title',
-        right : 'month,agendaWeek,agendaDay'
-      },
-      buttonText: {
-        today: 'today',
-        month: 'month',
-        week : 'week',
-        day  : 'day'
+        right : 'dayGridMonth,timeGridWeek,timeGridDay'
       },
       //Random default events
       events    : [
@@ -757,32 +783,17 @@
       ],
       editable  : true,
       droppable : true, // this allows things to be dropped onto the calendar !!!
-      drop      : function (date, allDay) { // this function is called when something is dropped
-
-        // retrieve the dropped element's stored Event Object
-        var originalEventObject = $(this).data('eventObject')
-
-        // we need to copy it, so that multiple events don't have a reference to the same object
-        var copiedEventObject = $.extend({}, originalEventObject)
-
-        // assign it the date that was reported
-        copiedEventObject.start           = date
-        copiedEventObject.allDay          = allDay
-        copiedEventObject.backgroundColor = $(this).css('background-color')
-        copiedEventObject.borderColor     = $(this).css('border-color')
-
-        // render the event on the calendar
-        // the last `true` argument determines if the event "sticks" (http://arshaw.com/fullcalendar/docs/event_rendering/renderEvent/)
-        $('#calendar').fullCalendar('renderEvent', copiedEventObject, true)
-
+      drop      : function(info) {
         // is the "remove after drop" checkbox checked?
-        if ($('#drop-remove').is(':checked')) {
+        if (checkbox.checked) {
           // if so, remove the element from the "Draggable Events" list
-          $(this).remove()
+          info.draggedEl.parentNode.removeChild(info.draggedEl);
         }
+      }    
+    });
 
-      }
-    })
+    calendar.render();
+    // $('#calendar').fullCalendar()
 
     /* ADDING EVENTS */
     var currColor = '#3c8dbc' //Red by default

pages/charts/flot.html

@@ -706,6 +706,8 @@
 
 <!-- jQuery -->
 <script src="../../plugins/jquery/jquery.min.js"></script>
+<!-- jQuery UI -->
+<script src="../../plugins/jquery-ui/jquery-ui.min.js"></script>
 <!-- Bootstrap 4 -->
 <script src="../../plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
 <!-- FastClick -->
@@ -715,13 +717,11 @@
 <!-- AdminLTE for demo purposes -->
 <script src="../../dist/js/demo.js"></script>
 <!-- FLOT CHARTS -->
-<script src="../../plugins/flot/jquery.flot.min.js"></script>
+<script src="../../plugins/flot/jquery.flot.js"></script>
 <!-- FLOT RESIZE PLUGIN - allows the chart to redraw when the window is resized -->
-<script src="../../plugins/flot/jquery.flot.resize.min.js"></script>
+<script src="../../plugins/flot-old/jquery.flot.resize.min.js"></script>
 <!-- FLOT PIE PLUGIN - also used to draw donut charts -->
-<script src="../../plugins/flot/jquery.flot.pie.min.js"></script>
-<!-- FLOT CATEGORIES PLUGIN - Used to draw bar charts -->
-<script src="../../plugins/flot/jquery.flot.categories.min.js"></script>
+<script src="../../plugins/flot-old/jquery.flot.pie.min.js"></script>
 <!-- Page script -->
 <script>
   $(function () {
@@ -764,29 +764,35 @@
       return res
     }
 
-    var interactive_plot = $.plot('#interactive', [getRandomData()], {
-      grid  : {
-        borderColor: '#f3f3f3',
-        borderWidth: 1,
-        tickColor  : '#f3f3f3'
-      },
-      series: {
-        shadowSize: 0, // Drawing is faster without shadows
-        color     : '#3c8dbc'
-      },
-      lines : {
-        fill : true, //Converts the line chart to area chart
-        color: '#3c8dbc'
-      },
-      yaxis : {
-        min : 0,
-        max : 100,
-        show: true
-      },
-      xaxis : {
-        show: true
+    var interactive_plot = $.plot('#interactive', [
+        {
+          data: getRandomData(),
+        }
+      ],
+      {
+        grid: {
+          borderColor: '#f3f3f3',
+          borderWidth: 1,
+          tickColor: '#f3f3f3'
+        },
+        series: {
+          color: '#3c8dbc',
+          lines: {
+            lineWidth: 2,
+            show: true,
+            fill: true,
+          },
+        },
+        yaxis: {
+          min: 0,
+          max: 100,
+          show: true
+        },
+        xaxis: {
+          show: true
+        }
       }
-    })
+    )
 
     var updateInterval = 500 //Fetch data ever x milliseconds
     var realtime       = 'on' //If == to on then fetch data every x seconds. else stop fetching
@@ -905,10 +911,10 @@
       },
       series: {
         shadowSize: 0, // Drawing is faster without shadows
-        color     : '#00c0ef'
-      },
-      lines : {
-        fill: true //Converts the line chart to area chart
+        color     : '#00c0ef',
+        lines : {
+          fill: true //Converts the line chart to area chart
+        },
       },
       yaxis : {
         show: false
@@ -926,8 +932,8 @@
      */
 
     var bar_data = {
-      data : [['January', 10], ['February', 8], ['March', 4], ['April', 13], ['May', 17], ['June', 9]],
-      color: '#3c8dbc'
+      data : [[1,10], [2,8], [3,4], [4,13], [5,17], [6,9]],
+      bars: { show: true }
     }
     $.plot('#bar-chart', [bar_data], {
       grid  : {
@@ -936,15 +942,13 @@
         tickColor  : '#f3f3f3'
       },
       series: {
-        bars: {
-          show    : true,
-          barWidth: 0.5,
-          align   : 'center'
-        }
+         bars: {
+          show: true, barWidth: 0.5, align: 'center',
+        },
       },
+      colors: ['#3c8dbc'],
       xaxis : {
-        mode      : 'categories',
-        tickLength: 0
+        ticks: [[1,'January'], [2,'February'], [3,'March'], [4,'April'], [5,'May'], [6,'June']]
       }
     })
     /* END BAR CHART */

pages/charts/inline.html

@@ -747,189 +747,6 @@
         </div>
         <!-- /.row -->
 
-        <!-- callout -->
-        <div class="callout callout-info">
-          <h5>The following was created using data tags</h5>
-
-          <p>The following three inline (sparkline) chart have been initialized to read and interpret data tags</p>
-        </div>
-        <!-- /.callout -->
-
-        <div class="row">
-          <div class="col-md-4">
-            <div class="card">
-              <div class="card-header">
-                <h3 class="card-title text-danger">Sparkline Pie</h3>
-
-                <div class="card-tools">
-                  <button type="button" class="btn btn-tool"><i class="fas fa-refresh"></i></button>
-                </div>
-              </div>
-              <!-- /.card-header -->
-              <div class="card-body text-center">
-                <div class="sparkline" data-type="pie" data-offset="90" data-width="100px" data-height="100px">
-                  6,4,8
-                </div>
-              </div>
-              <!-- /.card-body -->
-            </div>
-            <!-- /.card -->
-          </div>
-          <!-- /.col -->
-
-          <div class="col-md-4">
-            <div class="card">
-              <div class="card-header">
-                <h3 class="card-title text-primary">Sparkline line</h3>
-
-                <div class="card-tools">
-                  <button type="button" class="btn btn-tool"><i class="fas fa-refresh"></i></button>
-                </div>
-              </div>
-              <!-- /.card-header -->
-              <div class="card-body text-center">
-                <div class="sparkline" data-type="line" data-spot-Radius="3" data-highlight-Spot-Color="#f39c12"
-                     data-highlight-Line-Color="#222" data-min-Spot-Color="#f56954" data-max-Spot-Color="#00a65a"
-                     data-spot-Color="#39CCCC" data-offset="90" data-width="100%" data-height="100px"
-                     data-line-Width="2" data-line-Color="#39CCCC" data-fill-Color="rgba(57, 204, 204, 0.08)">
-                  6,4,7,8,4,3,2,2,5,6,7,4,1,5,7,9,9,8,7,6
-                </div>
-              </div>
-              <!-- /.card-body -->
-            </div>
-            <!-- /.card -->
-          </div>
-          <!-- /.col -->
-
-          <div class="col-md-4">
-            <div class="card">
-              <div class="card-header">
-                <h3 class="card-title text-warning">Sparkline Bar</h3>
-
-                <div class="card-tools">
-                  <button type="button" class="btn btn-tool"><i class="fas fa-refresh"></i></button>
-                </div>
-              </div>
-              <!-- /.card-header -->
-              <div class="card-body text-center">
-                <div class="sparkline" data-type="bar" data-width="97%" data-height="100px" data-bar-Width="14"
-                     data-bar-Spacing="7" data-bar-Color="#f39c12">
-                  6,4,8, 9, 10, 5, 13, 18, 21, 7, 9
-                </div>
-              </div>
-              <!-- /.card-body -->
-            </div>
-            <!-- /.card -->
-          </div>
-          <!-- /.col -->
-        </div>
-        <!-- /.row -->
-
-        <div class="row">
-          <div class="col-12">
-            <div class="card">
-              <div class="card-header">
-                <h3 class="card-title">Sparkline examples</h3>
-
-                <div class="card-tools">
-                  <button type="button" class="btn btn-tool" data-widget="collapse"><i
-                      class="fas fa-minus"></i>
-                  </button>
-                  <button type="button" class="btn btn-tool" data-widget="remove"><i class="fas fa-times"></i>
-                  </button>
-                </div>
-              </div>
-              <!-- /.card-header -->
-              <div id="myBody" class="card-body">
-                <div class="row">
-                  <div class="col-sm-6">
-                    <p>
-                      Mouse speed <span id="mousespeed">Loading..</span>
-                    </p>
-
-                    <p>
-                      Inline <span class="sparkline-1">10,8,9,3,5,8,5</span>
-                      line graphs
-                      <span class="sparkline-1">8,4,0,0,0,0,1,4,4,10,10,10,10,0,0,0,4,6,5,9,10</span>
-                    </p>
-
-                    <p>
-                      Bar charts <span class="sparkbar">10,8,9,3,5,8,5</span>
-                      negative values: <span class="sparkbar">-3,1,2,0,3,-1</span>
-                      stacked: <span class="sparkbar">0:2,2:4,4:2,4:1</span>
-                    </p>
-
-                    <p>
-                      Composite inline
-                      <span id="compositeline">8,4,0,0,0,0,1,4,4,10,10,10,10,0,0,0,4,6,5,9,10</span>
-                    </p>
-
-                    <p>
-                      Inline with normal range
-                      <span id="normalline">8,4,0,0,0,0,1,4,4,10,10,10,10,0,0,0,4,6,5,9,10</span>
-                    </p>
-
-                    <p>
-                      Composite bar
-                      <span id="compositebar">4,6,7,7,4,3,2,1,4</span>
-                    </p>
-
-                    <p>
-                      Discrete
-                      <span class="discrete1">4,6,7,7,4,3,2,1,4,4,5,6,7,6,6,2,4,5</span><br>
-
-                      Discrete with threshold
-                      <span id="discrete2">4,6,7,7,4,3,2,1,4</span>
-                    </p>
-
-                    <p>
-                      Bullet charts<br>
-                      <span class="sparkbullet">10,12,12,9,7</span><br>
-                      <span class="sparkbullet">14,12,12,9,7</span><br>
-                      <span class="sparkbullet">10,12,14,9,7</span><br>
-                    </p>
-                  </div>
-                  <!-- /.col -->
-                  <div class="col-sm-6">
-                    <p>
-                      Customize size and colours
-                      <span id="linecustom">10,8,9,3,5,8,5,7</span>
-                    </p>
-
-                    <p>
-                      Tristate charts
-                      <span class="sparktristate">1,1,0,1,-1,-1,1,-1,0,0,1,1</span><br>
-                      (think games won, lost or drawn)
-                    </p>
-
-                    <p>
-                      Tristate chart using a colour map:
-                      <span class="sparktristatecols">1,2,0,2,-1,-2,1,-2,0,0,1,1</span>
-                    </p>
-
-                    <p>
-                      Box Plot: <span class="sparkboxplot">4,27,34,52,54,59,61,68,78,82,85,87,91,93,100</span><br>
-                      Pre-computed box plot <span class="sparkboxplotraw">Loading..</span>
-                    </p>
-
-                    <p>
-                      Pie charts
-                      <span class="sparkpie">1,1,2</span>
-                      <span class="sparkpie">1,5</span>
-                      <span class="sparkpie">20,50,80</span>
-                    </p>
-                  </div>
-                  <!-- /.col -->
-                </div>
-                <!-- /.row -->
-              </div>
-              <!-- /.card-body -->
-            </div>
-            <!-- /.card -->
-          </div>
-          <!-- /.col -->
-        </div>
-        <!-- /.row -->
       </div><!-- /.container-fluid -->
     </section>
     <!-- /.content -->
@@ -962,7 +779,7 @@
 <!-- AdminLTE for demo purposes -->
 <script src="../../dist/js/demo.js"></script>
 <!-- jQuery Knob -->
-<script src="../../plugins/knob/jquery.knob.js"></script>
+<script src="../../plugins/jquery-knob/jquery.knob.min.js"></script>
 <!-- Sparkline -->
 <script src="../../plugins/sparkline/jquery.sparkline.min.js"></script>
 <!-- page script -->

pages/examples/login.html

@@ -11,10 +11,10 @@
   <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">
   <!-- Ionicons -->
   <link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
+  <!-- icheck bootstrap -->
+  <link rel="stylesheet" href="../../plugins/icheck-bootstrap/icheck-bootstrap.min.css">
   <!-- Theme style -->
   <link rel="stylesheet" href="../../dist/css/adminlte.min.css">
-  <!-- iCheck -->
-  <link rel="stylesheet" href="../../plugins/iCheck/square/blue.css">
   <!-- Google Font: Source Sans Pro -->
   <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700" rel="stylesheet">
 </head>
@@ -43,9 +43,10 @@
         </div>
         <div class="row">
           <div class="col-8">
-            <div class="checkbox icheck">
-              <label>
-                <input type="checkbox"> Remember Me
+            <div class="icheck-primary">
+              <input type="checkbox" id="remember">
+              <label for="remember">
+                Remember Me
               </label>
             </div>
           </div>
@@ -84,16 +85,6 @@
 <script src="../../plugins/jquery/jquery.min.js"></script>
 <!-- Bootstrap 4 -->
 <script src="../../plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
-<!-- iCheck -->
-<script src="../../plugins/iCheck/icheck.min.js"></script>
-<script>
-  $(function () {
-    $('input').iCheck({
-      checkboxClass: 'icheckbox_square-blue',
-      radioClass   : 'iradio_square-blue',
-      increaseArea : '20%' // optional
-    })
-  })
-</script>
+
 </body>
 </html>

pages/examples/register.html

@@ -11,10 +11,10 @@
   <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">
   <!-- Ionicons -->
   <link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
+  <!-- icheck bootstrap -->
+  <link rel="stylesheet" href="../../plugins/icheck-bootstrap/icheck-bootstrap.min.css">
   <!-- Theme style -->
   <link rel="stylesheet" href="../../dist/css/adminlte.min.css">
-  <!-- iCheck -->
-  <link rel="stylesheet" href="../../plugins/iCheck/square/blue.css">
   <!-- Google Font: Source Sans Pro -->
   <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700" rel="stylesheet">
 </head>
@@ -55,9 +55,10 @@
         </div>
         <div class="row">
           <div class="col-8">
-            <div class="checkbox icheck">
-              <label>
-                <input type="checkbox"> I agree to the <a href="#">terms</a>
+            <div class="icheck-primary">
+              <input type="checkbox" id="agreeTerms" name="terms" value="agree">
+              <label for="agreeTerms">
+               I agree to the <a href="#">terms</a>
               </label>
             </div>
           </div>
@@ -92,16 +93,5 @@
 <script src="../../plugins/jquery/jquery.min.js"></script>
 <!-- Bootstrap 4 -->
 <script src="../../plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
-<!-- iCheck -->
-<script src="../../plugins/iCheck/icheck.min.js"></script>
-<script>
-  $(function () {
-    $('input').iCheck({
-      checkboxClass: 'icheckbox_square-blue',
-      radioClass   : 'iradio_square-blue',
-      increaseArea : '20%' // optional
-    })
-  })
-</script>
 </body>
 </html>

pages/forms/advanced.html

@@ -12,15 +12,15 @@
   <!-- Ionicons -->
   <link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
   <!-- daterange picker -->
-  <link rel="stylesheet" href="../../plugins/daterangepicker/daterangepicker-bs3.css">
+  <link rel="stylesheet" href="../../plugins/daterangepicker/daterangepicker.css">
   <!-- iCheck for checkboxes and radio inputs -->
-  <link rel="stylesheet" href="../../plugins/iCheck/all.css">
+  <link rel="stylesheet" href="../../plugins/icheck-bootstrap/icheck-bootstrap.min.css">
   <!-- Bootstrap Color Picker -->
   <link rel="stylesheet" href="../../plugins/bootstrap-colorpicker/css/bootstrap-colorpicker.min.css">
   <!-- Tempusdominus Bbootstrap 4 -->
   <link rel="stylesheet" href="../../plugins/tempusdominus-bootstrap-4/css/tempusdominus-bootstrap-4.min.css">
   <!-- Select2 -->
-  <link rel="stylesheet" href="../../plugins/select2/select2.min.css">
+  <link rel="stylesheet" href="../../plugins/select2/css/select2.min.css">
   <!-- Theme style -->
   <link rel="stylesheet" href="../../dist/css/adminlte.min.css">
   <!-- Google Font: Source Sans Pro -->
@@ -608,7 +608,7 @@
               <div class="col-md-6">
                 <div class="form-group">
                   <label>Multiple</label>
-                  <select class="form-control select2" multiple="multiple" data-placeholder="Select a State"
+                  <select class="select2" multiple="multiple" data-placeholder="Select a State"
                           style="width: 100%;">
                     <option>Alabama</option>
                     <option>Alaska</option>
@@ -834,97 +834,134 @@
             <!-- iCheck -->
             <div class="card card-success">
               <div class="card-header">
-                <h3 class="card-title">iCheck - Checkbox &amp; Radio Inputs</h3>
+                <h3 class="card-title">iCheck Bootstrap - Checkbox &amp; Radio Inputs</h3>
               </div>
               <div class="card-body">
                 <!-- Minimal style -->
 
                 <!-- checkbox -->
-                <div class="form-group">
-                  <label>
-                    <input type="checkbox" class="minimal" checked>
-                  </label>
-                  <label>
-                    <input type="checkbox" class="minimal">
-                  </label>
-                  <label>
-                    <input type="checkbox" class="minimal" disabled>
-                    Minimal skin checkbox
-                  </label>
+                <div class="form-group clearfix">
+                  <div class="icheck-primary d-inline">
+                    <input type="checkbox" checked>
+                    <label>
+                    </label>
+                  </div>
+                  <div class="icheck-primary d-inline">
+                    <input type="checkbox">
+                    <label>
+                    </label>
+                  </div>
+                  <div class="icheck-primary d-inline">
+                    <input type="checkbox" disabled>
+                    <label>
+                      Primary checkbox
+                    </label>
+                  </div>
                 </div>
 
                 <!-- radio -->
-                <div class="form-group">
-                  <label>
-                    <input type="radio" name="r1" class="minimal" checked>
-                  </label>
-                  <label>
-                    <input type="radio" name="r1" class="minimal">
-                  </label>
-                  <label>
-                    <input type="radio" name="r1" class="minimal" disabled>
-                    Minimal skin radio
-                  </label>
+                <div class="form-group clearfix">
+                  <div class="icheck-primary d-inline">
+                    <input type="radio" name="r1" checked>
+                    <label>
+                    </label>
+                  </div>
+                  <div class="icheck-primary d-inline">
+                    <input type="radio" name="r1">
+                    <label>
+                    </label>
+                  </div>
+                  <div class="icheck-primary d-inline">
+                    <input type="radio" name="r1" disabled>
+                    <label>
+                      Primary radio
+                    </label>
+                  </div>
                 </div>
 
                 <!-- Minimal red style -->
 
                 <!-- checkbox -->
-                <div class="form-group">
-                  <label>
-                    <input type="checkbox" class="minimal-red" checked>
-                  </label>
-                  <label>
-                    <input type="checkbox" class="minimal-red">
-                  </label>
-                  <label>
-                    <input type="checkbox" class="minimal-red" disabled>
-                    Minimal red skin checkbox
-                  </label>
+                <div class="form-group clearfix">
+                  <div class="icheck-danger d-inline">
+                    <input type="checkbox" checked>
+                    <label>
+                    </label>
+                  </div>
+                  <div class="icheck-danger d-inline">
+                    <input type="checkbox">
+                    <label>
+                    </label>
+                  </div>
+                  <div class="icheck-danger d-inline">
+                    <input type="checkbox" disabled>
+                    <label>
+                      Danger checkbox
+                    </label>
+                  </div>
                 </div>
 
                 <!-- radio -->
-                <div class="form-group">
-                  <label>
-                    <input type="radio" name="r2" class="minimal-red" checked>
-                  </label>
-                  <label>
-                    <input type="radio" name="r2" class="minimal-red">
-                  </label>
-                  <label>
-                    <input type="radio" name="r2" class="minimal-red" disabled>
-                    Minimal red skin radio
-                  </label>
+                <div class="form-group clearfix">
+                  <div class="icheck-danger d-inline">
+                    <input type="radio" name="r2" checked>
+                    <label>
+                    </label>
+                  </div>
+                  <div class="icheck-danger d-inline">
+                    <input type="radio" name="r2">
+                    <label>
+                    </label>
+                  </div>
+                  <div class="icheck-danger d-inline">
+                    <input type="radio" name="r2" disabled>
+                    <label>
+                      Danger radio
+                    </label>
+                  </div>
                 </div>
 
                 <!-- Minimal red style -->
 
+
                 <!-- checkbox -->
-                <div class="form-group">
-                  <label>
-                    <input type="checkbox" class="flat-red" checked>
-                  </label>
-                  <label>
-                    <input type="checkbox" class="flat-red">
-                  </label>
-                  <label>
-                    <input type="checkbox" class="flat-red" disabled>
-                    Flat green skin checkbox
-                  </label>
+                <div class="form-group clearfix">
+                  <div class="icheck-success d-inline">
+                    <input type="checkbox" checked>
+                    <label>
+                    </label>
+                  </div>
+                  <div class="icheck-success d-inline">
+                    <input type="checkbox">
+                    <label>
+                    </label>
+                  </div>
+                  <div class="icheck-success d-inline">
+                    <input type="checkbox" disabled>
+                    <label>
+                      Success checkbox
+                    </label>
+                  </div>
                 </div>
 
                 <!-- radio -->
-                <div class="form-group">
-                  <label>
-                    <input type="radio" name="r3" class="flat-red" checked>
-                  </label>
-                  <label>
-                    <input type="radio" name="r3" class="flat-red">
-                  </label>
-                  <label>
-                    <input type="radio" name="r3" class="flat-red" disabled>
-                    Flat green skin radio
-                  </label>
+                <div class="form-group clearfix">
+                  <div class="icheck-success d-inline">
+                    <input type="radio" name="r2" checked>
+                    <label>
+                    </label>
+                  </div>
+                  <div class="icheck-success d-inline">
+                    <input type="radio" name="r2">
+                    <label>
+                    </label>
+                  </div>
+                  <div class="icheck-success d-inline">
+                    <input type="radio" name="r2" disabled>
+                    <label>
+                      Success radio
+                    </label>
+                  </div>
                 </div>
               </div>
               <!-- /.card-body -->
@@ -963,11 +1000,9 @@
 <!-- Bootstrap 4 -->
 <script src="../../plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
 <!-- Select2 -->
-<script src="../../plugins/select2/select2.full.min.js"></script>
+<script src="../../plugins/select2/js/select2.full.min.js"></script>
 <!-- InputMask -->
-<script src="../../plugins/input-mask/jquery.inputmask.js"></script>
-<script src="../../plugins/input-mask/jquery.inputmask.date.extensions.js"></script>
-<script src="../../plugins/input-mask/jquery.inputmask.extensions.js"></script>
+<script src="../../plugins/inputmask/jquery.inputmask.bundle.js"></script>
 <script src="../../plugins/moment/moment.min.js"></script>
 <!-- date-range-picker -->
 <script src="../../plugins/daterangepicker/daterangepicker.js"></script>
@@ -975,8 +1010,6 @@
 <script src="../../plugins/bootstrap-colorpicker/js/bootstrap-colorpicker.min.js"></script>
 <!-- Tempusdominus Bootstrap 4 -->
 <script src="../../plugins/tempusdominus-bootstrap-4/js/tempusdominus-bootstrap-4.min.js"></script>
-<!-- iCheck 1.0.1 -->
-<script src="../../plugins/iCheck/icheck.min.js"></script>
 <!-- FastClick -->
 <script src="../../plugins/fastclick/fastclick.js"></script>
 <!-- AdminLTE App -->
@@ -1000,9 +1033,11 @@
     $('#reservation').daterangepicker()
     //Date range picker with time picker
     $('#reservationtime').daterangepicker({
-      timePicker         : true,
+      timePicker: true,
       timePickerIncrement: 30,
-      format             : 'MM/DD/YYYY h:mm A'
+      locale: {
+        format: 'MM/DD/YYYY hh:mm A'
+      }
     })
     //Date range as a button
     $('#daterange-btn').daterangepicker(
@@ -1023,22 +1058,6 @@
       }
     )
 
-    //iCheck for checkbox and radio inputs
-    $('input[type="checkbox"].minimal, input[type="radio"].minimal').iCheck({
-      checkboxClass: 'icheckbox_minimal-blue',
-      radioClass   : 'iradio_minimal-blue'
-    })
-    //Red color scheme for iCheck
-    $('input[type="checkbox"].minimal-red, input[type="radio"].minimal-red').iCheck({
-      checkboxClass: 'icheckbox_minimal-red',
-      radioClass   : 'iradio_minimal-red'
-    })
-    //Flat red color scheme for iCheck
-    $('input[type="checkbox"].flat-red, input[type="radio"].flat-red').iCheck({
-      checkboxClass: 'icheckbox_flat-green',
-      radioClass   : 'iradio_flat-green'
-    })
-
     //Timepicker
     $('#timepicker').datetimepicker({
       format: 'LT'

pages/mailbox/compose.html

@@ -13,8 +13,6 @@
   <link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
   <!-- Theme style -->
   <link rel="stylesheet" href="../../dist/css/adminlte.min.css">
-  <!-- iCheck -->
-  <link rel="stylesheet" href="../../plugins/iCheck/square/blue.css">
   <!-- bootstrap wysihtml5 - text editor -->
   <link rel="stylesheet" href="../../plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.min.css">
   <!-- Google Font: Source Sans Pro -->
@@ -726,8 +724,6 @@
 <script src="../../dist/js/adminlte.min.js"></script>
 <!-- AdminLTE for demo purposes -->
 <script src="../../dist/js/demo.js"></script>
-<!-- iCheck -->
-<script src="../../plugins/iCheck/icheck.min.js"></script>
 <!-- Bootstrap WYSIHTML5 -->
 <script src="../../plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.all.min.js"></script>
 <!-- Page Script -->

pages/mailbox/mailbox.html

@@ -10,10 +10,10 @@
   <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">
   <!-- Ionicons -->
   <link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
+  <!-- icheck bootstrap -->
+  <link rel="stylesheet" href="../../plugins/icheck-bootstrap/icheck-bootstrap.min.css">
   <!-- Theme style -->
   <link rel="stylesheet" href="../../dist/css/adminlte.min.css">
-  <!-- iCheck -->
-  <link rel="stylesheet" href="../../plugins/iCheck/square/blue.css">
   <!-- Google Font: Source Sans Pro -->
   <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700" rel="stylesheet">
 </head>
@@ -679,7 +679,12 @@
                 <table class="table table-hover table-striped">
                   <tbody>
                   <tr>
-                    <td><input type="checkbox"></td>
+                    <td>
+                      <div class="icheck-primary">
+                        <input type="checkbox" value="" id="check1">
+                        <label for="check1"></label>
+                      </div>
+                    </td>
                     <td class="mailbox-star"><a href="#"><i class="fas fa-star text-warning"></i></a></td>
                     <td class="mailbox-name"><a href="read-mail.html">Alexander Pierce</a></td>
                     <td class="mailbox-subject"><b>AdminLTE 3.0 Issue</b> - Trying to find a solution to this problem...
@@ -688,7 +693,12 @@
                     <td class="mailbox-date">5 mins ago</td>
                   </tr>
                   <tr>
-                    <td><input type="checkbox"></td>
+                    <td>
+                      <div class="icheck-primary">
+                        <input type="checkbox" value="" id="check2">
+                        <label for="check2"></label>
+                      </div>
+                    </td>
                     <td class="mailbox-star"><a href="#"><i class="fas fa-star-o text-warning"></i></a></td>
                     <td class="mailbox-name"><a href="read-mail.html">Alexander Pierce</a></td>
                     <td class="mailbox-subject"><b>AdminLTE 3.0 Issue</b> - Trying to find a solution to this problem...
@@ -697,7 +707,12 @@
                     <td class="mailbox-date">28 mins ago</td>
                   </tr>
                   <tr>
-                    <td><input type="checkbox"></td>
+                    <td>
+                      <div class="icheck-primary">
+                        <input type="checkbox" value="" id="check3">
+                        <label for="check3"></label>
+                      </div>
+                    </td>
                     <td class="mailbox-star"><a href="#"><i class="fas fa-star-o text-warning"></i></a></td>
                     <td class="mailbox-name"><a href="read-mail.html">Alexander Pierce</a></td>
                     <td class="mailbox-subject"><b>AdminLTE 3.0 Issue</b> - Trying to find a solution to this problem...
@@ -706,7 +721,12 @@
                     <td class="mailbox-date">11 hours ago</td>
                   </tr>
                   <tr>
-                    <td><input type="checkbox"></td>
+                    <td>
+                      <div class="icheck-primary">
+                        <input type="checkbox" value="" id="check4">
+                        <label for="check4"></label>
+                      </div>
+                    </td>
                     <td class="mailbox-star"><a href="#"><i class="fas fa-star text-warning"></i></a></td>
                     <td class="mailbox-name"><a href="read-mail.html">Alexander Pierce</a></td>
                     <td class="mailbox-subject"><b>AdminLTE 3.0 Issue</b> - Trying to find a solution to this problem...
@@ -715,7 +735,12 @@
                     <td class="mailbox-date">15 hours ago</td>
                   </tr>
                   <tr>
-                    <td><input type="checkbox"></td>
+                    <td>
+                      <div class="icheck-primary">
+                        <input type="checkbox" value="" id="check5">
+                        <label for="check5"></label>
+                      </div>
+                    </td>
                     <td class="mailbox-star"><a href="#"><i class="fas fa-star text-warning"></i></a></td>
                     <td class="mailbox-name"><a href="read-mail.html">Alexander Pierce</a></td>
                     <td class="mailbox-subject"><b>AdminLTE 3.0 Issue</b> - Trying to find a solution to this problem...
@@ -724,7 +749,12 @@
                     <td class="mailbox-date">Yesterday</td>
                   </tr>
                   <tr>
-                    <td><input type="checkbox"></td>
+                    <td>
+                      <div class="icheck-primary">
+                        <input type="checkbox" value="" id="check6">
+                        <label for="check6"></label>
+                      </div>
+                    </td>
                     <td class="mailbox-star"><a href="#"><i class="fas fa-star-o text-warning"></i></a></td>
                     <td class="mailbox-name"><a href="read-mail.html">Alexander Pierce</a></td>
                     <td class="mailbox-subject"><b>AdminLTE 3.0 Issue</b> - Trying to find a solution to this problem...
@@ -733,7 +763,12 @@
                     <td class="mailbox-date">2 days ago</td>
                   </tr>
                   <tr>
-                    <td><input type="checkbox"></td>
+                    <td>
+                      <div class="icheck-primary">
+                        <input type="checkbox" value="" id="check7">
+                        <label for="check7"></label>
+                      </div>
+                    </td>
                     <td class="mailbox-star"><a href="#"><i class="fas fa-star-o text-warning"></i></a></td>
                     <td class="mailbox-name"><a href="read-mail.html">Alexander Pierce</a></td>
                     <td class="mailbox-subject"><b>AdminLTE 3.0 Issue</b> - Trying to find a solution to this problem...
@@ -742,7 +777,12 @@
                     <td class="mailbox-date">2 days ago</td>
                   </tr>
                   <tr>
-                    <td><input type="checkbox"></td>
+                    <td>
+                      <div class="icheck-primary">
+                        <input type="checkbox" value="" id="check8">
+                        <label for="check8"></label>
+                      </div>
+                    </td>
                     <td class="mailbox-star"><a href="#"><i class="fas fa-star text-warning"></i></a></td>
                     <td class="mailbox-name"><a href="read-mail.html">Alexander Pierce</a></td>
                     <td class="mailbox-subject"><b>AdminLTE 3.0 Issue</b> - Trying to find a solution to this problem...
@@ -751,7 +791,12 @@
                     <td class="mailbox-date">2 days ago</td>
                   </tr>
                   <tr>
-                    <td><input type="checkbox"></td>
+                    <td>
+                      <div class="icheck-primary">
+                        <input type="checkbox" value="" id="check9">
+                        <label for="check9"></label>
+                      </div>
+                    </td>
                     <td class="mailbox-star"><a href="#"><i class="fas fa-star text-warning"></i></a></td>
                     <td class="mailbox-name"><a href="read-mail.html">Alexander Pierce</a></td>
                     <td class="mailbox-subject"><b>AdminLTE 3.0 Issue</b> - Trying to find a solution to this problem...
@@ -760,7 +805,12 @@
                     <td class="mailbox-date">2 days ago</td>
                   </tr>
                   <tr>
-                    <td><input type="checkbox"></td>
+                    <td>
+                      <div class="icheck-primary">
+                        <input type="checkbox" value="" id="check10">
+                        <label for="check10"></label>
+                      </div>
+                    </td>
                     <td class="mailbox-star"><a href="#"><i class="fas fa-star-o text-warning"></i></a></td>
                     <td class="mailbox-name"><a href="read-mail.html">Alexander Pierce</a></td>
                     <td class="mailbox-subject"><b>AdminLTE 3.0 Issue</b> - Trying to find a solution to this problem...
@@ -769,7 +819,12 @@
                     <td class="mailbox-date">2 days ago</td>
                   </tr>
                   <tr>
-                    <td><input type="checkbox"></td>
+                    <td>
+                      <div class="icheck-primary">
+                        <input type="checkbox" value="" id="check11">
+                        <label for="check11"></label>
+                      </div>
+                    </td>
                     <td class="mailbox-star"><a href="#"><i class="fas fa-star-o text-warning"></i></a></td>
                     <td class="mailbox-name"><a href="read-mail.html">Alexander Pierce</a></td>
                     <td class="mailbox-subject"><b>AdminLTE 3.0 Issue</b> - Trying to find a solution to this problem...
@@ -778,7 +833,12 @@
                     <td class="mailbox-date">4 days ago</td>
                   </tr>
                   <tr>
-                    <td><input type="checkbox"></td>
+                    <td>
+                      <div class="icheck-primary">
+                        <input type="checkbox" value="" id="check12">
+                        <label for="check12"></label>
+                      </div>
+                    </td>
                     <td class="mailbox-star"><a href="#"><i class="fas fa-star text-warning"></i></a></td>
                     <td class="mailbox-name"><a href="read-mail.html">Alexander Pierce</a></td>
                     <td class="mailbox-subject"><b>AdminLTE 3.0 Issue</b> - Trying to find a solution to this problem...
@@ -787,7 +847,12 @@
                     <td class="mailbox-date">12 days ago</td>
                   </tr>
                   <tr>
-                    <td><input type="checkbox"></td>
+                    <td>
+                      <div class="icheck-primary">
+                        <input type="checkbox" value="" id="check13">
+                        <label for="check13"></label>
+                      </div>
+                    </td>
                     <td class="mailbox-star"><a href="#"><i class="fas fa-star-o text-warning"></i></a></td>
                     <td class="mailbox-name"><a href="read-mail.html">Alexander Pierce</a></td>
                     <td class="mailbox-subject"><b>AdminLTE 3.0 Issue</b> - Trying to find a solution to this problem...
@@ -796,7 +861,12 @@
                     <td class="mailbox-date">12 days ago</td>
                   </tr>
                   <tr>
-                    <td><input type="checkbox"></td>
+                    <td>
+                      <div class="icheck-primary">
+                        <input type="checkbox" value="" id="check14">
+                        <label for="check14"></label>
+                      </div>
+                    </td>
                     <td class="mailbox-star"><a href="#"><i class="fas fa-star text-warning"></i></a></td>
                     <td class="mailbox-name"><a href="read-mail.html">Alexander Pierce</a></td>
                     <td class="mailbox-subject"><b>AdminLTE 3.0 Issue</b> - Trying to find a solution to this problem...
@@ -805,7 +875,12 @@
                     <td class="mailbox-date">14 days ago</td>
                   </tr>
                   <tr>
-                    <td><input type="checkbox"></td>
+                    <td>
+                      <div class="icheck-primary">
+                        <input type="checkbox" value="" id="check15">
+                        <label for="check15"></label>
+                      </div>
+                    </td>
                     <td class="mailbox-star"><a href="#"><i class="fas fa-star text-warning"></i></a></td>
                     <td class="mailbox-name"><a href="read-mail.html">Alexander Pierce</a></td>
                     <td class="mailbox-subject"><b>AdminLTE 3.0 Issue</b> - Trying to find a solution to this problem...
@@ -877,28 +952,19 @@
 <script src="../../plugins/fastclick/fastclick.js"></script>
 <!-- AdminLTE App -->
 <script src="../../dist/js/adminlte.min.js"></script>
-<!-- iCheck -->
-<script src="../../plugins/iCheck/icheck.min.js"></script>
 <!-- Page Script -->
 <script>
   $(function () {
-    //Enable iCheck plugin for checkboxes
-    //iCheck for checkbox and radio inputs
-    $('.mailbox-messages input[type="checkbox"]').iCheck({
-      checkboxClass: 'icheckbox_flat-blue',
-      radioClass   : 'iradio_flat-blue'
-    })
-
     //Enable check and uncheck all functionality
     $('.checkbox-toggle').click(function () {
       var clicks = $(this).data('clicks')
       if (clicks) {
         //Uncheck all checkboxes
-        $('.mailbox-messages input[type=\'checkbox\']').iCheck('uncheck')
+        $('.mailbox-messages input[type=\'checkbox\']').prop('checked', false)
         $('.checkbox-toggle .far.fa-check-square').removeClass('fa-check-square').addClass('fa-square')
       } else {
         //Check all checkboxes
-        $('.mailbox-messages input[type=\'checkbox\']').iCheck('check')
+        $('.mailbox-messages input[type=\'checkbox\']').prop('checked', true)
         $('.checkbox-toggle .far.fa-square').removeClass('fa-square').addClass('fa-check-square')
       }
       $(this).data('clicks', !clicks)

pages/mailbox/read-mail.html

@@ -13,8 +13,6 @@
   <link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
   <!-- Theme style -->
   <link rel="stylesheet" href="../../dist/css/adminlte.min.css">
-  <!-- iCheck -->
-  <link rel="stylesheet" href="../../plugins/iCheck/square/blue.css">
   <!-- Google Font: Source Sans Pro -->
   <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700" rel="stylesheet">
 </head>

plugins/daterangepicker/README.md

@@ -0,0 +1,38 @@
+# Date Range Picker
+
+![Improvely.com](https://i.imgur.com/UTRlaar.png)
+
+This date range picker component creates a dropdown menu from which a user can
+select a range of dates. I created it while building the UI for [Improvely](http://www.improvely.com), 
+which needed a way to select date ranges for reports.
+
+Features include limiting the selectable date range, localizable strings and date formats,
+a single date picker mode, a time picker, and predefined date ranges.
+
+## [Documentation and Live Usage Examples](http://www.daterangepicker.com)
+
+## [See It In a Live Application](https://awio.iljmp.com/5/drpdemogh)
+
+## License
+
+The MIT License (MIT)
+
+Copyright (c) 2012-2019 Dan Grossman
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

plugins/daterangepicker/bower.json

@@ -0,0 +1,20 @@
+{
+  "name": "daterangepicker",
+  "main": [
+    "daterangepicker.js",
+    "daterangepicker.css"
+  ],
+  "ignore": [
+    "**/.*",
+    "node_modules",
+    "bower_components",
+    "test",
+    "tests",
+    "moment.js",
+    "moment.min.js"
+  ],
+  "dependencies": {
+    "jquery": "1.9.1 - 3",
+    "moment": ">=2.9.0"
+ }
+}

plugins/daterangepicker/daterangepicker-bs3.css

@@ -1,335 +0,0 @@
-/*!
- * Stylesheet for the Date Range Picker, for use with Bootstrap 3.x
- *
- * Copyright 2013-2015 Dan Grossman ( http://www.dangrossman.info )
- * Licensed under the MIT license. See http://www.opensource.org/licenses/mit-license.php
- *
- * Built for http://www.improvely.com
- */
-
- .daterangepicker.dropdown-menu {
-  max-width: none;
-  z-index: 3000;
-}
-
-.daterangepicker.opensleft .ranges, .daterangepicker.opensleft .calendar {
-  float: left;
-  margin: 4px;
-}
-
-.daterangepicker.opensright .ranges, .daterangepicker.opensright .calendar,
-.daterangepicker.openscenter .ranges, .daterangepicker.openscenter .calendar {
-  float: right;
-  margin: 4px;
-}
-
-.daterangepicker.single .ranges, .daterangepicker.single .calendar {
-  float: none;
-}
-
-.daterangepicker .ranges {
-  width: 160px;
-  text-align: left;
-}
-
-.daterangepicker .ranges .range_inputs>div {
-  float: left;
-}
-
-.daterangepicker .ranges .range_inputs>div:nth-child(2) {
-  padding-left: 11px;
-}
-
-.daterangepicker .calendar {
-  display: none;
-  max-width: 270px;
-}
-
-.daterangepicker.show-calendar .calendar {
-    display: block;
-}
-
-.daterangepicker .calendar.single .calendar-date {
-  border: none;
-}
-
-.daterangepicker .calendar th, .daterangepicker .calendar td {
-  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
-  white-space: nowrap;
-  text-align: center;
-  min-width: 32px;
-}
-
-.daterangepicker .daterangepicker_start_input label,
-.daterangepicker .daterangepicker_end_input label {
-  color: #333;
-  display: block;
-  font-size: 11px;
-  font-weight: normal;
-  height: 20px;
-  line-height: 20px;
-  margin-bottom: 2px;
-  text-shadow: #fff 1px 1px 0px;
-  text-transform: uppercase;
-  width: 74px;
-}
-
-.daterangepicker .ranges input {
-  font-size: 11px;
-}
-
-.daterangepicker .ranges .input-mini {
-  border: 1px solid #ccc;
-  border-radius: 4px;
-  color: #555;
-  display: block;
-  font-size: 11px;
-  height: 30px;
-  line-height: 30px;
-  vertical-align: middle;
-  margin: 0 0 10px 0;
-  padding: 0 6px;
-  width: 74px;
-}
-
-.daterangepicker .ranges ul {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-}
-
-.daterangepicker .ranges li {
-  font-size: 13px;
-  background: #f5f5f5;
-  border: 1px solid #f5f5f5;
-  color: #08c;
-  padding: 3px 12px;
-  margin-bottom: 8px;
-  -webkit-border-radius: 5px;
-  -moz-border-radius: 5px;
-  border-radius: 5px;
-  cursor: pointer;
-}
-
-.daterangepicker .ranges li.active, .daterangepicker .ranges li:hover {
-  background: #08c;
-  border: 1px solid #08c;
-  color: #fff;
-}
-
-.daterangepicker .calendar-date {
-  border: 1px solid #ddd;
-  padding: 4px;
-  border-radius: 4px;
-  background: #fff;
-}
-
-.daterangepicker .calendar-time {
-  text-align: center;
-  margin: 8px auto 0 auto;
-  line-height: 30px;
-}
-
-.daterangepicker {
-  position: absolute;
-  background: #fff;
-  top: 100px;
-  left: 20px;
-  padding: 4px;
-  margin-top: 1px;
-  -webkit-border-radius: 4px;
-  -moz-border-radius: 4px;
-  border-radius: 4px;
-}
-
-.daterangepicker.opensleft:before {
-  position: absolute;
-  top: -7px;
-  right: 9px;
-  display: inline-block;
-  border-right: 7px solid transparent;
-  border-bottom: 7px solid #ccc;
-  border-left: 7px solid transparent;
-  border-bottom-color: rgba(0, 0, 0, 0.2);
-  content: '';
-}
-
-.daterangepicker.opensleft:after {
-  position: absolute;
-  top: -6px;
-  right: 10px;
-  display: inline-block;
-  border-right: 6px solid transparent;
-  border-bottom: 6px solid #fff;
-  border-left: 6px solid transparent;
-  content: '';
-}
-
-.daterangepicker.openscenter:before {
-  position: absolute;
-  top: -7px;
-  left: 0;  
-  right: 0;
-  width: 0;
-  margin-left: auto;
-  margin-right: auto;
-  display: inline-block;
-  border-right: 7px solid transparent;
-  border-bottom: 7px solid #ccc;
-  border-left: 7px solid transparent;
-  border-bottom-color: rgba(0, 0, 0, 0.2);
-  content: '';
-}
-
-.daterangepicker.openscenter:after {
-  position: absolute;
-  top: -6px;
-  left: 0;  
-  right: 0;  
-  width: 0;
-  margin-left: auto;
-  margin-right: auto;
-  display: inline-block;
-  border-right: 6px solid transparent;
-  border-bottom: 6px solid #fff;
-  border-left: 6px solid transparent;
-  content: '';
-}
-
-.daterangepicker.opensright:before {
-  position: absolute;
-  top: -7px;
-  left: 9px;
-  display: inline-block;
-  border-right: 7px solid transparent;
-  border-bottom: 7px solid #ccc;
-  border-left: 7px solid transparent;
-  border-bottom-color: rgba(0, 0, 0, 0.2);
-  content: '';
-}
-
-.daterangepicker.opensright:after {
-  position: absolute;
-  top: -6px;
-  left: 10px;
-  display: inline-block;
-  border-right: 6px solid transparent;
-  border-bottom: 6px solid #fff;
-  border-left: 6px solid transparent;
-  content: '';
-}
-
-.daterangepicker.dropup{
-  margin-top: -5px;
-}
-.daterangepicker.dropup:before{
-  top: initial;
-  bottom:-7px;
-  border-bottom: initial;
-  border-top: 7px solid #ccc;
-}
-.daterangepicker.dropup:after{
-  top: initial;
-  bottom:-6px;
-  border-bottom: initial;
-  border-top: 6px solid #fff;
-}
-
-.daterangepicker table {
-  width: 100%;
-  margin: 0;
-}
-
-.daterangepicker td, .daterangepicker th {
-  text-align: center;
-  width: 20px;
-  height: 20px;
-  -webkit-border-radius: 4px;
-  -moz-border-radius: 4px;
-  border-radius: 4px;
-  cursor: pointer;
-  white-space: nowrap;
-}
-
-.daterangepicker td.off {
-  color: #999;
-}
-
-.daterangepicker td.disabled, .daterangepicker option.disabled {
-  color: #999;
-}
-
-.daterangepicker td.available:hover, .daterangepicker th.available:hover {
-  background: #eee;
-}
-
-.daterangepicker td.in-range {
-  background: #ebf4f8;
-  -webkit-border-radius: 0;
-  -moz-border-radius: 0;
-  border-radius: 0;
-}
-
-.daterangepicker td.start-date {
-  -webkit-border-radius: 4px 0 0 4px;
-  -moz-border-radius: 4px 0 0 4px;
-  border-radius: 4px 0 0 4px;
-}
-
-.daterangepicker td.end-date {
-  -webkit-border-radius: 0 4px 4px 0;
-  -moz-border-radius: 0 4px 4px 0;
-  border-radius: 0 4px 4px 0;
-}
-
-.daterangepicker td.start-date.end-date {
-  -webkit-border-radius: 4px;
-  -moz-border-radius: 4px;
-  border-radius: 4px;
-}
-
-.daterangepicker td.active, .daterangepicker td.active:hover {
-  background-color: #357ebd;
-  border-color: #3071a9;
-  color: #fff;
-}
-
-.daterangepicker td.week, .daterangepicker th.week {
-  font-size: 80%;
-  color: #ccc;
-}
-
-.daterangepicker select.monthselect, .daterangepicker select.yearselect {
-  font-size: 12px;
-  padding: 1px;
-  height: auto;
-  margin: 0;
-  cursor: default;
-}
-
-.daterangepicker select.monthselect {
-  margin-right: 2%;
-  width: 56%;
-}
-
-.daterangepicker select.yearselect {
-  width: 40%;
-}
-
-.daterangepicker select.hourselect, .daterangepicker select.minuteselect, .daterangepicker select.secondselect, .daterangepicker select.ampmselect {
-  width: 50px;
-  margin-bottom: 0;
-}
-
-.daterangepicker_start_input {
-  float: left;
-}
-
-.daterangepicker_end_input {
-  float: left; 
-  padding-left: 11px
-}
-
-.daterangepicker th.month {
-  width: auto;
-}

plugins/daterangepicker/daterangepicker.css

@@ -0,0 +1,410 @@
+.daterangepicker {
+  position: absolute;
+  color: inherit;
+  background-color: #fff;
+  border-radius: 4px;
+  border: 1px solid #ddd;
+  width: 278px;
+  max-width: none;
+  padding: 0;
+  margin-top: 7px;
+  top: 100px;
+  left: 20px;
+  z-index: 3001;
+  display: none;
+  font-family: arial;
+  font-size: 15px;
+  line-height: 1em;
+}
+
+.daterangepicker:before, .daterangepicker:after {
+  position: absolute;
+  display: inline-block;
+  border-bottom-color: rgba(0, 0, 0, 0.2);
+  content: '';
+}
+
+.daterangepicker:before {
+  top: -7px;
+  border-right: 7px solid transparent;
+  border-left: 7px solid transparent;
+  border-bottom: 7px solid #ccc;
+}
+
+.daterangepicker:after {
+  top: -6px;
+  border-right: 6px solid transparent;
+  border-bottom: 6px solid #fff;
+  border-left: 6px solid transparent;
+}
+
+.daterangepicker.opensleft:before {
+  right: 9px;
+}
+
+.daterangepicker.opensleft:after {
+  right: 10px;
+}
+
+.daterangepicker.openscenter:before {
+  left: 0;
+  right: 0;
+  width: 0;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.daterangepicker.openscenter:after {
+  left: 0;
+  right: 0;
+  width: 0;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.daterangepicker.opensright:before {
+  left: 9px;
+}
+
+.daterangepicker.opensright:after {
+  left: 10px;
+}
+
+.daterangepicker.drop-up {
+  margin-top: -7px;
+}
+
+.daterangepicker.drop-up:before {
+  top: initial;
+  bottom: -7px;
+  border-bottom: initial;
+  border-top: 7px solid #ccc;
+}
+
+.daterangepicker.drop-up:after {
+  top: initial;
+  bottom: -6px;
+  border-bottom: initial;
+  border-top: 6px solid #fff;
+}
+
+.daterangepicker.single .daterangepicker .ranges, .daterangepicker.single .drp-calendar {
+  float: none;
+}
+
+.daterangepicker.single .drp-selected {
+  display: none;
+}
+
+.daterangepicker.show-calendar .drp-calendar {
+  display: block;
+}
+
+.daterangepicker.show-calendar .drp-buttons {
+  display: block;
+}
+
+.daterangepicker.auto-apply .drp-buttons {
+  display: none;
+}
+
+.daterangepicker .drp-calendar {
+  display: none;
+  max-width: 270px;
+}
+
+.daterangepicker .drp-calendar.left {
+  padding: 8px 0 8px 8px;
+}
+
+.daterangepicker .drp-calendar.right {
+  padding: 8px;
+}
+
+.daterangepicker .drp-calendar.single .calendar-table {
+  border: none;
+}
+
+.daterangepicker .calendar-table .next span, .daterangepicker .calendar-table .prev span {
+  color: #fff;
+  border: solid black;
+  border-width: 0 2px 2px 0;
+  border-radius: 0;
+  display: inline-block;
+  padding: 3px;
+}
+
+.daterangepicker .calendar-table .next span {
+  transform: rotate(-45deg);
+  -webkit-transform: rotate(-45deg);
+}
+
+.daterangepicker .calendar-table .prev span {
+  transform: rotate(135deg);
+  -webkit-transform: rotate(135deg);
+}
+
+.daterangepicker .calendar-table th, .daterangepicker .calendar-table td {
+  white-space: nowrap;
+  text-align: center;
+  vertical-align: middle;
+  min-width: 32px;
+  width: 32px;
+  height: 24px;
+  line-height: 24px;
+  font-size: 12px;
+  border-radius: 4px;
+  border: 1px solid transparent;
+  white-space: nowrap;
+  cursor: pointer;
+}
+
+.daterangepicker .calendar-table {
+  border: 1px solid #fff;
+  border-radius: 4px;
+  background-color: #fff;
+}
+
+.daterangepicker .calendar-table table {
+  width: 100%;
+  margin: 0;
+  border-spacing: 0;
+  border-collapse: collapse;
+}
+
+.daterangepicker td.available:hover, .daterangepicker th.available:hover {
+  background-color: #eee;
+  border-color: transparent;
+  color: inherit;
+}
+
+.daterangepicker td.week, .daterangepicker th.week {
+  font-size: 80%;
+  color: #ccc;
+}
+
+.daterangepicker td.off, .daterangepicker td.off.in-range, .daterangepicker td.off.start-date, .daterangepicker td.off.end-date {
+  background-color: #fff;
+  border-color: transparent;
+  color: #999;
+}
+
+.daterangepicker td.in-range {
+  background-color: #ebf4f8;
+  border-color: transparent;
+  color: #000;
+  border-radius: 0;
+}
+
+.daterangepicker td.start-date {
+  border-radius: 4px 0 0 4px;
+}
+
+.daterangepicker td.end-date {
+  border-radius: 0 4px 4px 0;
+}
+
+.daterangepicker td.start-date.end-date {
+  border-radius: 4px;
+}
+
+.daterangepicker td.active, .daterangepicker td.active:hover {
+  background-color: #357ebd;
+  border-color: transparent;
+  color: #fff;
+}
+
+.daterangepicker th.month {
+  width: auto;
+}
+
+.daterangepicker td.disabled, .daterangepicker option.disabled {
+  color: #999;
+  cursor: not-allowed;
+  text-decoration: line-through;
+}
+
+.daterangepicker select.monthselect, .daterangepicker select.yearselect {
+  font-size: 12px;
+  padding: 1px;
+  height: auto;
+  margin: 0;
+  cursor: default;
+}
+
+.daterangepicker select.monthselect {
+  margin-right: 2%;
+  width: 56%;
+}
+
+.daterangepicker select.yearselect {
+  width: 40%;
+}
+
+.daterangepicker select.hourselect, .daterangepicker select.minuteselect, .daterangepicker select.secondselect, .daterangepicker select.ampmselect {
+  width: 50px;
+  margin: 0 auto;
+  background: #eee;
+  border: 1px solid #eee;
+  padding: 2px;
+  outline: 0;
+  font-size: 12px;
+}
+
+.daterangepicker .calendar-time {
+  text-align: center;
+  margin: 4px auto 0 auto;
+  line-height: 30px;
+  position: relative;
+}
+
+.daterangepicker .calendar-time select.disabled {
+  color: #ccc;
+  cursor: not-allowed;
+}
+
+.daterangepicker .drp-buttons {
+  clear: both;
+  text-align: right;
+  padding: 8px;
+  border-top: 1px solid #ddd;
+  display: none;
+  line-height: 12px;
+  vertical-align: middle;
+}
+
+.daterangepicker .drp-selected {
+  display: inline-block;
+  font-size: 12px;
+  padding-right: 8px;
+}
+
+.daterangepicker .drp-buttons .btn {
+  margin-left: 8px;
+  font-size: 12px;
+  font-weight: bold;
+  padding: 4px 8px;
+}
+
+.daterangepicker.show-ranges.single.rtl .drp-calendar.left {
+  border-right: 1px solid #ddd;
+}
+
+.daterangepicker.show-ranges.single.ltr .drp-calendar.left {
+  border-left: 1px solid #ddd;
+}
+
+.daterangepicker.show-ranges.rtl .drp-calendar.right {
+  border-right: 1px solid #ddd;
+}
+
+.daterangepicker.show-ranges.ltr .drp-calendar.left {
+  border-left: 1px solid #ddd;
+}
+
+.daterangepicker .ranges {
+  float: none;
+  text-align: left;
+  margin: 0;
+}
+
+.daterangepicker.show-calendar .ranges {
+  margin-top: 8px;
+}
+
+.daterangepicker .ranges ul {
+  list-style: none;
+  margin: 0 auto;
+  padding: 0;
+  width: 100%;
+}
+
+.daterangepicker .ranges li {
+  font-size: 12px;
+  padding: 8px 12px;
+  cursor: pointer;
+}
+
+.daterangepicker .ranges li:hover {
+  background-color: #eee;
+}
+
+.daterangepicker .ranges li.active {
+  background-color: #08c;
+  color: #fff;
+}
+
+/*  Larger Screen Styling */
+@media (min-width: 564px) {
+  .daterangepicker {
+    width: auto;
+  }
+
+  .daterangepicker .ranges ul {
+    width: 140px;
+  }
+
+  .daterangepicker.single .ranges ul {
+    width: 100%;
+  }
+
+  .daterangepicker.single .drp-calendar.left {
+    clear: none;
+  }
+
+  .daterangepicker.single .ranges, .daterangepicker.single .drp-calendar {
+    float: left;
+  }
+
+  .daterangepicker {
+    direction: ltr;
+    text-align: left;
+  }
+
+  .daterangepicker .drp-calendar.left {
+    clear: left;
+    margin-right: 0;
+  }
+
+  .daterangepicker .drp-calendar.left .calendar-table {
+    border-right: none;
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+
+  .daterangepicker .drp-calendar.right {
+    margin-left: 0;
+  }
+
+  .daterangepicker .drp-calendar.right .calendar-table {
+    border-left: none;
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+
+  .daterangepicker .drp-calendar.left .calendar-table {
+    padding-right: 8px;
+  }
+
+  .daterangepicker .ranges, .daterangepicker .drp-calendar {
+    float: left;
+  }
+}
+
+@media (min-width: 730px) {
+  .daterangepicker .ranges {
+    width: auto;
+  }
+
+  .daterangepicker .ranges {
+    float: left;
+  }
+
+  .daterangepicker.rtl .ranges {
+    float: right;
+  }
+
+  .daterangepicker .drp-calendar.left {
+    clear: none !important;
+  }
+}

plugins/daterangepicker/demo.html

@@ -0,0 +1,374 @@
+<!DOCTYPE html>
+<html dir="ltr" lang="en-US">
+   <head>
+      <meta charset="UTF-8" />
+      <title>A date range picker for Bootstrap</title>
+
+      <!--<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" />-->
+
+      <link rel="stylesheet" type="text/css" media="all" href="daterangepicker.css" />
+
+      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
+
+      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.1/moment.min.js"></script>
+
+      <script type="text/javascript" src="daterangepicker.js"></script>
+
+    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
+    <!--[if lt IE 9]>
+      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
+      <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
+    <![endif]-->
+   </head>
+   <body style="margin: 60px 0">
+
+      <div class="container">
+
+        <h1 style="margin: 0 0 20px 0">Configuration Builder</h1>
+
+        <div class="well configurator">
+           
+          <form>
+          <div class="row">
+
+            <div class="col-md-4">
+
+              <div class="form-group">
+                <label for="parentEl">parentEl</label>
+                <input type="text" class="form-control" id="parentEl" value="" placeholder="body">
+              </div>
+
+              <div class="form-group">
+                <label for="startDate">startDate</label>
+                <input type="text" class="form-control" id="startDate" value="07/01/2015">
+              </div>
+
+              <div class="form-group">
+                <label for="endDate">endDate</label>
+                <input type="text" class="form-control" id="endDate" value="07/15/2015">
+              </div>
+
+              <div class="form-group">
+                <label for="minDate">minDate</label>
+                <input type="text" class="form-control" id="minDate" value="" placeholder="MM/DD/YYYY">
+              </div>
+
+              <div class="form-group">
+                <label for="maxDate">maxDate</label>
+                <input type="text" class="form-control" id="maxDate" value="" placeholder="MM/DD/YYYY">
+              </div>
+
+            </div>
+            <div class="col-md-4">
+
+              <div class="checkbox">
+                <label>
+                  <input type="checkbox" id="autoApply"> autoApply
+                </label>
+              </div>
+
+              <div class="checkbox">
+                <label>
+                  <input type="checkbox" id="singleDatePicker"> singleDatePicker
+                </label>
+              </div>
+
+              <div class="checkbox">
+                <label>
+                  <input type="checkbox" id="showDropdowns"> showDropdowns
+                </label>
+              </div>
+
+              <div class="checkbox">
+                <label>
+                  <input type="checkbox" id="showWeekNumbers"> showWeekNumbers
+                </label>
+              </div>
+
+              <div class="checkbox">
+                <label>
+                  <input type="checkbox" id="showISOWeekNumbers"> showISOWeekNumbers
+                </label>
+              </div>
+
+              <div class="checkbox">
+                <label>
+                  <input type="checkbox" id="timePicker" checked="checked"> timePicker
+                </label>
+              </div>
+
+              <div class="checkbox">
+                <label>
+                  <input type="checkbox" id="timePicker24Hour"> timePicker24Hour
+                </label>
+              </div>
+
+              <div class="form-group">
+                <label for="timePickerIncrement">timePickerIncrement (in minutes)</label>
+                <input type="text" class="form-control" id="timePickerIncrement" value="1">
+              </div>
+
+              <div class="checkbox">
+                <label>
+                  <input type="checkbox" id="timePickerSeconds"> timePickerSeconds
+                </label>
+              </div>
+
+              <div class="checkbox">
+                <label>
+                  <input type="checkbox" id="dateLimit"> dateLimit (with example date range span)
+                </label>
+              </div>
+
+              <div class="checkbox">
+                <label>
+                  <input type="checkbox" id="ranges" checked="checked"> ranges (with example predefined ranges)
+                </label>
+              </div>
+
+              <div class="checkbox">
+                <label>
+                  <input type="checkbox" id="locale"> locale (with example settings)
+                </label>
+                <label id="rtl-wrap">
+                  <input type="checkbox" id="rtl"> RTL (right-to-left)
+                </label>
+              </div>
+
+              <div class="checkbox">
+                <label>
+                  <input type="checkbox" id="alwaysShowCalendars"> alwaysShowCalendars
+                </label>
+              </div>
+
+            </div>
+            <div class="col-md-4">
+
+              <div class="checkbox">
+                <label>
+                  <input type="checkbox" id="linkedCalendars" checked="checked"> linkedCalendars
+                </label>
+              </div>
+
+              <div class="checkbox">
+                <label>
+                  <input type="checkbox" id="autoUpdateInput" checked="checked"> autoUpdateInput
+                </label>
+              </div>
+
+              <div class="checkbox">
+                <label>
+                  <input type="checkbox" id="showCustomRangeLabel" checked="checked"> showCustomRangeLabel
+                </label>
+              </div>
+
+              <div class="form-group">
+                <label for="opens">opens</label>
+                <select id="opens" class="form-control">
+                  <option value="right" selected>right</option>
+                  <option value="left">left</option>
+                  <option value="center">center</option>
+                </select>
+              </div>
+
+              <div class="form-group">
+                <label for="drops">drops</label>
+                <select id="drops" class="form-control">
+                  <option value="down" selected>down</option>
+                  <option value="up">up</option>
+                </select>
+              </div>
+
+              <div class="form-group">
+                <label for="buttonClasses">buttonClasses</label>
+                <input type="text" class="form-control" id="buttonClasses" value="btn btn-sm">
+              </div>
+
+              <div class="form-group">
+                <label for="applyClass">applyClass</label>
+                <input type="text" class="form-control" id="applyClass" value="btn-success">
+              </div>
+
+              <div class="form-group">
+                <label for="cancelClass">cancelClass</label>
+                <input type="text" class="form-control" id="cancelClass" value="btn-default">
+              </div>
+
+            </div>
+
+          </div>
+          </form>
+
+        </div>
+
+        <div class="row">
+
+          <div class="col-md-4 col-md-offset-2 demo">
+            <h4>Your Date Range Picker</h4>
+            <center>
+              <input type="text" id="config-demo" class="form-control">
+            </center>
+          </div>
+
+          <div class="col-md-6">
+            <h4>Configuration</h4>
+
+            <div class="well">
+              <textarea id="config-text" style="height: 300px; width: 100%; padding: 10px"></textarea>
+            </div>
+          </div>
+
+        </div>
+
+      </div>
+
+      <style type="text/css">
+      .demo { position: relative; }
+      .demo i {
+        position: absolute; bottom: 10px; right: 24px; top: auto; cursor: pointer;
+      }
+      </style>
+
+      <script type="text/javascript">
+      $(document).ready(function() {
+
+        $('#config-text').keyup(function() {
+          eval($(this).val());
+        });
+        
+        $('.configurator input, .configurator select').change(function() {
+          updateConfig();
+        });
+
+        $('.demo i').click(function() {
+          $(this).parent().find('input').click();
+        });
+
+        $('#startDate').daterangepicker({
+          singleDatePicker: true,
+          startDate: moment().subtract(6, 'days')
+        });
+
+        $('#endDate').daterangepicker({
+          singleDatePicker: true,
+          startDate: moment()
+        });
+
+        updateConfig();
+
+        function updateConfig() {
+          var options = {};
+
+          if ($('#singleDatePicker').is(':checked'))
+            options.singleDatePicker = true;
+          
+          if ($('#showDropdowns').is(':checked'))
+            options.showDropdowns = true;
+
+          if ($('#showWeekNumbers').is(':checked'))
+            options.showWeekNumbers = true;
+
+          if ($('#showISOWeekNumbers').is(':checked'))
+            options.showISOWeekNumbers = true;
+
+          if ($('#timePicker').is(':checked'))
+            options.timePicker = true;
+          
+          if ($('#timePicker24Hour').is(':checked'))
+            options.timePicker24Hour = true;
+
+          if ($('#timePickerIncrement').val().length && $('#timePickerIncrement').val() != 1)
+            options.timePickerIncrement = parseInt($('#timePickerIncrement').val(), 10);
+
+          if ($('#timePickerSeconds').is(':checked'))
+            options.timePickerSeconds = true;
+          
+          if ($('#autoApply').is(':checked'))
+            options.autoApply = true;
+
+          if ($('#dateLimit').is(':checked'))
+            options.dateLimit = { days: 7 };
+
+          if ($('#ranges').is(':checked')) {
+            options.ranges = {
+              'Today': [moment(), moment()],
+              'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
+              'Last 7 Days': [moment().subtract(6, 'days'), moment()],
+              'Last 30 Days': [moment().subtract(29, 'days'), moment()],
+              'This Month': [moment().startOf('month'), moment().endOf('month')],
+              'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
+            };
+          }
+
+          if ($('#locale').is(':checked')) {
+            $('#rtl-wrap').show();
+            options.locale = {
+              direction: $('#rtl').is(':checked') ? 'rtl' : 'ltr',
+              format: 'MM/DD/YYYY HH:mm',
+              separator: ' - ',
+              applyLabel: 'Apply',
+              cancelLabel: 'Cancel',
+              fromLabel: 'From',
+              toLabel: 'To',
+              customRangeLabel: 'Custom',
+              daysOfWeek: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr','Sa'],
+              monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
+              firstDay: 1
+            };
+          } else {
+            $('#rtl-wrap').hide();
+          }
+
+          if (!$('#linkedCalendars').is(':checked'))
+            options.linkedCalendars = false;
+
+          if (!$('#autoUpdateInput').is(':checked'))
+            options.autoUpdateInput = false;
+
+          if (!$('#showCustomRangeLabel').is(':checked'))
+            options.showCustomRangeLabel = false;
+
+          if ($('#alwaysShowCalendars').is(':checked'))
+            options.alwaysShowCalendars = true;
+
+          if ($('#parentEl').val().length)
+            options.parentEl = $('#parentEl').val();
+
+          if ($('#startDate').val().length) 
+            options.startDate = $('#startDate').val();
+
+          if ($('#endDate').val().length)
+            options.endDate = $('#endDate').val();
+          
+          if ($('#minDate').val().length)
+            options.minDate = $('#minDate').val();
+
+          if ($('#maxDate').val().length)
+            options.maxDate = $('#maxDate').val();
+
+          if ($('#opens').val().length && $('#opens').val() != 'right')
+            options.opens = $('#opens').val();
+
+          if ($('#drops').val().length && $('#drops').val() != 'down')
+            options.drops = $('#drops').val();
+
+          if ($('#buttonClasses').val().length && $('#buttonClasses').val() != 'btn btn-sm')
+            options.buttonClasses = $('#buttonClasses').val();
+
+          if ($('#applyClass').val().length && $('#applyClass').val() != 'btn-success')
+            options.applyClass = $('#applyClass').val();
+
+          if ($('#cancelClass').val().length && $('#cancelClass').val() != 'btn-default')
+            options.cancelClass = $('#cancelClass').val();
+
+          $('#config-text').val("$('#demo').daterangepicker(" + JSON.stringify(options, null, '    ') + ", function(start, end, label) {\n  console.log(\"New date range selected: ' + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD') + ' (predefined range: ' + label + ')\");\n});");
+
+          $('#config-demo').daterangepicker(options, function(start, end, label) { console.log('New date range selected: ' + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD') + ' (predefined range: ' + label + ')'); }).click();;
+          
+        }
+
+      });
+      </script>
+
+   </body>
+</html>

plugins/daterangepicker/example/amd/index.html

@@ -0,0 +1,210 @@
+<!DOCTYPE html>
+<html dir="ltr" lang="en-US">
+   <head>
+      <meta charset="UTF-8" />
+      <title>A date range picker for Bootstrap</title>
+      <link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
+      <link rel="stylesheet" type="text/css" media="all" href="../../daterangepicker.css" />
+      <style type="text/css">
+      .demo { position: relative; }
+      .demo i {
+        position: absolute; bottom: 10px; right: 24px; top: auto; cursor: pointer;
+      }
+      </style>
+   </head>
+   <body style="margin: 60px 0">
+
+      <div class="container">
+
+        <h1 style="margin: 0 0 20px 0">Configuration Builder</h1>
+
+        <div class="well configurator">
+
+          <form>
+          <div class="row">
+
+            <div class="col-md-4">
+
+              <div class="form-group">
+                <label for="parentEl">parentEl</label>
+                <input type="text" class="form-control" id="parentEl" value="" placeholder="body">
+              </div>
+
+              <div class="form-group">
+                <label for="startDate">startDate</label>
+                <input type="text" class="form-control" id="startDate" value="07/01/2015">
+              </div>
+
+              <div class="form-group">
+                <label for="endDate">endDate</label>
+                <input type="text" class="form-control" id="endDate" value="07/15/2015">
+              </div>
+
+              <div class="form-group">
+                <label for="minDate">minDate</label>
+                <input type="text" class="form-control" id="minDate" value="" placeholder="MM/DD/YYYY">
+              </div>
+
+              <div class="form-group">
+                <label for="maxDate">maxDate</label>
+                <input type="text" class="form-control" id="maxDate" value="" placeholder="MM/DD/YYYY">
+              </div>
+
+            </div>
+            <div class="col-md-4">
+
+              <div class="checkbox">
+                <label>
+                  <input type="checkbox" id="autoApply"> autoApply
+                </label>
+              </div>
+
+              <div class="checkbox">
+                <label>
+                  <input type="checkbox" id="singleDatePicker"> singleDatePicker
+                </label>
+              </div>
+
+              <div class="checkbox">
+                <label>
+                  <input type="checkbox" id="showDropdowns"> showDropdowns
+                </label>
+              </div>
+
+              <div class="checkbox">
+                <label>
+                  <input type="checkbox" id="showWeekNumbers"> showWeekNumbers
+                </label>
+              </div>
+
+              <div class="checkbox">
+                <label>
+                  <input type="checkbox" id="showISOWeekNumbers"> showISOWeekNumbers
+                </label>
+              </div>
+
+              <div class="checkbox">
+                <label>
+                  <input type="checkbox" id="timePicker"> timePicker
+                </label>
+              </div>
+
+              <div class="checkbox">
+                <label>
+                  <input type="checkbox" id="timePicker24Hour"> timePicker24Hour
+                </label>
+              </div>
+
+              <div class="form-group">
+                <label for="timePickerIncrement">timePickerIncrement (in minutes)</label>
+                <input type="text" class="form-control" id="timePickerIncrement" value="1">
+              </div>
+
+              <div class="checkbox">
+                <label>
+                  <input type="checkbox" id="timePickerSeconds"> timePickerSeconds
+                </label>
+              </div>
+
+              <div class="checkbox">
+                <label>
+                  <input type="checkbox" id="dateLimit"> dateLimit (with example date range span)
+                </label>
+              </div>
+
+              <div class="checkbox">
+                <label>
+                  <input type="checkbox" id="ranges"> ranges (with example predefined ranges)
+                </label>
+              </div>
+
+              <div class="checkbox">
+                <label>
+                  <input type="checkbox" id="locale"> locale (with example settings)
+                </label>
+              </div>
+
+              <div class="checkbox">
+                <label>
+                  <input type="checkbox" id="linkedCalendars" checked="checked"> linkedCalendars
+                </label>
+              </div>
+
+              <div class="checkbox">
+                <label>
+                  <input type="checkbox" id="autoUpdateInput" checked="checked"> autoUpdateInput
+                </label>
+              </div>
+
+              <div class="checkbox">
+                <label>
+                  <input type="checkbox" id="alwaysShowCalendars"> alwaysShowCalendars
+                </label>
+              </div>
+
+            </div>
+            <div class="col-md-4">
+
+              <div class="form-group">
+                <label for="opens">opens</label>
+                <select id="opens" class="form-control">
+                  <option value="right" selected>right</option>
+                  <option value="left">left</option>
+                  <option value="center">center</option>
+                </select>
+              </div>
+
+              <div class="form-group">
+                <label for="drops">drops</label>
+                <select id="drops" class="form-control">
+                  <option value="down" selected>down</option>
+                  <option value="up">up</option>
+                </select>
+              </div>
+
+              <div class="form-group">
+                <label for="buttonClasses">buttonClasses</label>
+                <input type="text" class="form-control" id="buttonClasses" value="btn btn-sm">
+              </div>
+
+              <div class="form-group">
+                <label for="applyClass">applyClass</label>
+                <input type="text" class="form-control" id="applyClass" value="btn-success">
+              </div>
+
+              <div class="form-group">
+                <label for="cancelClass">cancelClass</label>
+                <input type="text" class="form-control" id="cancelClass" value="btn-default">
+              </div>
+
+            </div>
+
+          </div>
+          </form>
+
+        </div>
+
+        <div class="row">
+
+          <div class="col-md-4 col-md-offset-2 demo">
+            <h4>Your Date Range Picker</h4>
+            <input type="text" id="config-demo" class="form-control">
+            <i class="glyphicon glyphicon-calendar fa fa-calendar"></i>
+          </div>
+
+          <div class="col-md-6">
+            <h4>Configuration</h4>
+
+            <div class="well">
+              <textarea id="config-text" style="height: 300px; width: 100%; padding: 10px"></textarea>
+            </div>
+          </div>
+
+        </div>
+
+      </div>
+
+
+      <script type="text/javascript" src="require.js" data-main="main.js"></script>
+   </body>
+</html>

plugins/daterangepicker/example/amd/main.js

@@ -0,0 +1,141 @@
+requirejs.config({
+    "paths": {
+      "jquery": "https://code.jquery.com/jquery-1.11.3.min",
+      "moment": "../../moment",
+      "daterangepicker": "../../daterangepicker"
+    }
+});
+
+requirejs(['jquery', 'moment', 'daterangepicker'] , function ($, moment) {
+$(document).ready(function() {
+
+  $('#config-text').keyup(function() {
+    eval($(this).val());
+  });
+
+  $('.configurator input, .configurator select').change(function() {
+    updateConfig();
+  });
+
+  $('.demo i').click(function() {
+    $(this).parent().find('input').click();
+  });
+
+  $('#startDate').daterangepicker({
+    singleDatePicker: true,
+    startDate: moment().subtract(6, 'days')
+  });
+
+  $('#endDate').daterangepicker({
+    singleDatePicker: true,
+    startDate: moment()
+  });
+
+  updateConfig();
+
+  function updateConfig() {
+    var options = {};
+
+    if ($('#singleDatePicker').is(':checked'))
+      options.singleDatePicker = true;
+
+    if ($('#showDropdowns').is(':checked'))
+      options.showDropdowns = true;
+
+    if ($('#showWeekNumbers').is(':checked'))
+      options.showWeekNumbers = true;
+
+    if ($('#showISOWeekNumbers').is(':checked'))
+      options.showISOWeekNumbers = true;
+
+    if ($('#timePicker').is(':checked'))
+      options.timePicker = true;
+
+    if ($('#timePicker24Hour').is(':checked'))
+      options.timePicker24Hour = true;
+
+    if ($('#timePickerIncrement').val().length && $('#timePickerIncrement').val() != 1)
+      options.timePickerIncrement = parseInt($('#timePickerIncrement').val(), 10);
+
+    if ($('#timePickerSeconds').is(':checked'))
+      options.timePickerSeconds = true;
+
+    if ($('#autoApply').is(':checked'))
+      options.autoApply = true;
+
+    if ($('#dateLimit').is(':checked'))
+      options.dateLimit = { days: 7 };
+
+    if ($('#ranges').is(':checked')) {
+      options.ranges = {
+        'Today': [moment(), moment()],
+        'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
+        'Last 7 Days': [moment().subtract(6, 'days'), moment()],
+        'Last 30 Days': [moment().subtract(29, 'days'), moment()],
+        'This Month': [moment().startOf('month'), moment().endOf('month')],
+        'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
+      };
+    }
+
+    if ($('#locale').is(':checked')) {
+      options.locale = {
+        format: 'MM/DD/YYYY HH:mm',
+        separator: ' - ',
+        applyLabel: 'Apply',
+        cancelLabel: 'Cancel',
+        fromLabel: 'From',
+        toLabel: 'To',
+        customRangeLabel: 'Custom',
+        daysOfWeek: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr','Sa'],
+        monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
+        firstDay: 1
+      };
+    }
+
+    if (!$('#linkedCalendars').is(':checked'))
+      options.linkedCalendars = false;
+
+    if (!$('#autoUpdateInput').is(':checked'))
+      options.autoUpdateInput = false;
+
+    if ($('#alwaysShowCalendars').is(':checked'))
+      options.alwaysShowCalendars = true;
+
+    if ($('#parentEl').val().length)
+      options.parentEl = $('#parentEl').val();
+
+    if ($('#startDate').val().length)
+      options.startDate = $('#startDate').val();
+
+    if ($('#endDate').val().length)
+      options.endDate = $('#endDate').val();
+
+    if ($('#minDate').val().length)
+      options.minDate = $('#minDate').val();
+
+    if ($('#maxDate').val().length)
+      options.maxDate = $('#maxDate').val();
+
+    if ($('#opens').val().length && $('#opens').val() != 'right')
+      options.opens = $('#opens').val();
+
+    if ($('#drops').val().length && $('#drops').val() != 'down')
+      options.drops = $('#drops').val();
+
+    if ($('#buttonClasses').val().length && $('#buttonClasses').val() != 'btn btn-sm')
+      options.buttonClasses = $('#buttonClasses').val();
+
+    if ($('#applyClass').val().length && $('#applyClass').val() != 'btn-success')
+      options.applyClass = $('#applyClass').val();
+
+    if ($('#cancelClass').val().length && $('#cancelClass').val() != 'btn-default')
+      options.cancelClass = $('#cancelClass').val();
+
+    $('#config-text').val("$('#demo').daterangepicker(" + JSON.stringify(options, null, '    ') + ", function(start, end, label) {\n  console.log(\"New date range selected: ' + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD') + ' (predefined range: ' + label + ')\");\n});");
+
+    $('#config-demo').daterangepicker(options, function(start, end, label) { console.log('New date range selected: ' + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD') + ' (predefined range: ' + label + ')'); });
+
+  }
+
+});
+});

plugins/daterangepicker/example/browserify/README.md

@@ -0,0 +1,11 @@
+# Browserify example
+
+Two steps need to be done for this to work
+
+In the project root
+
+    npm install
+
+In this folder
+
+    ../../node_modules/.bin/browserify main.js -o bundle.js

plugins/daterangepicker/example/browserify/index.html

@@ -0,0 +1,209 @@
+<!DOCTYPE html>
+<html dir="ltr" lang="en-US">
+   <head>
+      <meta charset="UTF-8" />
+      <title>A date range picker for Bootstrap</title>
+      <link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
+      <link rel="stylesheet" type="text/css" media="all" href="../../daterangepicker.css" />
+      <style type="text/css">
+      .demo { position: relative; }
+      .demo i {
+        position: absolute; bottom: 10px; right: 24px; top: auto; cursor: pointer;
+      }
+      </style>
+   </head>
+   <body style="margin: 60px 0">
+
+      <div class="container">
+
+        <h1 style="margin: 0 0 20px 0">Configuration Builder</h1>
+
+        <div class="well configurator">
+
+          <form>
+          <div class="row">
+
+            <div class="col-md-4">
+
+              <div class="form-group">
+                <label for="parentEl">parentEl</label>
+                <input type="text" class="form-control" id="parentEl" value="" placeholder="body">
+              </div>
+
+              <div class="form-group">
+                <label for="startDate">startDate</label>
+                <input type="text" class="form-control" id="startDate" value="07/01/2015">
+              </div>
+
+              <div class="form-group">
+                <label for="endDate">endDate</label>
+                <input type="text" class="form-control" id="endDate" value="07/15/2015">
+              </div>
+
+              <div class="form-group">
+                <label for="minDate">minDate</label>
+                <input type="text" class="form-control" id="minDate" value="" placeholder="MM/DD/YYYY">
+              </div>
+
+              <div class="form-group">
+                <label for="maxDate">maxDate</label>
+                <input type="text" class="form-control" id="maxDate" value="" placeholder="MM/DD/YYYY">
+              </div>
+
+            </div>
+            <div class="col-md-4">
+
+              <div class="checkbox">
+                <label>
+                  <input type="checkbox" id="autoApply"> autoApply
+                </label>
+              </div>
+
+              <div class="checkbox">
+                <label>
+                  <input type="checkbox" id="singleDatePicker"> singleDatePicker
+                </label>
+              </div>
+
+              <div class="checkbox">
+                <label>
+                  <input type="checkbox" id="showDropdowns"> showDropdowns
+                </label>
+              </div>
+
+              <div class="checkbox">
+                <label>
+                  <input type="checkbox" id="showWeekNumbers"> showWeekNumbers
+                </label>
+              </div>
+
+              <div class="checkbox">
+                <label>
+                  <input type="checkbox" id="showISOWeekNumbers"> showISOWeekNumbers
+                </label>
+              </div>
+
+              <div class="checkbox">
+                <label>
+                  <input type="checkbox" id="timePicker"> timePicker
+                </label>
+              </div>
+
+              <div class="checkbox">
+                <label>
+                  <input type="checkbox" id="timePicker24Hour"> timePicker24Hour
+                </label>
+              </div>
+
+              <div class="form-group">
+                <label for="timePickerIncrement">timePickerIncrement (in minutes)</label>
+                <input type="text" class="form-control" id="timePickerIncrement" value="1">
+              </div>
+
+              <div class="checkbox">
+                <label>
+                  <input type="checkbox" id="timePickerSeconds"> timePickerSeconds
+                </label>
+              </div>
+
+              <div class="checkbox">
+                <label>
+                  <input type="checkbox" id="dateLimit"> dateLimit (with example date range span)
+                </label>
+              </div>
+
+              <div class="checkbox">
+                <label>
+                  <input type="checkbox" id="ranges"> ranges (with example predefined ranges)
+                </label>
+              </div>
+
+              <div class="checkbox">
+                <label>
+                  <input type="checkbox" id="locale"> locale (with example settings)
+                </label>
+              </div>
+
+              <div class="checkbox">
+                <label>
+                  <input type="checkbox" id="linkedCalendars" checked="checked"> linkedCalendars
+                </label>
+              </div>
+
+              <div class="checkbox">
+                <label>
+                  <input type="checkbox" id="autoUpdateInput" checked="checked"> autoUpdateInput
+                </label>
+              </div>
+
+              <div class="checkbox">
+                <label>
+                  <input type="checkbox" id="alwaysShowCalendars"> alwaysShowCalendars
+                </label>
+              </div>
+
+            </div>
+            <div class="col-md-4">
+
+              <div class="form-group">
+                <label for="opens">opens</label>
+                <select id="opens" class="form-control">
+                  <option value="right" selected>right</option>
+                  <option value="left">left</option>
+                  <option value="center">center</option>
+                </select>
+              </div>
+
+              <div class="form-group">
+                <label for="drops">drops</label>
+                <select id="drops" class="form-control">
+                  <option value="down" selected>down</option>
+                  <option value="up">up</option>
+                </select>
+              </div>
+
+              <div class="form-group">
+                <label for="buttonClasses">buttonClasses</label>
+                <input type="text" class="form-control" id="buttonClasses" value="btn btn-sm">
+              </div>
+
+              <div class="form-group">
+                <label for="applyClass">applyClass</label>
+                <input type="text" class="form-control" id="applyClass" value="btn-success">
+              </div>
+
+              <div class="form-group">
+                <label for="cancelClass">cancelClass</label>
+                <input type="text" class="form-control" id="cancelClass" value="btn-default">
+              </div>
+
+            </div>
+
+          </div>
+          </form>
+
+        </div>
+
+        <div class="row">
+
+          <div class="col-md-4 col-md-offset-2 demo">
+            <h4>Your Date Range Picker</h4>
+            <input type="text" id="config-demo" class="form-control">
+            <i class="glyphicon glyphicon-calendar fa fa-calendar"></i>
+          </div>
+
+          <div class="col-md-6">
+            <h4>Configuration</h4>
+
+            <div class="well">
+              <textarea id="config-text" style="height: 300px; width: 100%; padding: 10px"></textarea>
+            </div>
+          </div>
+
+        </div>
+
+      </div>
+
+      <script type="text/javascript" src="bundle.js"></script>
+   </body>
+</html>

plugins/daterangepicker/example/browserify/main.js

@@ -0,0 +1,135 @@
+require('../../daterangepicker.js');
+var $ = require('jquery'),
+    moment = require('moment');
+
+$(document).ready(function() {
+
+  $('#config-text').keyup(function() {
+    eval($(this).val());
+  });
+
+  $('.configurator input, .configurator select').change(function() {
+    updateConfig();
+  });
+
+  $('.demo i').click(function() {
+    $(this).parent().find('input').click();
+  });
+
+  $('#startDate').daterangepicker({
+    singleDatePicker: true,
+    startDate: moment().subtract(6, 'days')
+  });
+
+  $('#endDate').daterangepicker({
+    singleDatePicker: true,
+    startDate: moment()
+  });
+
+  updateConfig();
+
+  function updateConfig() {
+    var options = {};
+
+    if ($('#singleDatePicker').is(':checked'))
+      options.singleDatePicker = true;
+
+    if ($('#showDropdowns').is(':checked'))
+      options.showDropdowns = true;
+
+    if ($('#showWeekNumbers').is(':checked'))
+      options.showWeekNumbers = true;
+
+    if ($('#showISOWeekNumbers').is(':checked'))
+      options.showISOWeekNumbers = true;
+
+    if ($('#timePicker').is(':checked'))
+      options.timePicker = true;
+
+    if ($('#timePicker24Hour').is(':checked'))
+      options.timePicker24Hour = true;
+
+    if ($('#timePickerIncrement').val().length && $('#timePickerIncrement').val() != 1)
+      options.timePickerIncrement = parseInt($('#timePickerIncrement').val(), 10);
+
+    if ($('#timePickerSeconds').is(':checked'))
+      options.timePickerSeconds = true;
+
+    if ($('#autoApply').is(':checked'))
+      options.autoApply = true;
+
+    if ($('#dateLimit').is(':checked'))
+      options.dateLimit = { days: 7 };
+
+    if ($('#ranges').is(':checked')) {
+      options.ranges = {
+        'Today': [moment(), moment()],
+        'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
+        'Last 7 Days': [moment().subtract(6, 'days'), moment()],
+        'Last 30 Days': [moment().subtract(29, 'days'), moment()],
+        'This Month': [moment().startOf('month'), moment().endOf('month')],
+        'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
+      };
+    }
+
+    if ($('#locale').is(':checked')) {
+      options.locale = {
+        format: 'MM/DD/YYYY HH:mm',
+        separator: ' - ',
+        applyLabel: 'Apply',
+        cancelLabel: 'Cancel',
+        fromLabel: 'From',
+        toLabel: 'To',
+        customRangeLabel: 'Custom',
+        daysOfWeek: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr','Sa'],
+        monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
+        firstDay: 1
+      };
+    }
+
+    if (!$('#linkedCalendars').is(':checked'))
+      options.linkedCalendars = false;
+
+    if (!$('#autoUpdateInput').is(':checked'))
+      options.autoUpdateInput = false;
+
+    if ($('#alwaysShowCalendars').is(':checked'))
+      options.alwaysShowCalendars = true;
+
+    if ($('#parentEl').val().length)
+      options.parentEl = $('#parentEl').val();
+
+    if ($('#startDate').val().length)
+      options.startDate = $('#startDate').val();
+
+    if ($('#endDate').val().length)
+      options.endDate = $('#endDate').val();
+
+    if ($('#minDate').val().length)
+      options.minDate = $('#minDate').val();
+
+    if ($('#maxDate').val().length)
+      options.maxDate = $('#maxDate').val();
+
+    if ($('#opens').val().length && $('#opens').val() != 'right')
+      options.opens = $('#opens').val();
+
+    if ($('#drops').val().length && $('#drops').val() != 'down')
+      options.drops = $('#drops').val();
+
+    if ($('#buttonClasses').val().length && $('#buttonClasses').val() != 'btn btn-sm')
+      options.buttonClasses = $('#buttonClasses').val();
+
+    if ($('#applyClass').val().length && $('#applyClass').val() != 'btn-success')
+      options.applyClass = $('#applyClass').val();
+
+    if ($('#cancelClass').val().length && $('#cancelClass').val() != 'btn-default')
+      options.cancelClass = $('#cancelClass').val();
+
+    $('#config-text').val("$('#demo').daterangepicker(" + JSON.stringify(options, null, '    ') + ", function(start, end, label) {\n  console.log(\"New date range selected: ' + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD') + ' (predefined range: ' + label + ')\");\n});");
+
+    $('#config-demo').daterangepicker(options, function(start, end, label) { console.log('New date range selected: ' + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD') + ' (predefined range: ' + label + ')'); });
+
+  }
+
+});

plugins/daterangepicker/package.js

@@ -0,0 +1,17 @@
+Package.describe({
+  name: 'dangrossman:bootstrap-daterangepicker',
+  version: '3.0.5',
+  summary: 'Date range picker component',
+  git: 'https://github.com/dangrossman/daterangepicker',
+  documentation: 'README.md'
+});
+
+Package.onUse(function(api) {
+  api.versionsFrom('METEOR@0.9.0.1');
+
+  api.use('momentjs:moment@2.22.1', ["client"]);
+  api.use('jquery@3.3.1', ["client"]);
+
+  api.addFiles('daterangepicker.js', ["client"]);
+  api.addFiles('daterangepicker.css', ["client"]);
+});

plugins/daterangepicker/package.json

@@ -0,0 +1,54 @@
+{
+  "_from": "daterangepicker",
+  "_id": "daterangepicker@3.0.5",
+  "_inBundle": false,
+  "_integrity": "sha512-BoVV+OjVARWNE15iF+3Y2QIMioAD2UODHvJwIq+NtG0vxh61dXRmOMXlw2dsvxS8KY4n5uvIcBfIPiEiiGJcBg==",
+  "_location": "/daterangepicker",
+  "_phantomChildren": {},
+  "_requested": {
+    "type": "tag",
+    "registry": true,
+    "raw": "daterangepicker",
+    "name": "daterangepicker",
+    "escapedName": "daterangepicker",
+    "rawSpec": "",
+    "saveSpec": null,
+    "fetchSpec": "latest"
+  },
+  "_requiredBy": [
+    "#USER",
+    "/"
+  ],
+  "_resolved": "https://registry.npmjs.org/daterangepicker/-/daterangepicker-3.0.5.tgz",
+  "_shasum": "97180f233cf9c222cd0767b9c37c2926976d633a",
+  "_spec": "daterangepicker",
+  "_where": "/Users/rejack/Projekte/GitHub/REJack/AdminLTE",
+  "author": {
+    "name": "Dan Grossman",
+    "email": "dan@dangrossman.info",
+    "url": "http://www.dangrossman.info"
+  },
+  "bugs": {
+    "url": "https://github.com/dangrossman/daterangepicker/issues"
+  },
+  "bundleDependencies": false,
+  "dependencies": {
+    "jquery": ">=1.10",
+    "moment": "^2.9.0"
+  },
+  "deprecated": false,
+  "description": "Date range picker component for Bootstrap",
+  "homepage": "https://github.com/dangrossman/daterangepicker",
+  "license": "MIT",
+  "main": "daterangepicker.js",
+  "name": "daterangepicker",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/dangrossman/daterangepicker.git"
+  },
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "style": "daterangepicker.css",
+  "version": "3.0.5"
+}

plugins/daterangepicker/website.css

@@ -0,0 +1,152 @@
+body {
+    font-size: 15px;
+    line-height: 1.6em;
+    position: relative;
+    margin: 0;
+}
+
+.navbar .nav-item {
+    padding: 8px 0 8px 20px;
+}
+
+.navbar .nav-link {
+    font-weight: bold;
+    font-size: 14px;
+    padding: 0;
+}
+
+.navbar-expand-sm .navbar-nav .nav-link {
+    padding: 0;
+}
+
+.well {
+    background: #f5f5f5;
+    border-radius: 4px;
+    padding: 20px;
+}
+
+h1 {
+    font-size: 20px;
+    margin-bottom: 1em;
+    padding-bottom: 5px;
+    border-bottom: 1px dotted #08c;
+}
+
+h1:before {
+    content: '#';
+    color: #666;
+    position: relative;
+    padding-right: 5px;
+}
+
+h2 {
+    padding: 0;
+    margin: 20px 0 0 0;
+    font-size: 18px;
+}
+
+h2 a {
+    color: #444;
+    display: block;
+    background: #eee;
+    padding: 8px 12px;
+    margin-bottom: 0;
+    cursor: default;
+    text-decoration: none;
+}
+
+input.form-control {
+    font-size: 14px;
+}
+
+.collapsable {
+    border: 1px solid #eee;
+    padding: 12px;
+    display: block;
+}
+
+label {
+    font-size: 13px;
+    font-weight: bold;
+}
+
+.gist {
+   overflow: auto;
+}
+
+.gist .blob-wrapper.data {
+   max-height: 350px;
+   overflow: auto;
+}
+
+.list-group-item {
+    padding: 4px 0;
+    border: 0;
+    font-size: 16px;
+}
+
+.leftcol {
+    position: absolute;
+    top: 180px;
+}
+
+.rightcol {
+    max-width: 950px;
+}
+
+.container {
+    max-width: 1300px;
+}
+
+@media (min-width: 980px) {
+    .rightcol {
+        margin-left: 320px;
+    }
+}
+
+p, pre {
+    margin-bottom: 2em;
+}
+
+ul.nobullets {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+ul.nobullets li {
+    padding-bottom: 1em;
+    margin-bottom: 1em;
+    border-bottom: 1px dotted #ddd;
+}
+
+input[type="text"] {
+    padding: 6px;
+    width: 100%;
+    border-radius: 4px;
+}
+
+#footer {
+    background: #222;
+    margin-top: 80px;
+    padding: 10px;
+    color: #fff;
+    text-align: center;
+}
+#footer a:link, #footer a:visited {
+    color: #fff;
+    border-bottom: 1px dotted #fff;
+}
+#jumbo {
+    background: #c1deef;
+    color: #000;
+    padding: 20px 0;
+    margin-bottom: 20px;
+}
+
+#jumbo h1 {
+    font-size: 28px;
+}
+#jumbo .btn {
+    border-radius: 0;
+    font-size: 16px;
+}

plugins/daterangepicker/website.js

@@ -0,0 +1,179 @@
+$(document).ready(function() {
+
+    $('#config-text').keyup(function() {
+      eval($(this).val());
+    });
+    
+    $('.configurator input, .configurator select').change(function() {
+      updateConfig();
+    });
+
+    $('.demo i').click(function() {
+      $(this).parent().find('input').click();
+    });
+
+    $('#startDate').daterangepicker({
+      singleDatePicker: true,
+      startDate: moment().subtract(6, 'days')
+    });
+
+    $('#endDate').daterangepicker({
+      singleDatePicker: true,
+      startDate: moment()
+    });
+
+    //updateConfig();
+
+    function updateConfig() {
+      var options = {};
+
+      if ($('#singleDatePicker').is(':checked'))
+        options.singleDatePicker = true;
+      
+      if ($('#showDropdowns').is(':checked'))
+        options.showDropdowns = true;
+
+      if ($('#minYear').val().length && $('#minYear').val() != 1)
+        options.minYear = parseInt($('#minYear').val(), 10);
+
+      if ($('#maxYear').val().length && $('#maxYear').val() != 1)
+        options.maxYear = parseInt($('#maxYear').val(), 10);
+
+      if ($('#showWeekNumbers').is(':checked'))
+        options.showWeekNumbers = true;
+
+      if ($('#showISOWeekNumbers').is(':checked'))
+        options.showISOWeekNumbers = true;
+
+      if ($('#timePicker').is(':checked'))
+        options.timePicker = true;
+      
+      if ($('#timePicker24Hour').is(':checked'))
+        options.timePicker24Hour = true;
+
+      if ($('#timePickerIncrement').val().length && $('#timePickerIncrement').val() != 1)
+        options.timePickerIncrement = parseInt($('#timePickerIncrement').val(), 10);
+
+      if ($('#timePickerSeconds').is(':checked'))
+        options.timePickerSeconds = true;
+      
+      if ($('#autoApply').is(':checked'))
+        options.autoApply = true;
+
+      if ($('#maxSpan').is(':checked'))
+        options.maxSpan = { days: 7 };
+
+      if ($('#ranges').is(':checked')) {
+        options.ranges = {
+          'Today': [moment(), moment()],
+          'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
+          'Last 7 Days': [moment().subtract(6, 'days'), moment()],
+          'Last 30 Days': [moment().subtract(29, 'days'), moment()],
+          'This Month': [moment().startOf('month'), moment().endOf('month')],
+          'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
+        };
+      }
+
+      if ($('#locale').is(':checked')) {
+        options.locale = {
+          format: 'MM/DD/YYYY',
+          separator: ' - ',
+          applyLabel: 'Apply',
+          cancelLabel: 'Cancel',
+          fromLabel: 'From',
+          toLabel: 'To',
+          customRangeLabel: 'Custom',
+          weekLabel: 'W',
+          daysOfWeek: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr','Sa'],
+          monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
+          firstDay: 1
+        };
+      }
+
+      if (!$('#linkedCalendars').is(':checked'))
+        options.linkedCalendars = false;
+
+      if (!$('#autoUpdateInput').is(':checked'))
+        options.autoUpdateInput = false;
+
+      if (!$('#showCustomRangeLabel').is(':checked'))
+        options.showCustomRangeLabel = false;
+
+      if ($('#alwaysShowCalendars').is(':checked'))
+        options.alwaysShowCalendars = true;
+
+      if ($('#parentEl').val().length)
+        options.parentEl = $('#parentEl').val();
+
+      if ($('#startDate').val().length) 
+        options.startDate = $('#startDate').val();
+
+      if ($('#endDate').val().length)
+        options.endDate = $('#endDate').val();
+      
+      if ($('#minDate').val().length)
+        options.minDate = $('#minDate').val();
+
+      if ($('#maxDate').val().length)
+        options.maxDate = $('#maxDate').val();
+
+      if ($('#opens').val().length && $('#opens').val() != 'right')
+        options.opens = $('#opens').val();
+
+      if ($('#drops').val().length && $('#drops').val() != 'down')
+        options.drops = $('#drops').val();
+
+      if ($('#buttonClasses').val().length && $('#buttonClasses').val() != 'btn btn-sm')
+        options.buttonClasses = $('#buttonClasses').val();
+
+      if ($('#applyButtonClasses').val().length && $('#applyButtonClasses').val() != 'btn-primary')
+        options.applyButtonClasses = $('#applyButtonClasses').val();
+
+      if ($('#cancelButtonClasses').val().length && $('#cancelButtonClasses').val() != 'btn-default')
+        options.cancelClass = $('#cancelButtonClasses').val();
+
+      $('#config-demo').daterangepicker(options, function(start, end, label) { console.log('New date range selected: ' + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD') + ' (predefined range: ' + label + ')'); });
+      
+      if (typeof options.ranges !== 'undefined') {
+        options.ranges = {};
+      }
+
+      var option_text = JSON.stringify(options, null, '    ');
+
+      var replacement = "ranges: {\n"
+          + "        'Today': [moment(), moment()],\n"
+          + "        'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],\n"
+          + "        'Last 7 Days': [moment().subtract(6, 'days'), moment()],\n"
+          + "        'Last 30 Days': [moment().subtract(29, 'days'), moment()],\n"
+          + "        'This Month': [moment().startOf('month'), moment().endOf('month')],\n"
+          + "        'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]\n"
+          + "    }";
+      option_text = option_text.replace(new RegExp('"ranges"\: \{\}', 'g'), replacement);
+
+      $('#config-text').val("$('#demo').daterangepicker(" + option_text + ", function(start, end, label) {\n  console.log('New date range selected: ' + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD') + ' (predefined range: ' + label + ')');\n});");
+
+    }
+
+    $(window).scroll(function (event) {
+        var scroll = $(window).scrollTop();
+        if (scroll > 180) {
+          $('.leftcol').css('position', 'fixed');
+          $('.leftcol').css('top', '10px');
+        } else {
+          $('.leftcol').css('position', 'absolute');
+          $('.leftcol').css('top', '180px');
+        }
+    });
+
+    var bg = new Trianglify({
+      x_colors: ["#e1f3fd", "#eeeeee", "#407dbf"],
+      y_colors: 'match_x',
+      width: document.body.clientWidth,
+      height: 150,
+      stroke_width: 0,
+      cell_size: 20
+    });
+
+    $('#jumbo').css('background-image', 'url(' + bg.png() + ')');
+
+});

plugins/daterangepicker/website/website.css

@@ -0,0 +1,152 @@
+body {
+    font-size: 15px;
+    line-height: 1.6em;
+    position: relative;
+    margin: 0;
+}
+
+.navbar .nav-item {
+    padding: 8px 0 8px 20px;
+}
+
+.navbar .nav-link {
+    font-weight: bold;
+    font-size: 14px;
+    padding: 0;
+}
+
+.navbar-expand-sm .navbar-nav .nav-link {
+    padding: 0;
+}
+
+.well {
+    background: #f5f5f5;
+    border-radius: 4px;
+    padding: 20px;
+}
+
+h1 {
+    font-size: 20px;
+    margin-bottom: 1em;
+    padding-bottom: 5px;
+    border-bottom: 1px dotted #08c;
+}
+
+h1:before {
+    content: '#';
+    color: #666;
+    position: relative;
+    padding-right: 5px;
+}
+
+h2 {
+    padding: 0;
+    margin: 20px 0 0 0;
+    font-size: 18px;
+}
+
+h2 a {
+    color: #444;
+    display: block;
+    background: #eee;
+    padding: 8px 12px;
+    margin-bottom: 0;
+    cursor: default;
+    text-decoration: none;
+}
+
+input.form-control {
+    font-size: 14px;
+}
+
+.collapsable {
+    border: 1px solid #eee;
+    padding: 12px;
+    display: block;
+}
+
+label {
+    font-size: 13px;
+    font-weight: bold;
+}
+
+.gist {
+   overflow: auto;
+}
+
+.gist .blob-wrapper.data {
+   max-height: 350px;
+   overflow: auto;
+}
+
+.list-group-item {
+    padding: 4px 0;
+    border: 0;
+    font-size: 16px;
+}
+
+.leftcol {
+    position: absolute;
+    top: 180px;
+}
+
+.rightcol {
+    max-width: 950px;
+}
+
+.container {
+    max-width: 1300px;
+}
+
+@media (min-width: 980px) {
+    .rightcol {
+        margin-left: 320px;
+    }
+}
+
+p, pre {
+    margin-bottom: 2em;
+}
+
+ul.nobullets {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+ul.nobullets li {
+    padding-bottom: 1em;
+    margin-bottom: 1em;
+    border-bottom: 1px dotted #ddd;
+}
+
+input[type="text"] {
+    padding: 6px;
+    width: 100%;
+    border-radius: 4px;
+}
+
+#footer {
+    background: #222;
+    margin-top: 80px;
+    padding: 10px;
+    color: #fff;
+    text-align: center;
+}
+#footer a:link, #footer a:visited {
+    color: #fff;
+    border-bottom: 1px dotted #fff;
+}
+#jumbo {
+    background: #c1deef;
+    color: #000;
+    padding: 20px 0;
+    margin-bottom: 20px;
+}
+
+#jumbo h1 {
+    font-size: 28px;
+}
+#jumbo .btn {
+    border-radius: 0;
+    font-size: 16px;
+}

plugins/daterangepicker/website/website.js

@@ -0,0 +1,179 @@
+$(document).ready(function() {
+
+    $('#config-text').keyup(function() {
+      eval($(this).val());
+    });
+    
+    $('.configurator input, .configurator select').change(function() {
+      updateConfig();
+    });
+
+    $('.demo i').click(function() {
+      $(this).parent().find('input').click();
+    });
+
+    $('#startDate').daterangepicker({
+      singleDatePicker: true,
+      startDate: moment().subtract(6, 'days')
+    });
+
+    $('#endDate').daterangepicker({
+      singleDatePicker: true,
+      startDate: moment()
+    });
+
+    //updateConfig();
+
+    function updateConfig() {
+      var options = {};
+
+      if ($('#singleDatePicker').is(':checked'))
+        options.singleDatePicker = true;
+      
+      if ($('#showDropdowns').is(':checked'))
+        options.showDropdowns = true;
+
+      if ($('#minYear').val().length && $('#minYear').val() != 1)
+        options.minYear = parseInt($('#minYear').val(), 10);
+
+      if ($('#maxYear').val().length && $('#maxYear').val() != 1)
+        options.maxYear = parseInt($('#maxYear').val(), 10);
+
+      if ($('#showWeekNumbers').is(':checked'))
+        options.showWeekNumbers = true;
+
+      if ($('#showISOWeekNumbers').is(':checked'))
+        options.showISOWeekNumbers = true;
+
+      if ($('#timePicker').is(':checked'))
+        options.timePicker = true;
+      
+      if ($('#timePicker24Hour').is(':checked'))
+        options.timePicker24Hour = true;
+
+      if ($('#timePickerIncrement').val().length && $('#timePickerIncrement').val() != 1)
+        options.timePickerIncrement = parseInt($('#timePickerIncrement').val(), 10);
+
+      if ($('#timePickerSeconds').is(':checked'))
+        options.timePickerSeconds = true;
+      
+      if ($('#autoApply').is(':checked'))
+        options.autoApply = true;
+
+      if ($('#maxSpan').is(':checked'))
+        options.maxSpan = { days: 7 };
+
+      if ($('#ranges').is(':checked')) {
+        options.ranges = {
+          'Today': [moment(), moment()],
+          'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
+          'Last 7 Days': [moment().subtract(6, 'days'), moment()],
+          'Last 30 Days': [moment().subtract(29, 'days'), moment()],
+          'This Month': [moment().startOf('month'), moment().endOf('month')],
+          'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
+        };
+      }
+
+      if ($('#locale').is(':checked')) {
+        options.locale = {
+          format: 'MM/DD/YYYY',
+          separator: ' - ',
+          applyLabel: 'Apply',
+          cancelLabel: 'Cancel',
+          fromLabel: 'From',
+          toLabel: 'To',
+          customRangeLabel: 'Custom',
+          weekLabel: 'W',
+          daysOfWeek: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr','Sa'],
+          monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
+          firstDay: 1
+        };
+      }
+
+      if (!$('#linkedCalendars').is(':checked'))
+        options.linkedCalendars = false;
+
+      if (!$('#autoUpdateInput').is(':checked'))
+        options.autoUpdateInput = false;
+
+      if (!$('#showCustomRangeLabel').is(':checked'))
+        options.showCustomRangeLabel = false;
+
+      if ($('#alwaysShowCalendars').is(':checked'))
+        options.alwaysShowCalendars = true;
+
+      if ($('#parentEl').val().length)
+        options.parentEl = $('#parentEl').val();
+
+      if ($('#startDate').val().length) 
+        options.startDate = $('#startDate').val();
+
+      if ($('#endDate').val().length)
+        options.endDate = $('#endDate').val();
+      
+      if ($('#minDate').val().length)
+        options.minDate = $('#minDate').val();
+
+      if ($('#maxDate').val().length)
+        options.maxDate = $('#maxDate').val();
+
+      if ($('#opens').val().length && $('#opens').val() != 'right')
+        options.opens = $('#opens').val();
+
+      if ($('#drops').val().length && $('#drops').val() != 'down')
+        options.drops = $('#drops').val();
+
+      if ($('#buttonClasses').val().length && $('#buttonClasses').val() != 'btn btn-sm')
+        options.buttonClasses = $('#buttonClasses').val();
+
+      if ($('#applyButtonClasses').val().length && $('#applyButtonClasses').val() != 'btn-primary')
+        options.applyButtonClasses = $('#applyButtonClasses').val();
+
+      if ($('#cancelButtonClasses').val().length && $('#cancelButtonClasses').val() != 'btn-default')
+        options.cancelClass = $('#cancelButtonClasses').val();
+
+      $('#config-demo').daterangepicker(options, function(start, end, label) { console.log('New date range selected: ' + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD') + ' (predefined range: ' + label + ')'); });
+      
+      if (typeof options.ranges !== 'undefined') {
+        options.ranges = {};
+      }
+
+      var option_text = JSON.stringify(options, null, '    ');
+
+      var replacement = "ranges: {\n"
+          + "        'Today': [moment(), moment()],\n"
+          + "        'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],\n"
+          + "        'Last 7 Days': [moment().subtract(6, 'days'), moment()],\n"
+          + "        'Last 30 Days': [moment().subtract(29, 'days'), moment()],\n"
+          + "        'This Month': [moment().startOf('month'), moment().endOf('month')],\n"
+          + "        'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]\n"
+          + "    }";
+      option_text = option_text.replace(new RegExp('"ranges"\: \{\}', 'g'), replacement);
+
+      $('#config-text').val("$('#demo').daterangepicker(" + option_text + ", function(start, end, label) {\n  console.log('New date range selected: ' + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD') + ' (predefined range: ' + label + ')');\n});");
+
+    }
+
+    $(window).scroll(function (event) {
+        var scroll = $(window).scrollTop();
+        if (scroll > 180) {
+          $('.leftcol').css('position', 'fixed');
+          $('.leftcol').css('top', '10px');
+        } else {
+          $('.leftcol').css('position', 'absolute');
+          $('.leftcol').css('top', '180px');
+        }
+    });
+
+    var bg = new Trianglify({
+      x_colors: ["#e1f3fd", "#eeeeee", "#407dbf"],
+      y_colors: 'match_x',
+      width: document.body.clientWidth,
+      height: 150,
+      stroke_width: 0,
+      cell_size: 20
+    });
+
+    $('#jumbo').css('background-image', 'url(' + bg.png() + ')');
+
+});

plugins/fullcalendar-bootstrap/LICENSE.txt

@@ -0,0 +1,20 @@
+Copyright (c) 2019 Adam Shaw
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

plugins/fullcalendar-bootstrap/README.md

@@ -0,0 +1,8 @@
+
+# FullCalendar Bootstrap Plugin
+
+Bootstrap 4 theming for your calendar
+
+[View the docs »](https://fullcalendar.io/docs/bootstrap-theme)
+
+This package was created from the [FullCalendar monorepo »](https://github.com/fullcalendar/fullcalendar)