Main dashboard to use jquery-ui datepicker (experimental)

app/Http/Controllers/HomeController.php

@@ -466,7 +466,8 @@ WHERE measurement.label NOT IN ('SBP', 'DBP')
 
         $dates = [];
         foreach ($results as $result) {
-            $dates[] = strtotime($result->raw_date) . '000';
+            // $dates[] = strtotime($result->raw_date) . '000';
+            $dates[] = $result->raw_date;
         }
 
 //        foreach ($results as $result) {

public/css/style.css

@@ -562,8 +562,14 @@ input.search_field, textarea.search_field {
     padding: 0.25rem 0;
     border-radius: 0;
 }
-.pro-dashboard-inline-calendar table.table-condensed td[has-events] {
-    background: #c5e4ff;
+.pro-dashboard-inline-calendar table.table-condensed td[has-events],
+.pro-dashboard-inline-calendar td.has-events a {
+    background: #c5e4ff !important;
+    font-weight: bold !important;
+    color: #000 !important;
+}
+.pro-dashboard-inline-calendar td a {
+    text-align: center !important;
 }
 [v-cloak] {
     opacity: 0;
@@ -1621,4 +1627,9 @@ th.only-screen, td.only-screen {
 }
 .stag-table-container-lg>table{
     min-width: 1450px;
+}
+
+.pro-dashboard-inline-calendar>.ui-datepicker-inline {
+    width: 100%;
+    border: 0 !important;
 }

resources/views/app/dashboard.blade.php

@@ -315,14 +315,15 @@
                     onDateChange: function (_newDate) {
                         let self = this;
                         window.setTimeout(() => {
-                            let dayValue = $('.pro-dashboard-inline-calendar td.day.active').first().text();
-                            if(dayValue.length === 1) dayValue = '0' + dayValue;
-                            self.selectedDate = _newDate.substr(0, 8) + dayValue;
+                            // let dayValue = $('.pro-dashboard-inline-calendar td.day.active').first().text();
+                            // if(dayValue.length === 1) dayValue = '0' + dayValue;
+                            // self.selectedDate = _newDate.substr(0, 8) + dayValue;
+                            self.selectedDate = _newDate;
                             showMask();
                             self.loadEvents(self.selectedDate, function() {
                                 hideMask();
                                 Vue.nextTick(() => {
-                                    self.highlightDatesWithEvents(self.datesWithEvents);
+                                    // self.highlightDatesWithEvents(self.datesWithEvents);
                                     initFastLoad($('.appointments-tab'));
                                 });
                             });
@@ -394,7 +395,7 @@
                         form.hide();
                     },
                     loadEventDates: function(_refDate = false) {
-                        let today = new Date(_refDate ? +_refDate : '{{date('Y-m-d')}}'),
+                        let today = new Date(_refDate ? _refDate : '{{date('Y-m-d')}}'),
                             firstOfMonth = new Date(today.getFullYear(), today.getMonth(), 1),
                             lastOfMonth = new Date(today.getFullYear(), today.getMonth() + 1, 0);
 
@@ -405,7 +406,9 @@
                             this.formatDate(firstOfMonth) + '/' +
                             this.formatDate(lastOfMonth), (_data) => {
                             this.datesWithEvents = _data;
-                            this.highlightDatesWithEvents(this.datesWithEvents);
+                            console.log(this.datesWithEvents);
+                            this.calendarElem.datepicker('refresh');
+                            // this.highlightDatesWithEvents(this.datesWithEvents);
 
                             this.currentMonth = firstOfMonth.getMonth();
                             this.currentYear = firstOfMonth.getFullYear();
@@ -499,20 +502,35 @@
                     let self = this;
                     this.calendarElem = $('.pro-dashboard-inline-calendar');
                     this.calendarElem.datepicker({
-                        format: 'yyyy-mm-dd'
+                        dateFormat: 'yy-mm-dd',
+                        onSelect: function(_date) {
+                            self.onDateChange(_date);
+                        },
+                        onChangeMonthYear: function(_year, _month) {
+                            let date = _year + '-' + (_month < 10 ? '0' : '') + _month + '-05';
+                            self.loadEventDates(date);
+                        },
+                        beforeShowDay: function(d) {
+                            if(self.datesWithEvents && self.datesWithEvents.indexOf(self.formatDate(d)) !== -1) {
+                                return [true, 'has-events'];
+                            }
+                            return [true, 'no-events'];
+                        }
                     });
-                    this.calendarElem
-                        .on('changeDate', function () {
-                            self.onDateChange(self.calendarElem.datepicker('getFormattedDate'));
-                        })
-                        .on('changeMonth', function () {
-                            window.setTimeout(function() {
-                                let ts = $('td.day[data-date]').first().closest('tr').find('td.day[data-date]').last().attr('data-date');
-                                if(ts) {
-                                    self.loadEventDates(ts);
-                                }
-                            }, 10);
-                        });
+                    // this.calendarElem
+                    //     .on('changeDate', function () {
+                    //         self.onDateChange(self.calendarElem.datepicker('getFormattedDate'));
+                    //     })
+                    //     .on('changeMonth', function () {
+                    //         window.setTimeout(function() {
+                    //             let ts = $('td.day[data-date]').first().closest('tr').find('td.day[data-date]').last().attr('data-date');
+                    //             if(ts) {
+                    //                 self.loadEventDates(ts);
+                    //             }
+                    //         }, 10);
+                    //     });
+
+
 
                     $('#pro-dashboard-container').find('[moe][initialized]').removeAttr('initialized');
                     initMoes();

resources/views/layouts/template.blade.php

@@ -55,8 +55,11 @@
     <script src='/js/autocomplete-lhc.js'></script>
 
     {{-- inline bootstrap datepicker --}}
-    <link href='/bootstrap-datepicker/css/bootstrap-datepicker.standalone.min.css' rel="stylesheet">
-    <script src='/bootstrap-datepicker/js/bootstrap-datepicker.min.js'></script>
+{{--    <link href='/bootstrap-datepicker/css/bootstrap-datepicker.standalone.min.css' rel="stylesheet">
+    <script src='/bootstrap-datepicker/js/bootstrap-datepicker.min.js'></script>--}}
+
+    <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
+    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
 
     {{-- pdfjs --}}
     <script src="https://mozilla.github.io/pdf.js/build/pdf.js"></script>