From 6432998dad43cb57f8bf43a04a52b61b5d9929a2 Mon Sep 17 00:00:00 2001
From: Alex Tselegidis <alextselegidis@gmail.com>
Date: Sun, 15 May 2016 13:05:28 +0200
Subject: [PATCH] Enhancements in the backend_calendar.js comments and code.

---
 src/assets/js/backend_calendar.js | 791 +++++++++++++++---------------
 1 file changed, 394 insertions(+), 397 deletions(-)

diff --git a/src/assets/js/backend_calendar.js b/src/assets/js/backend_calendar.js
index 9522770e..16ac1909 100644
--- a/src/assets/js/backend_calendar.js
+++ b/src/assets/js/backend_calendar.js
@@ -30,16 +30,16 @@ window.BackendCalendar = window.BackendCalendar || {};
     var lastFocusedEventData; // Contains event data for later use.
 
     /**
-     * This method binds the default event handlers for the backend calendar
-     * page. If you do not need the default handlers then initialize the page
-     * by setting the "defaultEventHandlers" argument to "false".
+     * Bind Event Handlers
+     *
+     * This method binds the default event handlers for the backend calendar page. If you do not need the
+     * default handlers then initialize the page by setting the "defaultEventHandlers" argument to "false".
      */
     function _bindEventHandlers() {
         /**
          * Event: Calendar Filter Item "Change"
          *
-         * Load the appointments that correspond to the select filter item and
-         * display them on the calendar.
+         * Load the appointments that correspond to the select filter item and display them on the calendar.
          */
         $('#select-filter-item').change(function() {
             _refreshCalendarAppointments(
@@ -50,14 +50,11 @@ window.BackendCalendar = window.BackendCalendar || {};
                     $('#calendar').fullCalendar('getView').visEnd);
 
             // If current value is service, then the sync buttons must be disabled.
-            if ($('#select-filter-item option:selected').attr('type')
-                    === FILTER_TYPE_SERVICE) {
-                $('#google-sync, #enable-sync, #insert-appointment, #insert-unavailable')
-                        .prop('disabled', true);
+            if ($('#select-filter-item option:selected').attr('type') === FILTER_TYPE_SERVICE) {
+                $('#google-sync, #enable-sync, #insert-appointment, #insert-unavailable').prop('disabled', true);
             } else {
+                $('#google-sync, #enable-sync, #insert-appointment, #insert-unavailable').prop('disabled', false);
 
-                $('#google-sync, #enable-sync, #insert-appointment, #insert-unavailable')
-                        .prop('disabled', false);
                 // If the user has already the sync enabled then apply the proper style changes.
                 if ($('#select-filter-item option:selected').attr('google-sync') === 'true') {
                     $('#enable-sync').addClass('btn-danger enabled');
@@ -78,6 +75,7 @@ window.BackendCalendar = window.BackendCalendar || {};
          */
         $('#google-sync').click(function() {
             var url = GlobalVariables.baseUrl + '/index.php/google/sync/' + $('#select-filter-item').val();
+
             $.ajax({
                 url: url,
                 type: 'GET',
@@ -110,8 +108,7 @@ window.BackendCalendar = window.BackendCalendar || {};
         /**
          * Event: Reload Button "Click"
          *
-         * When the user clicks the reload button an the calendar items need to
-         * be refreshed.
+         * When the user clicks the reload button an the calendar items need to be refreshed.
          */
         $('#reload-appointments').click(function() {
             $('#select-filter-item').trigger('change');
@@ -142,7 +139,7 @@ window.BackendCalendar = window.BackendCalendar || {};
 
                 _resetAppointmentDialog();
 
-                // :: APPLY APPOINTMENT DATA AND SHOW TO MODAL DIALOG
+                // Apply appointment data and show modal dialog.
                 $dialog.find('.modal-header h3').text(EALang['edit_appointment_title']);
                 $dialog.find('#appointment-id').val(appointment['id']);
                 $dialog.find('#select-service').val(appointment['id_services']).trigger('change');
@@ -151,12 +148,10 @@ window.BackendCalendar = window.BackendCalendar || {};
                 // Set the start and end datetime of the appointment.
                 var startDatetime = Date.parseExact(appointment['start_datetime'],
                         'yyyy-MM-dd HH:mm:ss');
-                // $dialog.find('#start-datetime').val(GeneralFunctions.formatDate(startDatetime, GlobalVariables.dateFormat, true));
                 $dialog.find('#start-datetime').datetimepicker('setDate', startDatetime);
 
                 var endDatetime = Date.parseExact(appointment['end_datetime'],
                         'yyyy-MM-dd HH:mm:ss');
-                // $dialog.find('#end-datetime').val(GeneralFunctions.formatDate(endDatetime, GlobalVariables.dateFormat, true));
                 $dialog.find('#end-datetime').datetimepicker('setDate', endDatetime);
 
                 var customer = appointment['customer'];
@@ -180,7 +175,7 @@ window.BackendCalendar = window.BackendCalendar || {};
                 $dialog = $('#manage-unavailable');
                 _resetUnavailableDialog();
 
-                // :: APPLY UNAVAILABLE DATA TO DIALOG
+                // Apply unvailable data to dialog.
                 $dialog.find('.modal-header h3').text('Edit Unavailable Period');
                 $dialog.find('#unavailable-start').datetimepicker('setDate', unavailable.start_datetime);
                 $dialog.find('#unavailable-id').val(unavailable.id);
@@ -195,9 +190,8 @@ window.BackendCalendar = window.BackendCalendar || {};
         /**
          * Event: Popover Delete Button "Click"
          *
-         * Displays a prompt on whether the user wants the appoinmtent to be
-         * deleted. If he confirms the deletion then an ajax call is made to
-         * the server and deletes the appointment from the database.
+         * Displays a prompt on whether the user wants the appoinmtent to be deleted. If he confirms the
+         * deletion then an ajax call is made to the server and deletes the appointment from the database.
          */
         $(document).on('click', '.delete-popover', function() {
             $(this).parents().eq(2).remove(); // Hide the popover
@@ -218,14 +212,16 @@ window.BackendCalendar = window.BackendCalendar || {};
 
                         if (response.exceptions) {
                             response.exceptions = GeneralFunctions.parseExceptions(response.exceptions);
-                            GeneralFunctions.displayMessageBox(GeneralFunctions.EXCEPTIONS_TITLE, GeneralFunctions.EXCEPTIONS_MESSAGE);
+                            GeneralFunctions.displayMessageBox(GeneralFunctions.EXCEPTIONS_TITLE,
+                                    GeneralFunctions.EXCEPTIONS_MESSAGE);
                             $('#message_box').append(GeneralFunctions.exceptionsToHtml(response.exceptions));
                             return;
                         }
 
                         if (response.warnings) {
                             response.warnings = GeneralFunctions.parseExceptions(response.warnings);
-                            GeneralFunctions.displayMessageBox(GeneralFunctions.WARNINGS_TITLE, GeneralFunctions.WARNINGS_MESSAGE);
+                            GeneralFunctions.displayMessageBox(GeneralFunctions.WARNINGS_TITLE,
+                                    GeneralFunctions.WARNINGS_MESSAGE);
                             $('#message_box').append(GeneralFunctions.exceptionsToHtml(response.warnings));
                         }
 
@@ -240,16 +236,16 @@ window.BackendCalendar = window.BackendCalendar || {};
 
                 GeneralFunctions.displayMessageBox(EALang['delete_appointment_title'],
                         EALang['write_appointment_removal_reason'], messageButtons);
+
                 $('#message_box').append('<textarea id="delete-reason" rows="3"></textarea>');
                 $('#delete-reason').css('width', '100%');
             } else {
                 // Do not display confirmation promt.
-                var postUrl = GlobalVariables.baseUrl + '/index.php/backend_api/ajax_delete_unavailable';
-
-                var postData = {
-                    'csrfToken': GlobalVariables.csrfToken,
-                    'unavailable_id' : lastFocusedEventData.data.id
-                };
+                var postUrl = GlobalVariables.baseUrl + '/index.php/backend_api/ajax_delete_unavailable',
+                    postData = {
+                        csrfToken: GlobalVariables.csrfToken,
+                        unavailable_id : lastFocusedEventData.data.id
+                    };
 
                 $.post(postUrl, postData, function(response) {
                     $('#message_box').dialog('close');
@@ -285,33 +281,32 @@ window.BackendCalendar = window.BackendCalendar || {};
         /**
          * Event: Manage Appointments Dialog Save Button "Click"
          *
-         * Stores the appointment changes or inserts a new appointment depending the dialog
-         * mode.
+         * Stores the appointment changes or inserts a new appointment depending the dialog mode.
          */
         $('#manage-appointment #save-appointment').click(function() {
             // Before doing anything the appointment data need to be validated.
             if (!_validateAppointmentForm()) {
-                return; // validation failed
+                return;
             }
 
-            // :: PREPARE APPOINTMENT DATA FOR AJAX CALL
+            // Prepare appointment data for AJAX request.
             var $dialog = $('#manage-appointment');
 
-            // Id must exist on the object in order for the model to update
-            // the record and not to perform an insert operation.
+            // ID must exist on the object in order for the model to update the record and not to perform
+            // an insert operation.
 
             var startDatetime = $dialog.find('#start-datetime')
-                    .datepicker('getDate').toString('yyyy-MM-dd HH:mm:ss');
-            var endDatetime = $dialog.find('#end-datetime')
+                    .datepicker('getDate').toString('yyyy-MM-dd HH:mm:ss'),
+                endDatetime = $dialog.find('#end-datetime')
                     .datepicker('getDate').toString('yyyy-MM-dd HH:mm:ss');
 
             var appointment = {
-                'id_services': $dialog.find('#select-service').val(),
-                'id_users_provider': $dialog.find('#select-provider').val(),
-                'start_datetime': startDatetime,
-                'end_datetime': endDatetime,
-                'notes': $dialog.find('#appointment-notes').val(),
-                'is_unavailable': false
+                id_services: $dialog.find('#select-service').val(),
+                id_users_provider: $dialog.find('#select-provider').val(),
+                start_datetime: startDatetime,
+                end_datetime: endDatetime,
+                notes: $dialog.find('#appointment-notes').val(),
+                is_unavailable: false
             };
 
             if ($dialog.find('#appointment-id').val() !== '') {
@@ -320,14 +315,14 @@ window.BackendCalendar = window.BackendCalendar || {};
             }
 
             var customer = {
-                'first_name': $dialog.find('#first-name').val(),
-                'last_name': $dialog.find('#last-name').val(),
-                'email': $dialog.find('#email').val(),
-                'phone_number': $dialog.find('#phone-number').val(),
-                'address': $dialog.find('#address').val(),
-                'city': $dialog.find('#city').val(),
-                'zip_code': $dialog.find('#zip-code').val(),
-                'notes': $dialog.find('#customer-notes').val()
+                first_name: $dialog.find('#first-name').val(),
+                last_name: $dialog.find('#last-name').val(),
+                email: $dialog.find('#email').val(),
+                phone_number: $dialog.find('#phone-number').val(),
+                address: $dialog.find('#address').val(),
+                city: $dialog.find('#city').val(),
+                zip_code: $dialog.find('#zip-code').val(),
+                notes: $dialog.find('#customer-notes').val()
             };
 
             if ($dialog.find('#customer-id').val() !== '') {
@@ -336,7 +331,7 @@ window.BackendCalendar = window.BackendCalendar || {};
                 appointment['id_users_customer'] = customer['id'];
             }
 
-            // :: DEFINE SUCCESS EVENT CALLBACK
+            // Define success callback.
             var successCallback = function(response) {
                 if (!GeneralFunctions.handleAjaxExceptions(response)) {
                     $dialog.find('.modal-message').text(EALang['unexpected_issues_occurred']);
@@ -349,8 +344,7 @@ window.BackendCalendar = window.BackendCalendar || {};
                 $dialog.find('.modal-message').addClass('alert-success').removeClass('alert-danger hidden');
                 $dialog.find('.modal-body').scrollTop(0);
 
-                // Close the modal dialog and refresh the calendar appointments
-                // after one second.
+                // Close the modal dialog and refresh the calendar appointments after one second.
                 setTimeout(function() {
                     $dialog.find('.alert').addClass('hidden');
                     $dialog.modal('hide');
@@ -358,14 +352,14 @@ window.BackendCalendar = window.BackendCalendar || {};
                 }, 2000);
             };
 
-            // :: DEFINE AJAX ERROR EVENT CALLBACK
+            // Define error callback.
             var errorCallback = function() {
                 $dialog.find('.modal-message').text(EALang['server_communication_error']);
                 $dialog.find('.modal-message').addClass('alert-danger').removeClass('hidden');
                 $dialog.find('.modal-body').scrollTop(0);
             };
 
-            // :: CALL THE UPDATE APPOINTMENT METHOD
+            // Save appointment data.
             _saveAppointment(appointment, customer, successCallback, errorCallback);
         });
 
@@ -390,10 +384,10 @@ window.BackendCalendar = window.BackendCalendar || {};
 
             // Unavailable period records go to the appointments table.
             var unavailable = {
-                'start_datetime': start.toString('yyyy-MM-dd HH:mm'),
-                'end_datetime': end.toString('yyyy-MM-dd HH:mm'),
-                'notes': $dialog.find('#unavailable-notes').val(),
-                'id_users_provider': $('#select-filter-item').val() // curr provider
+                start_datetime: start.toString('yyyy-MM-dd HH:mm'),
+                end_datetime: end.toString('yyyy-MM-dd HH:mm'),
+                notes: $dialog.find('#unavailable-notes').val(),
+                id_users_provider: $('#select-filter-item').val() // curr provider
             };
 
             if ($dialog.find('#unavailable-id').val() !== '') {
@@ -404,7 +398,8 @@ window.BackendCalendar = window.BackendCalendar || {};
             var successCallback = function(response) {
                 if (response.exceptions) {
                     response.exceptions = GeneralFunctions.parseExceptions(response.exceptions);
-                    GeneralFunctions.displayMessageBox(GeneralFunctions.EXCEPTIONS_TITLE, GeneralFunctions.EXCEPTIONS_MESSAGE);
+                    GeneralFunctions.displayMessageBox(GeneralFunctions.EXCEPTIONS_TITLE,
+                            GeneralFunctions.EXCEPTIONS_MESSAGE);
                     $('#message_box').append(GeneralFunctions.exceptionsToHtml(response.exceptions));
 
                     $dialog.find('.modal-message')
@@ -417,7 +412,8 @@ window.BackendCalendar = window.BackendCalendar || {};
 
                 if (response.warnings) {
                     response.warnings = GeneralFunctions.parseExceptions(response.warnings);
-                    GeneralFunctions.displayMessageBox(GeneralFunctions.WARNINGS_TITLE, GeneralFunctions.WARNINGS_MESSAGE);
+                    GeneralFunctions.displayMessageBox(GeneralFunctions.WARNINGS_TITLE,
+                            GeneralFunctions.WARNINGS_MESSAGE);
                     $('#message_box').append(GeneralFunctions.exceptionsToHtml(response.warnings));
                 }
 
@@ -427,9 +423,7 @@ window.BackendCalendar = window.BackendCalendar || {};
                     .addClass('alert-success')
                     .removeClass('alert-danger hidden');
 
-
-                // Close the modal dialog and refresh the calendar appointments
-                // after one second.
+                // Close the modal dialog and refresh the calendar appointments after one second.
                 setTimeout(function() {
                     $dialog.find('.alert').addClass('hidden');
                     $dialog.modal('hide');
@@ -465,7 +459,7 @@ window.BackendCalendar = window.BackendCalendar || {};
          */
         $('#enable-sync').click(function() {
             if ($('#enable-sync').hasClass('enabled') === false) {
-                // :: ENABLE SYNCHRONIZATION FOR SELECTED PROVIDER
+                // Enable synchronization for selected provider.
                 var authUrl = GlobalVariables.baseUrl + '/index.php/google/oauth/'
                         + $('#select-filter-item').val();
 
@@ -475,10 +469,9 @@ window.BackendCalendar = window.BackendCalendar || {};
                         'width=800, height=600');
 
                 var authInterval = window.setInterval(function() {
-                    // When the browser redirects to the google user consent page the
-                    // "window.document" variable becomes "undefined" and when it comes
-                    // back to the redirect url it changes back. So check whether the
-                    // variable is undefined to avoid javascript errors.
+                    // When the browser redirects to the google user consent page the "window.document" variable
+                    // becomes "undefined" and when it comes back to the redirect URL it changes back. So check
+                    // whether the variable is undefined to avoid javascript errors.
                     if (windowHandle.document !== undefined) {
                         if (windowHandle.document.URL.indexOf(redirectUrl) !== -1) {
                             // The user has granted access to his data.
@@ -489,16 +482,19 @@ window.BackendCalendar = window.BackendCalendar || {};
                             $('#google-sync').prop('disabled', false);
                             $('#select-filter-item option:selected').attr('google-sync', 'true');
 
-                            // Display the calendar selection dialog. First we will get a list
-                            // of the available user's calendars and then we will display a selection
-                            // modal so the user can select the sync calendar.
-                            var postUrl = GlobalVariables.baseUrl + '/index.php/backend_api/ajax_get_google_calendars';
-                            var postData = {
-                                'csrfToken': GlobalVariables.csrfToken,
-                                'provider_id': $('#select-filter-item').val()
-                            };
+                            // Display the calendar selection dialog. First we will get a list of the available
+                            // user's calendars and then we will display a selection modal so the user can select
+                            // the sync calendar.
+                            var postUrl = GlobalVariables.baseUrl + '/index.php/backend_api/ajax_get_google_calendars',
+                                postData = {
+                                    csrfToken: GlobalVariables.csrfToken,
+                                    provider_id: $('#select-filter-item').val()
+                                };
+
                             $.post(postUrl, postData, function(response) {
-                                if (!GeneralFunctions.handleAjaxExceptions(response)) return;
+                                if (!GeneralFunctions.handleAjaxExceptions(response)) {
+                                    return;
+                                }
 
                                 $('#google-calendar').empty();
                                 $.each(response, function() {
@@ -507,16 +503,15 @@ window.BackendCalendar = window.BackendCalendar || {};
                                 });
 
                                 $('#select-google-calendar').modal('show');
-
                             }, 'json').fail(GeneralFunctions.ajaxFailureHandler);
                         }
                     }
                 }, 100);
 
             } else {
-                // :: DISABLE SYNCHRONIZATION FOR SELECTED PROVIDER
-                // Update page elements and make an ajax call to remove the google
-                // sync setting of the selected provider.
+                // Disable synchronization for selected provider.
+                // Update page elements and make an AJAX call to remove the google sync setting of the
+                // selected provider.
                 $.each(GlobalVariables.availableProviders, function(index, provider) {
                     if (provider['id'] == $('#select-filter-item').val()) {
                         provider['settings']['google_sync'] = '0';
@@ -538,19 +533,18 @@ window.BackendCalendar = window.BackendCalendar || {};
         /**
          * Event: Insert Appointment Button "Click"
          *
-         * When the user presses this button, the manage appointment dialog opens and lets
-         * the user to create a new appointment.
+         * When the user presses this button, the manage appointment dialog opens and lets the user to
+         * create a new appointment.
          */
         $('#insert-appointment').click(function() {
             _resetAppointmentDialog();
             var $dialog = $('#manage-appointment');
 
-            // Set the selected filter item and find the next appointment time
-            // as the default modal values.
+            // Set the selected filter item and find the next appointment time as the default modal values.
             if ($('#select-filter-item option:selected').attr('type') == 'provider') {
                 var $providerOption = $dialog.find('#select-provider option[value="'
                         + $('#select-filter-item').val() + '"]');
-                if ($providerOption.length == 0) { // Change the services until you find the correct.
+                if ($providerOption.length === 0) { // Change the services until you find the correct.
                     $.each($dialog.find('#select-service option'), function() {
                         $(this).prop('selected', true).parent().change();
                         if ($providerOption.length > 0)
@@ -571,17 +565,18 @@ window.BackendCalendar = window.BackendCalendar || {};
                 }
             });
 
-            var start = new Date();
-            var currentMin = parseInt(start.toString('mm'));
+            var start = new Date(),
+                currentMin = parseInt(start.toString('mm'));
 
-            if (currentMin > 0 && currentMin < 15)
+            if (currentMin > 0 && currentMin < 15) {
                 start.set({ 'minute': 15 });
-            else if (currentMin > 15 && currentMin < 30)
+            } else if (currentMin > 15 && currentMin < 30) {
                 start.set({ 'minute': 30 });
-            else if (currentMin > 30 && currentMin < 45)
+            } else if (currentMin > 30 && currentMin < 45) {
                 start.set({ 'minute': 45 });
-            else
+            } else {
                 start.addHours(1).set({ 'minute': 0 });
+            }
 
             $dialog.find('#start-datetime').val(GeneralFunctions.formatDate(start, GlobalVariables.dateFormat, true));
             $dialog.find('#end-datetime').val(GeneralFunctions.formatDate(start.addMinutes(serviceDuration),
@@ -595,25 +590,26 @@ window.BackendCalendar = window.BackendCalendar || {};
         /**
          * Event : Insert Unavailable Time Period Button "Click"
          *
-         * When the user clicks this button a popup dialog appears and the use can set
-         * a time period where he cannot accept any appointments.
+         * When the user clicks this button a popup dialog appears and the use can set a time period where
+         * he cannot accept any appointments.
          */
         $('#insert-unavailable').click(function() {
             _resetUnavailableDialog();
             var $dialog = $('#manage-unavailable');
 
             // Set the default datetime values.
-            var start = new Date();
-            var currentMin = parseInt(start.toString('mm'));
+            var start = new Date(),
+                currentMin = parseInt(start.toString('mm'));
 
-            if (currentMin > 0 && currentMin < 15)
+            if (currentMin > 0 && currentMin < 15) {
                 start.set({ 'minute': 15 });
-            else if (currentMin > 15 && currentMin < 30)
+            } else if (currentMin > 15 && currentMin < 30) {
                 start.set({ 'minute': 30 });
-            else if (currentMin > 30 && currentMin < 45)
+            } else if (currentMin > 30 && currentMin < 45) {
                 start.set({ 'minute': 45 });
-            else
+            } else {
                 start.addHours(1).set({ 'minute': 0 });
+            }
 
             $dialog.find('#unavailable-start').val(GeneralFunctions.formatDate(start, GlobalVariables.dateFormat, true));
             $dialog.find('#unavailable-end').val(GeneralFunctions.formatDate(start.addHours(1), GlobalVariables.dateFormat, true));
@@ -727,9 +723,8 @@ window.BackendCalendar = window.BackendCalendar || {};
         /**
          * Event: Selected Service "Change"
          *
-         * When the user clicks on a service, its available providers should
-         * become visible. Also we need to update the start and end time of the
-         * appointment.
+         * When the user clicks on a service, its available providers should become visible. Also we need to
+         * update the start and end time of the appointment.
          */
         $('#select-service').change(function() {
             var sid = $('#select-service').val();
@@ -747,8 +742,7 @@ window.BackendCalendar = window.BackendCalendar || {};
             // Update the providers select box.
             $.each(GlobalVariables.availableProviders, function(indexProvider, provider) {
                 $.each(provider.services, function(indexService, serviceId) {
-                    // If the current provider is able to provide the selected service,
-                    // add him to the listbox.
+                    // If the current provider is able to provide the selected service, add him to the listbox.
                     if (serviceId == sid) {
                         var optionHtml = '<option value="' + provider['id'] + '">'
                                 + provider['first_name']  + ' ' + provider['last_name']
@@ -771,14 +765,16 @@ window.BackendCalendar = window.BackendCalendar || {};
          * Event: Select Google Calendar "Click"
          */
         $('#select-calendar').click(function() {
-            var postUrl = GlobalVariables.baseUrl + '/index.php/backend_api/ajax_select_google_calendar';
-            var postData = {
-                'csrfToken': GlobalVariables.csrfToken,
-                'provider_id': $('#select-filter-item').val(),
-                'calendar_id': $('#google-calendar').val()
-            };
+            var postUrl = GlobalVariables.baseUrl + '/index.php/backend_api/ajax_select_google_calendar',
+                postData = {
+                    csrfToken: GlobalVariables.csrfToken,
+                    provider_id: $('#select-filter-item').val(),
+                    calendar_id: $('#google-calendar').val()
+                };
             $.post(postUrl, postData, function(response) {
-                if (!GeneralFunctions.handleAjaxExceptions(response)) return;
+                if (!GeneralFunctions.handleAjaxExceptions(response)) {
+                    return;
+                }
                 Backend.displayNotification(EALang['google_calendar_selected']);
                 $('#select-google-calendar').modal('hide');
             }, 'json').fail(GeneralFunctions.ajaxFailureHandler);
@@ -793,10 +789,12 @@ window.BackendCalendar = window.BackendCalendar || {};
     }
 
     /**
-     * This method calculates the proper calendar height, in order to be displayed
-     * correctly, even when the browser window is resizing.
+     * Get Calendar Component Height
      *
-     * @return {int} Returns the calendar element height in pixels.
+     * This method calculates the proper calendar height, in order to be displayed correctly, even when the
+     * browser window is resizing.
+     *
+     * @return {Number} Returns the calendar element height in pixels.
      */
     function _getCalendarHeight() {
         var result = window.innerHeight - $('#footer').height() - $('#header').height()
@@ -805,42 +803,45 @@ window.BackendCalendar = window.BackendCalendar || {};
     }
 
     /**
-     * This method reloads the registered appointments for the selected date period
-     * and filter type.
+     * Refresh Calendar Appointments
      *
-     * @param {object} $calendar The calendar jQuery object.
-     * @param {int} recordId The selected record id.
-     * @param {string} filterType The filter type, could be either FILTER_TYPE_PROVIDER or FILTER_TYPE_SERVICE.
-     * @param {date} startDate Visible start date of the calendar.
-     * @param {type} endDate Visible end date of the calendar.
+     * This method reloads the registered appointments for the selected date period and filter type.
+     *
+     * @param {Object} $calendar The calendar jQuery object.
+     * @param {Number} recordId The selected record id.
+     * @param {String} filterType The filter type, could be either FILTER_TYPE_PROVIDER or FILTER_TYPE_SERVICE.
+     * @param {Date} startDate Visible start date of the calendar.
+     * @param {Date} endDate Visible end date of the calendar.
      */
     function _refreshCalendarAppointments($calendar, recordId, filterType, startDate, endDate) {
         var postUrl = GlobalVariables.baseUrl + '/index.php/backend_api/ajax_get_calendar_appointments',
             postData = {
-            'csrfToken': GlobalVariables.csrfToken,
-            'record_id': recordId,
-            'start_date': startDate.toString('yyyy-MM-dd'),
-            'end_date': endDate.toString('yyyy-MM-dd'),
-            'filter_type': filterType
-        };
+                csrfToken: GlobalVariables.csrfToken,
+                record_id: recordId,
+                start_date: startDate.toString('yyyy-MM-dd'),
+                end_date: endDate.toString('yyyy-MM-dd'),
+                filter_type: filterType
+            };
 
         $.post(postUrl, postData, function(response) {
-            if (!GeneralFunctions.handleAjaxExceptions(response)) return;
+            if (!GeneralFunctions.handleAjaxExceptions(response)) {
+                return;
+            }
 
-            // :: ADD APPOINTMENTS TO CALENDAR
-            var calendarEvents = [];
-            var $calendar = $('#calendar');
+            // Add appointments to calendar.
+            var calendarEvents = [],
+                $calendar = $('#calendar');
 
             $.each(response.appointments, function(index, appointment) {
                 var event = {
-                    'id': appointment['id'],
-                    'title': appointment['service']['name'] + ' - '
+                    id: appointment['id'],
+                    title: appointment['service']['name'] + ' - '
                             + appointment['customer']['first_name'] + ' '
                             + appointment['customer']['last_name'],
-                    'start': appointment['start_datetime'],
-                    'end': appointment['end_datetime'],
-                    'allDay': false,
-                    'data': appointment // Store appointment data for later use.
+                    start: appointment['start_datetime'],
+                    end: appointment['end_datetime'],
+                    allDay: false,
+                    data: appointment // Store appointment data for later use.
                 };
 
                 calendarEvents.push(event);
@@ -866,70 +867,70 @@ window.BackendCalendar = window.BackendCalendar || {};
                                 // Add custom unavailable periods.
                                 $.each(response.unavailables, function(index, unavailable) {
                                     var unavailablePeriod = {
-                                        'title': EALang['unavailable'] + ' <br><small>' + ((unavailable.notes.length > 30)
+                                        title: EALang['unavailable'] + ' <br><small>' + ((unavailable.notes.length > 30)
                                                         ? unavailable.notes.substring(0, 30) + '...'
                                                         : unavailable.notes) + '</small>',
-                                        'start': Date.parse(unavailable.start_datetime),
-                                        'end': Date.parse(unavailable.end_datetime),
-                                        'allDay': false,
-                                        'color': '#879DB4',
-                                        'editable': true,
-                                        'className': 'fc-unavailable fc-custom',
-                                        'data': unavailable
+                                        start: Date.parse(unavailable.start_datetime),
+                                        end: Date.parse(unavailable.end_datetime),
+                                        allDay: false,
+                                        color: '#879DB4',
+                                        editable: true,
+                                        className: 'fc-unavailable fc-custom',
+                                        data: unavailable
                                     };
                                     $calendar.fullCalendar('renderEvent', unavailablePeriod, false);
                                 });
 
-                                // non working day
+                                // Non-working day
                                 if (workingPlan[selDayName] == null) {
                                     unavailablePeriod = {
-                                            'title': EALang['not_working'],
-                                            'start': GeneralFunctions.clone($calendar.fullCalendar('getView').start),
-                                            'end': GeneralFunctions.clone($calendar.fullCalendar('getView').end),
-                                            'allDay': false,
-                                            'color': '#BEBEBE',
-                                            'editable': false,
-                                            'className': 'fc-unavailable'
+                                            title: EALang['not_working'],
+                                            start: GeneralFunctions.clone($calendar.fullCalendar('getView').start),
+                                            end: GeneralFunctions.clone($calendar.fullCalendar('getView').end),
+                                            allDay: false,
+                                            color: '#BEBEBE',
+                                            editable: false,
+                                            className: 'fc-unavailable'
                                         };
                                         $calendar.fullCalendar('renderEvent', unavailablePeriod, true);
-                                    return; // go to next loop
+                                    return; // Go to next loop
                                 }
 
                                 // Add unavailable period before work starts.
-                                var calendarDateStart = $calendar.fullCalendar('getView').start;
-                                var workDateStart = Date.parseExact(
+                                var calendarDateStart = $calendar.fullCalendar('getView').start,
+                                    workDateStart = Date.parseExact(
                                         calendarDateStart.toString('dd/MM/yyyy') + ' '
                                         + workingPlan[selDayName].start,
                                         'dd/MM/yyyy HH:mm');
 
                                 if (calendarDateStart < workDateStart) {
                                     unavailablePeriod = {
-                                        'title': EALang['not_working'],
-                                        'start': calendarDateStart,
-                                        'end': workDateStart,
-                                        'allDay': false,
-                                        'color': '#BEBEBE',
-                                        'editable': false,
-                                        'className': 'fc-unavailable'
+                                        title: EALang['not_working'],
+                                        start: calendarDateStart,
+                                        end: workDateStart,
+                                        allDay: false,
+                                        color: '#BEBEBE',
+                                        editable: false,
+                                        className: 'fc-unavailable'
                                     };
                                     $calendar.fullCalendar('renderEvent', unavailablePeriod, false);
                                 }
 
                                 // Add unavailable period after work ends.
-                                var calendarDateEnd = $calendar.fullCalendar('getView').end;
-                                var workDateEnd = Date.parseExact(
+                                var calendarDateEnd = $calendar.fullCalendar('getView').end,
+                                    workDateEnd = Date.parseExact(
                                         calendarDateStart.toString('dd/MM/yyyy') + ' '
                                         + workingPlan[selDayName].end,
                                         'dd/MM/yyyy HH:mm'); // Use calendarDateStart ***
                                 if (calendarDateEnd > workDateEnd) {
                                     var unavailablePeriod = {
-                                        'title': EALang['not_working'],
-                                        'start': workDateEnd,
-                                        'end': calendarDateEnd,
-                                        'allDay': false,
-                                        'color': '#BEBEBE',
-                                        'editable': false,
-                                        'className': 'fc-unavailable'
+                                        title: EALang['not_working'],
+                                        start: workDateEnd,
+                                        end: calendarDateEnd,
+                                        allDay: false,
+                                        color: '#BEBEBE',
+                                        editable: false,
+                                        className: 'fc-unavailable'
                                     };
                                     $calendar.fullCalendar('renderEvent', unavailablePeriod, false);
                                 }
@@ -942,13 +943,13 @@ window.BackendCalendar = window.BackendCalendar || {};
                                     breakEnd = Date.parseExact(calendarDateStart.toString('dd/MM/yyyy')
                                             + ' ' + currBreak.end, 'dd/MM/yyyy HH:mm');
                                     var unavailablePeriod = {
-                                        'title': EALang['break'],
-                                        'start': breakStart,
-                                        'end': breakEnd,
-                                        'allDay': false,
-                                        'color': '#BEBEBE',
-                                        'editable': false,
-                                        'className': 'fc-unavailable fc-break'
+                                        title: EALang['break'],
+                                        start: breakStart,
+                                        end: breakEnd,
+                                        allDay: false,
+                                        color: '#BEBEBE',
+                                        editable: false,
+                                        className: 'fc-unavailable fc-break'
                                     };
                                     $calendar.fullCalendar('renderEvent', unavailablePeriod, false);
                                 });
@@ -956,28 +957,25 @@ window.BackendCalendar = window.BackendCalendar || {};
                                 break;
 
                             case 'agendaWeek':
-                                var currDateStart = GeneralFunctions.clone($calendar.fullCalendar('getView').start);
-                                var currDateEnd = GeneralFunctions.clone(currDateStart).addDays(1);
+                                var currDateStart = GeneralFunctions.clone($calendar.fullCalendar('getView').start),
+                                    currDateEnd = GeneralFunctions.clone(currDateStart).addDays(1);
 
-                                // Add custom unavailable periods (they are always displayed
-                                // on the calendar, even if the provider won't work on that day).
+                                // Add custom unavailable periods (they are always displayed on the calendar, even if
+                                // the provider won't work on that day).
                                 $.each(response.unavailables, function(index, unavailable) {
-                                   //if (currDateStart.toString('dd/MM/yyyy')
-                                   //        === Date.parse(unavailable.start_datetime).toString('dd/MM/yyyy')) {
-                                        unavailablePeriod = {
-                                            'title': EALang['unavailable'] + ' <br><small>' + ((unavailable.notes.length > 30)
-                                                    ? unavailable.notes.substring(0, 30) + '...'
-                                                    : unavailable.notes) + '</small>',
-                                            'start': Date.parse(unavailable.start_datetime),
-                                            'end': Date.parse(unavailable.end_datetime),
-                                            'allDay': false,
-                                            'color': '#879DB4',
-                                            'editable': true,
-                                            'className': 'fc-unavailable fc-custom',
-                                            'data': unavailable
-                                        };
-                                        $calendar.fullCalendar('renderEvent', unavailablePeriod, false);
-                                   //}
+                                    unavailablePeriod = {
+                                        title: EALang['unavailable'] + ' <br><small>' + ((unavailable.notes.length > 30)
+                                                ? unavailable.notes.substring(0, 30) + '...'
+                                                : unavailable.notes) + '</small>',
+                                        start: Date.parse(unavailable.start_datetime),
+                                        end: Date.parse(unavailable.end_datetime),
+                                        allDay: false,
+                                        color: '#879DB4',
+                                        editable: true,
+                                        className: 'fc-unavailable fc-custom',
+                                        data: unavailable
+                                    };
+                                    $calendar.fullCalendar('renderEvent', unavailablePeriod, false);
                                 });
 
                                 $.each(workingPlan, function(index, workingDay) {
@@ -985,13 +983,13 @@ window.BackendCalendar = window.BackendCalendar || {};
                                     if (workingDay == null) {
                                         // Add a full day unavailable event.
                                         unavailablePeriod = {
-                                            'title': EALang['not_working'],
-                                            'start': GeneralFunctions.clone(currDateStart),
-                                            'end': GeneralFunctions.clone(currDateEnd),
-                                            'allDay': false,
-                                            'color': '#BEBEBE',
-                                            'editable': false,
-                                            'className': 'fc-unavailable'
+                                            title: EALang['not_working'],
+                                            start: GeneralFunctions.clone(currDateStart),
+                                            end: GeneralFunctions.clone(currDateEnd),
+                                            allDay: false,
+                                            color: '#BEBEBE',
+                                            editable: false,
+                                            className: 'fc-unavailable'
                                         };
                                         $calendar.fullCalendar('renderEvent', unavailablePeriod, true);
                                         currDateStart.addDays(1);
@@ -999,20 +997,21 @@ window.BackendCalendar = window.BackendCalendar || {};
                                         return; // Go to the next loop.
                                     }
 
-                                    var start, end;
+                                    var start,
+                                        end;
 
                                     // Add unavailable period before work starts.
                                     start = Date.parseExact(currDateStart.toString('dd/MM/yyyy')
                                             + ' ' + workingDay.start, 'dd/MM/yyyy HH:mm');
                                     if (currDateStart < start) {
                                         unavailablePeriod = {
-                                            'title': EALang['not_working'],
-                                            'start': GeneralFunctions.clone(currDateStart),
-                                            'end': GeneralFunctions.clone(start),
-                                            'allDay': false,
-                                            'color': '#BEBEBE',
-                                            'editable': false,
-                                            'className': 'fc-unavailable'
+                                            title: EALang['not_working'],
+                                            start: GeneralFunctions.clone(currDateStart),
+                                            end: GeneralFunctions.clone(start),
+                                            allDay: false,
+                                            color: '#BEBEBE',
+                                            editable: false,
+                                            className: 'fc-unavailable'
                                         };
                                         $calendar.fullCalendar('renderEvent', unavailablePeriod, true);
                                     }
@@ -1022,13 +1021,13 @@ window.BackendCalendar = window.BackendCalendar || {};
                                             + ' ' + workingDay.end, 'dd/MM/yyyy HH:mm');
                                     if (currDateEnd > end) {
                                         unavailablePeriod = {
-                                            'title': EALang['not_working'],
-                                            'start': GeneralFunctions.clone(end),
-                                            'end': GeneralFunctions.clone(currDateEnd),
-                                            'allDay': false,
-                                            'color': '#BEBEBE',
-                                            'editable': false,
-                                            'className': 'fc-unavailable fc-brake'
+                                            title: EALang['not_working'],
+                                            start: GeneralFunctions.clone(end),
+                                            end: GeneralFunctions.clone(currDateEnd),
+                                            allDay: false,
+                                            color: '#BEBEBE',
+                                            editable: false,
+                                            className: 'fc-unavailable fc-brake'
                                         };
                                         $calendar.fullCalendar('renderEvent', unavailablePeriod, false);
                                     }
@@ -1041,13 +1040,13 @@ window.BackendCalendar = window.BackendCalendar || {};
                                         breakEnd = Date.parseExact(currDateStart.toString('dd/MM/yyyy')
                                                 + ' ' + currBreak.end, 'dd/MM/yyyy HH:mm');
                                         var unavailablePeriod = {
-                                            'title': EALang['break'],
-                                            'start': breakStart,
-                                            'end': breakEnd,
-                                            'allDay': false,
-                                            'color': '#BEBEBE',
-                                            'editable': false,
-                                            'className': 'fc-unavailable fc-break'
+                                            title: EALang['break'],
+                                            start: breakStart,
+                                            end: breakEnd,
+                                            allDay: false,
+                                            color: '#BEBEBE',
+                                            editable: false,
+                                            className: 'fc-unavailable fc-break'
                                         };
                                         $calendar.fullCalendar('renderEvent', unavailablePeriod, false);
                                     });
@@ -1064,23 +1063,21 @@ window.BackendCalendar = window.BackendCalendar || {};
     }
 
     /**
-     * This method stores the changes of an already registered appointment
-     * into the database, via an ajax call.
+     * Save Appointment
      *
-     * @param {object} appointment Contain the new appointment data. The
-     * id of the appointment MUST be already included. The rest values must
-     * follow the database structure.
-     * @param {object} customer (OPTIONAL) contains the customer data.
-     * @param {function} successCallback (OPTIONAL) If defined, this function is
-     * going to be executed on post success.
-     * @param {function} errorCallback (OPTIONAL) If defined, this function is
-     * going to be executed on post failure.
+     * This method stores the changes of an already registered appointment into the database, via an ajax call.
+     *
+     * @param {Object} appointment Contain the new appointment data. The ID of the appointment MUST be
+     * already included. The rest values must follow the database structure.
+     * @param {Object} customer Optional, contains the customer data.
+     * @param {Function} successCallback Optional, if defined, this function is going to be executed on post success.
+     * @param {Function} errorCallback Optional, if defined, this function is going to be executed on post failure.
      */
     function _saveAppointment(appointment, customer, successCallback, errorCallback) {
         var postUrl = GlobalVariables.baseUrl + '/index.php/backend_api/ajax_save_appointment',
             postData = {
-                'csrfToken': GlobalVariables.csrfToken,
-                'appointment_data': JSON.stringify(appointment)
+                csrfToken: GlobalVariables.csrfToken,
+                appointment_data: JSON.stringify(appointment)
             };
 
         if (customer !== undefined) {
@@ -1108,38 +1105,35 @@ window.BackendCalendar = window.BackendCalendar || {};
     /**
      * Save unavailable period to database.
      *
-     * @param {object} unavailable Containts the unavailable period data.
-     * @param {function} successCallback The ajax success callback function.
-     * @param {function} errorCallback The ajax failure callback function.
+     * @param {Object} unavailable Containts the unavailable period data.
+     * @param {Function} successCallback The ajax success callback function.
+     * @param {Function} errorCallback The ajax failure callback function.
      */
     function _saveUnavailable(unavailable, successCallback, errorCallback) {
-        var postUrl = GlobalVariables.baseUrl + '/index.php/backend_api/ajax_save_unavailable';
-
-        var postData = {
-            'csrfToken': GlobalVariables.csrfToken,
-            'unavailable': JSON.stringify(unavailable)
-        };
+        var postUrl = GlobalVariables.baseUrl + '/index.php/backend_api/ajax_save_unavailable',
+            postData = {
+                csrfToken: GlobalVariables.csrfToken,
+                unavailable: JSON.stringify(unavailable)
+            };
 
         $.ajax({
-            'type': 'POST',
-            'url': postUrl,
-            'data': postData,
-            'success': successCallback,
-            'error': errorCallback
+            type: 'POST',
+            url: postUrl,
+            data: postData,
+            success: successCallback,
+            error: errorCallback
         });
     }
 
     /**
      * Calendar Event "Resize" Callback
      *
-     * The user can change the duration of an event by resizing an appointment
-     * object on the calendar. This change needs to be stored to the database
-     * too and this is done via an ajax call.
+     * The user can change the duration of an event by resizing an appointment object on the calendar. This
+     * change needs to be stored to the database too and this is done via an ajax call.
      *
      * @see updateAppointmentData()
      */
-    function _calendarEventResize(event, dayDelta, minuteDelta, revertFunc,
-            jsEvent, ui, view) {
+    function _calendarEventResize(event, dayDelta, minuteDelta, revertFunc, jsEvent, ui, view) {
         if (GlobalVariables.user.privileges.appointments.edit == false) {
             revertFunc();
             Backend.displayNotification(EALang['no_privileges_edit_appointments']);
@@ -1151,11 +1145,10 @@ window.BackendCalendar = window.BackendCalendar || {};
         }
 
         if (event.data.is_unavailable == false) {
-            // :: PREPARE THE APPOINTMENT DATA
+            // Prepare appointment data.
             var appointment = GeneralFunctions.clone(event.data);
 
-            // Must delete the following because only appointment data should be
-            // provided to the ajax call.
+            // Must delete the following because only appointment data should be provided to the ajax call.
             delete appointment['customer'];
             delete appointment['provider'];
             delete appointment['service'];
@@ -1165,7 +1158,7 @@ window.BackendCalendar = window.BackendCalendar || {};
                     .add({ minutes: minuteDelta })
                     .toString('yyyy-MM-dd HH:mm:ss');
 
-            // :: DEFINE THE SUCCESS CALLBACK FUNCTION
+            // Success callback
             var successCallback = function(response) {
                 if (response.exceptions) {
                     response.exceptions = GeneralFunctions.parseExceptions(response.exceptions);
@@ -1209,18 +1202,18 @@ window.BackendCalendar = window.BackendCalendar || {};
                 $('#footer').css('position', 'static'); // Footer position fix.
             };
 
-            // :: UPDATE APPOINTMENT DATA VIA AJAX CALL
+            // Update appointment data.
             _saveAppointment(appointment, undefined, successCallback, undefined);
         } else {
-            // :: UPDATE UNAVAILABLE TIME PERIOD
+            // Update unvailable time period.
             var unavailable = {
-                'id': event.data.id,
-                'start_datetime': event.start.toString('yyyy-MM-dd HH:mm:ss'),
-                'end_datetime': event.end.toString('yyyy-MM-dd HH:mm:ss'),
-                'id_users_provider': event.data.id_users_provider
+                id: event.data.id,
+                start_datetime: event.start.toString('yyyy-MM-dd HH:mm:ss'),
+                end_datetime: event.end.toString('yyyy-MM-dd HH:mm:ss'),
+                id_users_provider: event.data.id_users_provider
             };
 
-            // :: DEFINE THE SUCCESS CALLBACK FUNCTION
+            // Define success callback function.
             var successCallback = function(response) {
                 if (response.exceptions) {
                     response.exceptions = GeneralFunctions.parseExceptions(response.exceptions);
@@ -1271,9 +1264,8 @@ window.BackendCalendar = window.BackendCalendar || {};
     /**
      * Calendar Window "Resize" Callback
      *
-     * The calendar element needs to be resized too in order to fit into the
-     * window. Nevertheless, if the window becomes very small the the calendar
-     * won't shrink anymore.
+     * The calendar element needs to be resized too in order to fit into the window. Nevertheless, if the window
+     * becomes very small the the calendar won't shrink anymore.
      *
      * @see _getCalendarHeight()
      */
@@ -1284,8 +1276,8 @@ window.BackendCalendar = window.BackendCalendar || {};
     /**
      * Calendar Day "Click" Callback
      *
-     * When the user clicks on a day square on the calendar, then he will
-     * automatically be transfered to that day view calendar.
+     * When the user clicks on a day square on the calendar, then he will automatically be transfered to that
+     * day view calendar.
      */
     function _calendarDayClick(date, allDay, jsEvent, view) {
         if (allDay) {
@@ -1297,13 +1289,15 @@ window.BackendCalendar = window.BackendCalendar || {};
     /**
      * Calendar Event "Click" Callback
      *
-     * When the user clicks on an appointment object on the calendar, then
-     * a data preview popover is display above the calendar item.
+     * When the user clicks on an appointment object on the calendar, then a data preview popover is display
+     * above the calendar item.
      */
     function _calendarEventClick(event, jsEvent, view) {
         $('.popover').remove(); // Close all open popovers.
 
-        var html, displayEdit, displayDelete;
+        var html,
+            displayEdit,
+            displayDelete;
 
         // Depending where the user clicked the event (title or empty space) we
         // need to use different selectors to reach the parent element.
@@ -1377,12 +1371,12 @@ window.BackendCalendar = window.BackendCalendar || {};
         }
 
         $(jsEvent.target).popover({
-            'placement': 'top',
-            'title': event.title,
-            'content': html,
-            'html': true,
-            'container': 'body',
-            'trigger': 'manual'
+            placement: 'top',
+            title: event.title,
+            content: html,
+            html: true,
+            container: 'body',
+            trigger: 'manual'
         });
 
         lastFocusedEventData = event;
@@ -1397,12 +1391,10 @@ window.BackendCalendar = window.BackendCalendar || {};
     /**
      * Calendar Event "Drop" Callback
      *
-     * This event handler is triggered whenever the user drags and drops
-     * an event into a different position on the calendar. We need to update
-     * the database with this change. This is done via an ajax call.
+     * This event handler is triggered whenever the user drags and drops an event into a different position
+     * on the calendar. We need to update the database with this change. This is done via an ajax call.
      */
-    function _calendarEventDrop(event, dayDelta, minuteDelta, allDay,
-            revertFunc, jsEvent, ui, view) {
+    function _calendarEventDrop(event, dayDelta, minuteDelta, allDay, revertFunc, jsEvent, ui, view) {
         if (GlobalVariables.user.privileges.appointments.edit == false) {
             revertFunc();
             Backend.displayNotification(EALang['no_privileges_edit_appointments']);
@@ -1414,12 +1406,10 @@ window.BackendCalendar = window.BackendCalendar || {};
         }
 
         if (event.data.is_unavailable == false) {
-
-            // :: PREPARE THE APPOINTMENT DATA
+            // Prepare appointment data.
             var appointment = GeneralFunctions.clone(event.data);
 
-            // Must delete the following because only appointment data should be
-            // provided to the ajax call.
+            // Must delete the following because only appointment data should be provided to the ajax call.
             delete appointment['customer'];
             delete appointment['provider'];
             delete appointment['service'];
@@ -1437,7 +1427,7 @@ window.BackendCalendar = window.BackendCalendar || {};
             event.data['start_datetime'] = appointment['start_datetime'];
             event.data['end_datetime'] = appointment['end_datetime'];
 
-            // :: DEFINE THE SUCCESS CALLBACK FUNCTION
+            // Define success callback function.
             var successCallback = function(response) {
                 if (response.exceptions) {
                     response.exceptions = GeneralFunctions.parseExceptions(response.exceptions);
@@ -1468,12 +1458,11 @@ window.BackendCalendar = window.BackendCalendar || {};
                     event.data['start_datetime'] = appointment['start_datetime'];
                     event.data['end_datetime'] = appointment['end_datetime'];
 
-                    var postUrl  = GlobalVariables.baseUrl + '/index.php/backend_api/ajax_save_appointment';
-
-                    var postData = {
-                        'csrfToken': GlobalVariables.csrfToken,
-                        'appointment_data': JSON.stringify(appointment)
-                    };
+                    var postUrl  = GlobalVariables.baseUrl + '/index.php/backend_api/ajax_save_appointment',
+                        postData = {
+                            csrfToken: GlobalVariables.csrfToken,
+                            appointment_data: JSON.stringify(appointment)
+                        };
 
                     $.post(postUrl, postData, function(response) {
                         $('#notification').hide('blind');
@@ -1491,15 +1480,15 @@ window.BackendCalendar = window.BackendCalendar || {};
                 $('#footer').css('position', 'static'); // Footer position fix.
             };
 
-            // :: UPDATE APPOINTMENT DATA VIA AJAX CALL
+            // Update appointment data.
             _saveAppointment(appointment, undefined, successCallback, undefined);
         } else {
-            // :: UPDATE UNAVAILABLE TIME PERIOD
+            // Update unavailable time period.
             var unavailable = {
-                'id': event.data.id,
-                'start_datetime': event.start.toString('yyyy-MM-dd HH:mm:ss'),
-                'end_datetime': event.end.toString('yyyy-MM-dd HH:mm:ss'),
-                'id_users_provider': event.data.id_users_provider
+                id: event.data.id,
+                start_datetime: event.start.toString('yyyy-MM-dd HH:mm:ss'),
+                end_datetime: event.end.toString('yyyy-MM-dd HH:mm:ss'),
+                id_users_provider: event.data.id_users_provider
             }
 
             var successCallback = function(response) {
@@ -1530,12 +1519,11 @@ window.BackendCalendar = window.BackendCalendar || {};
                     event.data['start_datetime'] = unavailable['start_datetime'];
                     event.data['end_datetime'] = unavailable['end_datetime'];
 
-                    var postUrl  = GlobalVariables.baseUrl + '/index.php/backend_api/ajax_save_unavailable';
-
-                    var postData = {
-                        'csrfToken': GlobalVariables.csrfToken,
-                        'unavailable': JSON.stringify(unavailable)
-                    };
+                    var postUrl  = GlobalVariables.baseUrl + '/index.php/backend_api/ajax_save_unavailable',
+                        postData = {
+                            csrfToken: GlobalVariables.csrfToken,
+                            unavailable: JSON.stringify(unavailable)
+                        };
 
                     $.post(postUrl, postData, function(response) {
                         $('#notification').hide('blind');
@@ -1545,8 +1533,8 @@ window.BackendCalendar = window.BackendCalendar || {};
 
                 Backend.displayNotification(EALang['unavailable_updated'], [
                     {
-                        'label': 'Undo',
-                        'function': undoFunction
+                        label: 'Undo',
+                        function: undoFunction
                     }
                 ]);
 
@@ -1560,10 +1548,10 @@ window.BackendCalendar = window.BackendCalendar || {};
     /**
      * Calendar "View Display" Callback
      *
-     * Whenever the calendar changes or refreshes its view certain actions
-     * need to be made, in order to display proper information to the user.
+     * Whenever the calendar changes or refreshes its view certain actions need to be made, in order to
+     * display proper information to the user.
      */
-    function _calendarViewDisplay(view) {
+    function _calendarViewDisplay() {
         if ($('#select-filter-item').val() === null) {
              return;
         }
@@ -1574,6 +1562,7 @@ window.BackendCalendar = window.BackendCalendar || {};
                 $('#select-filter-item option:selected').attr('type'),
                 $('#calendar').fullCalendar('getView').visStart,
                 $('#calendar').fullCalendar('getView').visEnd);
+
         $(window).trigger('resize'); // Places the footer on the bottom.
 
         // Remove all open popovers.
@@ -1588,18 +1577,20 @@ window.BackendCalendar = window.BackendCalendar || {};
     }
 
     /**
+     * Disable Provider Sync
+     *
      * This method disables the google synchronization for a specific provider.
      *
-     * @param {int} providerId The selected provider record id.
+     * @param {Number} providerId The selected provider record ID.
      */
     function _disableProviderSync(providerId) {
         // Make an ajax call to the server in order to disable the setting
         // from the database.
-        var postUrl = GlobalVariables.baseUrl + '/index.php/backend_api/ajax_disable_provider_sync';
-        var postData = {
-            'csrfToken': GlobalVariables.csrfToken,
-            'provider_id': providerId
-        };
+        var postUrl = GlobalVariables.baseUrl + '/index.php/backend_api/ajax_disable_provider_sync',
+            postData = {
+                csrfToken: GlobalVariables.csrfToken,
+                provider_id: providerId
+            };
 
         $.post(postUrl, postData, function(response) {
             if (response.exceptions) {
@@ -1612,18 +1603,19 @@ window.BackendCalendar = window.BackendCalendar || {};
     }
 
     /**
-     * This method resets the manage appointment dialog modal to its initial
-     * state. After that you can make any modification might be necessary in
-     * order to bring the dialog to the desired state.
+     * Reset Apppointment Dialog
+     *
+     * This method resets the manage appointment dialog modal to its initial state. After that you can make
+     * any modification might be necessary in order to bring the dialog to the desired state.
      */
     function _resetAppointmentDialog() {
         var $dialog = $('#manage-appointment');
 
-        // :: EMPTY FORM FIELDS
+        // Empty form fields.
         $dialog.find('input, textarea').val('');
         $dialog.find('.modal-message').fadeOut();
 
-        // :: PREPARE SERVICE AND PROVIDER LISTBOXES
+        // Prepare service and provider select boxes.
         $dialog.find('#select-service').val(
                 $dialog.find('#select-service').eq(0).attr('value'));
 
@@ -1647,14 +1639,13 @@ window.BackendCalendar = window.BackendCalendar || {};
             }
         });
 
-        // :: CLOSE EXISTING CUSTOMERS FILTER FRAME
+        // Close existing customers-filter frame.
         $('#existing-customers-list').slideUp('slow');
         $('#filter-existing-customers').fadeOut('slow');
         $('#select-customer').text(EALang['select']);
 
-        // :: SETUP START AND END DATETIME PICKERS
-        // Get the selected service duration. It will be needed in order to calculate
-        // the appointment end datetime.
+        // Setup start and datetimepickers.
+        // Get the selected service duration. It will be needed in order to calculate the appointment end datetime.
         var serviceDuration = 0;
         $.each(GlobalVariables.availableServices, function(index, service) {
             if (service['id'] == $dialog.find('#select-service').val()) {
@@ -1711,7 +1702,7 @@ window.BackendCalendar = window.BackendCalendar || {};
         $dialog.find('#start-datetime').datepicker('setDate', startDatetime);
 
         $dialog.find('#end-datetime').datetimepicker({
-            'dateFormat': dateFormat,
+            dateFormat: dateFormat,
 
             // Translation
             dayNames: [EALang['sunday'], EALang['monday'], EALang['tuesday'], EALang['wednesday'],
@@ -1744,7 +1735,7 @@ window.BackendCalendar = window.BackendCalendar || {};
      * Validate the manage appointment dialog data. Validation checks need to
      * run every time the data are going to be saved.
      *
-     * @returns {bool} Returns the validation result.
+     * @returns {Boolean} Returns the validation result.
      */
     function _validateAppointmentForm() {
         var $dialog = $('#manage-appointment');
@@ -1754,27 +1745,29 @@ window.BackendCalendar = window.BackendCalendar || {};
         $dialog.find('.modal-message').addClass('hidden');
 
         try {
-            // :: CHECK REQUIRED FIELDS
+            // Check required fields.
             var missingRequiredField = false;
+
             $dialog.find('.required').each(function() {
                 if ($(this).val() == '' || $(this).val() == null) {
                     $(this).parents('.form-group').addClass('has-error');
                     missingRequiredField = true;
                 }
             });
+
             if (missingRequiredField) {
                 throw EALang['fields_are_required'];
             }
 
-            // :: CHECK EMAIL ADDRESS
+            // Check email address.
             if (!GeneralFunctions.validateEmail($dialog.find('#email').val())) {
                 $dialog.find('#email').parents('.form-group').eq(1).addClass('has-error');
                 throw EALang['invalid_email'];
             }
 
-            // :: CHECK APPOINTMENT START AND END TIME
-            var start = $('#start-datetime').datepicker('getDate');
-            var end = $('#end-datetime').datepicker('getDate');
+            // Check appointment start and end time.
+            var start = $('#start-datetime').datepicker('getDate'),
+                end = $('#end-datetime').datepicker('getDate');
             if (start > end) {
                 $dialog.find('#start-datetime').parents('.form-group').addClass('has-error');
                 $dialog.find('#end-datetime').parents('.form-group').addClass('has-error');
@@ -1789,8 +1782,10 @@ window.BackendCalendar = window.BackendCalendar || {};
     }
 
     /**
-     * Reset the "#manage-unavailable" dialog. Use this method to bring the dialog
-     * to the initial state before it becomes visible to the user.
+     * Reset unavailable dialog form.
+     *
+     * Reset the "#manage-unavailable" dialog. Use this method to bring the dialog to the initial state
+     * before it becomes visible to the user.
      */
     function _resetUnavailableDialog() {
         var $dialog = $('#manage-unavailable');
@@ -1878,11 +1873,12 @@ window.BackendCalendar = window.BackendCalendar || {};
     }
 
     /**
-     * On some calendar events the titles contain html markup that is not
-     * displayed properly due to the fullcalendar plugin. This plugin sets
-     * the .fc-event-title value by using the $.text() method and not the
-     * $.html() method. So in order for the title to displya the html properly
-     * we convert all the .fc-event-titles where needed into html.
+     * Convert titles to HTML
+     *
+     * On some calendar events the titles contain html markup that is not displayed properly due to the
+     * fullcalendar plugin. This plugin sets the .fc-event-title value by using the $.text() method and
+     * not the $.html() method. So in order for the title to displya the html properly we convert all the
+     * .fc-event-titles where needed into html.
      */
     function _convertTitlesToHtml() {
         // Convert the titles to html code.
@@ -1895,15 +1891,16 @@ window.BackendCalendar = window.BackendCalendar || {};
     }
 
     /**
-     * This function makes the necessary initialization for the default backend
-     * calendar page. If this namespace is used in another page then this function
-     * might not be needed.
+     * Initialize Module
      *
-     * @param {bool} defaultEventHandlers (OPTIONAL = TRUE) Determines whether the
-     * default event handlers will be set for the current page.
+     * This function makes the necessary initialization for the default backend calendar page. If this module
+     * is used in another page then this function might not be needed.
+     *
+     * @param {Boolean} defaultEventHandlers Optional (true), Determines whether the default event handlers will be
+     * set for the current page.
      */
     exports.initialize = function(defaultEventHandlers) {
-        if (defaultEventHandlers === undefined) defaultEventHandlers = true;
+        defaultEventHandlers = defaultEventHandlers || true;
 
         // Dynamic Date Formats
         var columnFormat = {};
@@ -1932,69 +1929,68 @@ window.BackendCalendar = window.BackendCalendar || {};
 
         // Initialize page calendar
         $('#calendar').fullCalendar({
-            'defaultView': 'agendaWeek',
-            'height': _getCalendarHeight(),
-            'editable': true,
-            'firstDay': 1, // Monday
-            'slotMinutes': 30,
-            'snapMinutes': 15,
-            'axisFormat': 'HH:mm',
-            'timeFormat': 'HH:mm{ - HH:mm}',
-            'allDayText': EALang['all_day'],
-            'columnFormat': columnFormat,
-            'titleFormat': {
-                'month': 'MMMM yyyy',
-                'week': "MMMM d[ yyyy]{ '&#8212;'[ MMM] d, yyyy}",
-                'day': 'dddd, MMMM d, yyyy'
+            defaultView: 'agendaWeek',
+            height: _getCalendarHeight(),
+            editable: true,
+            firstDay: 1, // Monday
+            slotMinutes: 30,
+            snapMinutes: 15,
+            axisFormat: 'HH:mm',
+            timeFormat: 'HH:mm{ - HH:mm}',
+            allDayText: EALang['all_day'],
+            columnFormat: columnFormat,
+            titleFormat: {
+                month: 'MMMM yyyy',
+                week: "MMMM d[ yyyy]{ '&#8212;'[ MMM] d, yyyy}",
+                day: 'dddd, MMMM d, yyyy'
             },
-            'header': {
-                'left': 'prev,next today',
-                'center': 'title',
-                'right': 'agendaDay,agendaWeek,month'
+            header: {
+                left: 'prev,next today',
+                center: 'title',
+                right: 'agendaDay,agendaWeek,month'
             },
 
             // Translations
-            'monthNames': [EALang['january'], EALang['february'], EALang['march'], EALang['april'],
+            monthNames: [EALang['january'], EALang['february'], EALang['march'], EALang['april'],
                            EALang['may'], EALang['june'], EALang['july'], EALang['august'],
                            EALang['september'],EALang['october'], EALang['november'],
                            EALang['december']],
-            'monthNamesShort': [EALang['january'].substr(0,3), EALang['february'].substr(0,3),
+            monthNamesShort: [EALang['january'].substr(0,3), EALang['february'].substr(0,3),
                     EALang['march'].substr(0,3), EALang['april'].substr(0,3),
                     EALang['may'].substr(0,3), EALang['june'].substr(0,3),
                     EALang['july'].substr(0,3), EALang['august'].substr(0,3),
                     EALang['september'].substr(0,3),EALang['october'].substr(0,3),
                     EALang['november'].substr(0,3), EALang['december'].substr(0,3)],
-            'dayNames': [EALang['sunday'], EALang['monday'], EALang['tuesday'], EALang['wednesday'],
-                        EALang['thursday'], EALang['friday'], EALang['saturday']],
-            'dayNamesShort': [EALang['sunday'].substr(0,3), EALang['monday'].substr(0,3),
+            dayNames: [EALang['sunday'], EALang['monday'], EALang['tuesday'], EALang['wednesday'],
+                    EALang['thursday'], EALang['friday'], EALang['saturday']],
+            dayNamesShort: [EALang['sunday'].substr(0,3), EALang['monday'].substr(0,3),
                    EALang['tuesday'].substr(0,3), EALang['wednesday'].substr(0,3),
                    EALang['thursday'].substr(0,3), EALang['friday'].substr(0,3),
                    EALang['saturday'].substr(0,3)],
-            'dayNamesMin': [EALang['sunday'].substr(0,2), EALang['monday'].substr(0,2),
+            dayNamesMin: [EALang['sunday'].substr(0,2), EALang['monday'].substr(0,2),
                    EALang['tuesday'].substr(0,2), EALang['wednesday'].substr(0,2),
                    EALang['thursday'].substr(0,2), EALang['friday'].substr(0,2),
                    EALang['saturday'].substr(0,2)],
-            'buttonText': {
-                'today': EALang['today'],
-                'day': EALang['day'],
-                'week': EALang['week'],
-                'month': EALang['month']
+            buttonText: {
+                today: EALang['today'],
+                day: EALang['day'],
+                week: EALang['week'],
+                month: EALang['month']
             },
 
             // Calendar events need to be declared on initialization.
-            'windowResize': _calendarWindowResize,
-            'viewDisplay': _calendarViewDisplay,
-            'dayClick': _calendarDayClick,
-            'eventClick': _calendarEventClick,
-            'eventResize': _calendarEventResize,
-            'eventDrop': _calendarEventDrop,
-            'eventAfterAllRender': function(view) {
+            windowResize: _calendarWindowResize,
+            viewDisplay: _calendarViewDisplay,
+            dayClick: _calendarDayClick,
+            eventClick: _calendarEventClick,
+            eventResize: _calendarEventResize,
+            eventDrop: _calendarEventDrop,
+            eventAfterAllRender: function() {
                 _convertTitlesToHtml();
             }
         });
 
-        // Trigger once to set the proper footer position after calendar
-        // initialization.
+        // Trigger once to set the proper footer position after calendar initialization.
         _calendarWindowResize();
 
         // Fill the select listboxes of the page.
@@ -2047,8 +2043,9 @@ window.BackendCalendar = window.BackendCalendar || {};
                     }
                 });
 
-                if (!found)
+                if (!found) {
                     $(option).remove();
+                }
             });
 
             if ($('#select-filter-item option[type="provider"]').length == 0) {
@@ -2056,16 +2053,16 @@ window.BackendCalendar = window.BackendCalendar || {};
             }
         }
 
-        // :: BIND THE DEFAULT EVENT HANDLERS (IF NEEDED)
+        // Bind the default event handlers (if needed).
         if (defaultEventHandlers === true) {
             _bindEventHandlers();
             $('#select-filter-item').trigger('change');
         }
 
-        // :: DISPLAY EDIT DIALOG IF APPOINTMENT HASH IS PROVIDED
+        // Display the edit dialog if an appointment hash is provided.
         if (GlobalVariables.editAppointment != null) {
-            var $dialog = $('#manage-appointment');
-            var appointment = GlobalVariables.editAppointment;
+            var $dialog = $('#manage-appointment'),
+                appointment = GlobalVariables.editAppointment;
             _resetAppointmentDialog();
 
             $dialog.find('.modal-header h3').text(EALang['edit_appointment_title']);