The booking zone supports timezones.

application/controllers/Appointments.php

@@ -68,6 +68,7 @@ class Appointments extends CI_Controller {
         $this->load->model('services_model');
         $this->load->model('customers_model');
         $this->load->model('settings_model');
+        $this->load->model('timezones_model');
 
         try
         {
@@ -84,6 +85,7 @@ class Appointments extends CI_Controller {
             $terms_and_conditions_content = $this->settings_model->get_setting('terms_and_conditions_content');
             $display_privacy_policy = $this->settings_model->get_setting('display_privacy_policy');
             $privacy_policy_content = $this->settings_model->get_setting('privacy_policy_content');
+            $timezones = $this->timezones_model->to_array();
 
             // Remove the data that are not needed inside the $available_providers array.
             foreach ($available_providers as $index => $provider)
@@ -92,7 +94,8 @@ class Appointments extends CI_Controller {
                     'id' => $provider['id'],
                     'first_name' => $provider['first_name'],
                     'last_name' => $provider['last_name'],
-                    'services' => $provider['services']
+                    'services' => $provider['services'],
+                    'timezone' => $provider['timezone']
                 ];
                 $available_providers[$index] = $stripped_data;
             }
@@ -160,6 +163,7 @@ class Appointments extends CI_Controller {
                 'terms_and_conditions_content' => $terms_and_conditions_content,
                 'display_privacy_policy' => $display_privacy_policy,
                 'privacy_policy_content' => $privacy_policy_content,
+                'timezones' => $timezones,
             ];
         }
         catch (Exception $exc)

application/views/appointments/book.php

@@ -182,6 +182,9 @@
                             </div>
 
                             <div class="col-xs-12 col-sm-6">
+                                <label for="select-timezone"><?= lang('timezone') ?></label>
+                                <?= render_timezone_dropdown('id="select-timezone" class="form-control" value="UTC"'); ?>
+
                                 <div id="available-hours"></div>
                             </div>
                         </div>
@@ -391,6 +394,8 @@
     <script src="<?= asset_url('assets/ext/cookieconsent/cookieconsent.min.js') ?>"></script>
     <script src="<?= asset_url('assets/ext/bootstrap/js/bootstrap.min.js') ?>"></script>
     <script src="<?= asset_url('assets/ext/datejs/date.min.js') ?>"></script>
+    <script src="<?= asset_url('assets/ext/moment/moment.min.js') ?>"></script>
+    <script src="<?= asset_url('assets/ext/moment/moment-timezone-with-data.min.js') ?>"></script>
     <script src="<?= asset_url('assets/js/frontend_book_api.js') ?>"></script>
     <script src="<?= asset_url('assets/js/frontend_book.js') ?>"></script>
 

assets/css/frontend.css

@@ -162,6 +162,10 @@ body {
     min-width: 270px; /* This is especially needed for ie8 */
 }
 
+#book-appointment-wizard #select-timezone {
+    margin-bottom: 15px;
+}
+
 #book-appointment-wizard #appointment-details p,
 #book-appointment-wizard #customer-details p {
     font-size: 16px;

assets/js/frontend_book.js

@@ -61,7 +61,7 @@ window.FrontendBook = window.FrontendBook || {};
             window.console = function () {
             }; // IE compatibility
         }
