Dta/slot single selection support

public/css/style.css

@@ -911,3 +911,6 @@ span.pro-selection {
     padding: 0 !important;
     overflow: hidden !important;
 }
+.fc .fc-highlight {
+    background: rgba(188, 232, 241, 0.6) !important;
+}

resources/views/app/patient/appointment-calendar.blade.php

@@ -104,7 +104,10 @@
                         proMeta: {!! json_encode($proMeta) !!},
                         proIds: ['{{ $pro->id }}'],
                         timezone: 'EASTERN',
-                        clickedDate: null,
+
+                        // user clicks/selection
+                        selectedSlot: null,
+                        selectedEvent: null,
                     },
                     methods: {
                         // init
@@ -172,6 +175,7 @@
                                 },
                                 initialDate: '{{ date('Y-m-d') }}',
                                 editable: true,
+                                selectable: true,
                                 navLinks: true,
                                 dayMaxEvents: false,
                                 events: function(info, successCallback, failureCallback) {
@@ -211,15 +215,20 @@
                                 loading: function(bool) {
 
                                 },
-                                dateClick: function(info) {
-                                    this.clickedDate = {
-                                        allDay: info.allDay,
-                                        date: info.date,
-                                        dateStr: info.dateStr,
-                                        dayEl: info.dayEl,
-                                    };
-                                    $('.appt-form td.stag-selected').removeClass('stag-selected');
-                                    $(info.dayEl).addClass('stag-selected');
+                                eventClick: function(info) {
+                                    self.selectedEvent = info.event;
+                                },
+                                selectAllow: function(info) { // allow only single selections
+                                    let seconds = info.end.getTime() - info.start.getTime(),
+                                        maxDelta = 86400000;
+                                    console.log(seconds);
+                                    if(!info.allDay) {
+                                        maxDelta = 1800000;
+                                    }
+                                    return seconds <= maxDelta;
+                                },
+                                select: function(info) {
+                                    self.selectedSlot = info;
                                 },
                                 eventDrop: self.eventMovedOrResized,
                                 eventResize: self.eventMovedOrResized