Use the default service duration if the user just clicks on a calendar slot for creating a new appointment (#1237)

assets/js/pages/calendar.js

@@ -103,6 +103,35 @@ App.Pages.Calendar = (function () {
         });
     }
 
+    /**
+     * Get calendar selection end date.
+     *
+     * On calendar slot selection, calculate the end date based on the provided start date.
+     *
+     * @param {Object} info Holding the "start" and "end" props, as provided by FullCalendar.
+     *
+     * @return {Date}
+     */
+    function getSelectionEndDate(info) {
+        const startMoment = moment(info.start);
+        const endMoment = moment(info.end);
+        const startTillEndDiff = endMoment.diff(startMoment);
+        const startTillEndDuration = moment.duration(startTillEndDiff);
+        const durationInMinutes = startTillEndDuration.asMinutes();
+        const minDurationInMinutes = 15;
+
+        if (durationInMinutes <= minDurationInMinutes) {
+            const serviceId = $('#select-service').val();
+            const service = vars('available_services').find(availableService => Number(availableService.id) === Number(serviceId));
+
+            if (service) {
+                endMoment.add(service.duration - durationInMinutes, 'minutes');
+            }
+        }
+
+        return endMoment.toDate();
+    }
+
     /**
      * Initialize the module.
      *
@@ -124,6 +153,7 @@ App.Pages.Calendar = (function () {
     document.addEventListener('DOMContentLoaded', initialize);
 
     return {
-        initialize
+        initialize,
+        getSelectionEndDate
     };
 })();

assets/js/utils/calendar_default_view.js

@@ -1567,7 +1567,9 @@ App.Utils.CalendarDefaultView = (function () {
 
                             // Preselect time
                             $('#start-datetime').datepicker('setDate', info.start);
-                            $('#end-datetime').datepicker('setDate', info.end);
+                            $('#end-datetime').datepicker('setDate', App.Pages.Calendar.getSelectionEndDate(info));
+
+                            // $('#end-datetime').datepicker('setDate', info.end);
                             $('#message-box').dialog('close');
                         }
                     }

assets/js/utils/calendar_table_view.js

@@ -783,8 +783,8 @@ App.Utils.CalendarTableView = (function () {
                 $selectProvider.trigger('change');
 
                 // Preselect time
-                $('#start-datetime').datepicker('setDate', new Date(moment(info.start).format('YYYY/MM/DD HH:mm:ss')));
+                $('#start-datetime').datepicker('setDate', info.start);
-                $('#end-datetime').datepicker('setDate', new Date(moment(info.end).format('YYYY/MM/DD HH:mm:ss')));
+                $('#end-datetime').datepicker('setDate', App.Pages.Calendar.getSelectionEndDate(info));
 
                 return false;
             },