-        
+
         if (GlobalVariables.displayCookieNotice) {
             cookieconsent.initialise({
                 palette: {
@@ -144,6 +144,8 @@ window.FrontendBook = window.FrontendBook || {};
             }
         });
 
+        $('#select-timezone').val(Intl.DateTimeFormat().resolvedOptions().timeZone);
+
         // Bind the event handlers (might not be necessary every time we use this class).
         if (bindEventHandlers) {
             _bindEventHandlers();
@@ -166,11 +168,11 @@ window.FrontendBook = window.FrontendBook || {};
 
             $selectService.trigger('change'); // Load the available hours.
 
-            // Check if a specific provider was selected. 
+            // Check if a specific provider was selected.
             var selectedProviderId = GeneralFunctions.getUrlParameter(location.href, 'provider');
 
             if (selectedProviderId && $selectProvider.find('option[value="' + selectedProviderId + '"]').length === 0) {
-                // Select a service of this provider in order to make the provider available in the select box. 
+                // Select a service of this provider in order to make the provider available in the select box.
                 for (var index in GlobalVariables.availableProviders) {
                     var provider = GlobalVariables.availableProviders[index];
 
@@ -195,6 +197,21 @@ window.FrontendBook = window.FrontendBook || {};
      * This method binds the necessary event handlers for the book appointments page.
      */
     function _bindEventHandlers() {
+        /**
+         * Event: Timezone "Changed"
+         */
+        $('#select-timezone').on('change', function () {
+            var date = $('#select-date').datepicker('getDate');
+
+            if (!date) {
+                return;
+            }
+
+            FrontendBookApi.getAvailableHours(date.toString('yyyy-MM-dd'));
+
+            FrontendBook.updateConfirmFrame();
+        });
+
         /**
          * Event: Selected Provider "Changed"
          *
@@ -517,7 +534,7 @@ window.FrontendBook = window.FrontendBook || {};
             '<p>'
             + '<strong class="text-primary">'
             + $('#select-provider option:selected').text() + '<br>'
-            + selectedDate + ' ' + $('.selected-hour').text()
+            + selectedDate + ' ' + $('.selected-hour').text() + '<br>' + $('#select-timezone option:selected').text()
             + servicePrice + ' ' + serviceCurrency
             + '</strong>' +
             '</p>';
@@ -560,7 +577,8 @@ window.FrontendBook = window.FrontendBook || {};
             phone_number: $('#phone-number').val(),
             address: $('#address').val(),
             city: $('#city').val(),
-            zip_code: $('#zip-code').val()
+            zip_code: $('#zip-code').val(),
+            timezone: $('#select-timezone').val()
         };
 
         postData.appointment = {

assets/js/frontend_book_api.js

@@ -68,10 +68,25 @@ window.FrontendBookApi = window.FrontendBookApi || {};
             // The response contains the available hours for the selected provider and
             // service. Fill the available hours div with response data.
             if (response.length > 0) {
+                var providerId = $('#select-provider').val();
+
+                var provider = GlobalVariables.availableProviders.filter(function(availableProvider) {
+                    return providerId == availableProvider.id;
+                }).shift();
+
+                if (!provider) {
+                    throw new Error('Could not find provider.');
+                }
+
+                var providerTimezone = provider.timezone;
+
+                var selectedTimezone = $('#select-timezone').val();
+
                 var currColumn = 1;
+
                 $('#available-hours').html('<div style="width:80px; float:left;"></div>');
 
-                var timeFormat = GlobalVariables.timeFormat === 'regular' ? 'h:mm tt' : 'HH:mm';
+                var timeFormat = GlobalVariables.timeFormat === 'regular' ? 'h:mm a' : 'HH:mm';
 
                 $.each(response, function (index, availableHour) {
                     if ((currColumn * 10) < (index + 1)) {
@@ -79,8 +94,12 @@ window.FrontendBookApi = window.FrontendBookApi || {};
                         $('#available-hours').append('<div style="width:80px; float:left;"></div>');
                     }
 
+                    var availableHourMoment = moment
+                        .tz(selDate + ' ' + availableHour + ':00', providerTimezone)
+                        .tz(selectedTimezone);
+
                     $('#available-hours div:eq(' + (currColumn - 1) + ')').append(
-                        '<span class="available-hour">' + Date.parse(availableHour).toString(timeFormat) + '</span><br/>');
+                        '<span class="available-hour">' + availableHourMoment.format(timeFormat) + '</span><br/>');
                 });
 
                 if (FrontendBook.manageMode) {