Refactored the backend_calendar.js file.

src/assets/js/backend_calendar.js

@@ -10,257 +10,31 @@
  * ---------------------------------------------------------------------------- */
 
 /**
+ * Backend Calendar
+ *
  * This namespace contains functions that are used by the backend calendar page.
  *
  * @namespace BackendCalendar
  */
-var BackendCalendar = {
+window.BackendCalendar = window.BackendCalendar || {};
-    // :: CONSTANTS
-    FILTER_TYPE_PROVIDER: 'provider',
-    FILTER_TYPE_SERVICE: 'service',
 
-    // :: VALIABLES
+(function(exports) {
-    lastFocusedEventData: undefined, // Contain event data for later use.
 
-    /**
+    'use strict';
-     * 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.
-     *
-     * @param {bool} defaultEventHandlers (OPTIONAL = TRUE) Determines whether the
-     * default event handlers will be set for the current page.
-     */
-    initialize: function(defaultEventHandlers) {
-        if (defaultEventHandlers === undefined) defaultEventHandlers = true;
 
-        // Dynamic Date Formats
+    // Constants
-        var columnFormat = {};
+    var FILTER_TYPE_PROVIDER =  'provider',
+        FILTER_TYPE_SERVICE = 'service';
 
-        switch(GlobalVariables.dateFormat) {
+    // Variables
-            case 'DMY':
+    var lastFocusedEventData; // Contains event data for later use.
-                columnFormat = {
-                    'month': 'ddd',
-                    'week': 'ddd dd/MM',
-                    'day': 'dddd dd/MM'
-                };
-
-                break;
-            case 'MDY':
-            case 'YMD':
-                columnFormat = {
-                    'month': 'ddd',
-                    'week': 'ddd MM/dd',
-                    'day': 'dddd MM/dd'
-                };
-                break;
-            default:
-                throw new Error('Invalid date format setting provided!', GlobalVariables.dateFormat);
-        }
-
-
-        // Initialize page calendar
-        $('#calendar').fullCalendar({
-            'defaultView': 'agendaWeek',
-            'height': BackendCalendar.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]{ '—'[ MMM] d, yyyy}",
-                'day': 'dddd, MMMM d, yyyy'
-            },
-            'header': {
-                'left': 'prev,next today',
-                'center': 'title',
-                'right': 'agendaDay,agendaWeek,month'
-            },
-
-            // Translations
-            '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),
-           	        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),
-	               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),
-	               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']
-            },
-
-            // Calendar events need to be declared on initialization.
-            'windowResize': BackendCalendar.calendarWindowResize,
-            'viewDisplay': BackendCalendar.calendarViewDisplay,
-            'dayClick': BackendCalendar.calendarDayClick,
-            'eventClick': BackendCalendar.calendarEventClick,
-            'eventResize': BackendCalendar.calendarEventResize,
-            'eventDrop': BackendCalendar.calendarEventDrop,
-            'eventAfterAllRender': function(view) {
-                BackendCalendar.convertTitlesToHtml();
-            }
-        });
-
-        // Trigger once to set the proper footer position after calendar
-        // initialization.
-        BackendCalendar.calendarWindowResize();
-
-        // Fill the select listboxes of the page.
-        if (GlobalVariables.availableProviders.length > 0) {
-            var optgroupHtml = '<optgroup label="' + EALang['providers'] + '" type="providers-group">';
-            $.each(GlobalVariables.availableProviders, function(index, provider) {
-                var hasGoogleSync = (provider['settings']['google_sync'] === '1')
-                        ? 'true' : 'false';
-
-                optgroupHtml += '<option value="' + provider['id'] + '" '
-                        + 'type="' + BackendCalendar.FILTER_TYPE_PROVIDER + '" '
-                        + 'google-sync="' + hasGoogleSync + '">'
-                        + provider['first_name'] + ' ' + provider['last_name']
-                        + '</option>';
-            });
-            optgroupHtml += '</optgroup>';
-            $('#select-filter-item').append(optgroupHtml);
-        }
-
-        if (GlobalVariables.availableServices.length > 0) {
-            optgroupHtml = '<optgroup label="' + EALang['services'] + '" type="services-group">';
-            $.each(GlobalVariables.availableServices, function(index, service) {
-                optgroupHtml += '<option value="' + service['id'] + '" ' +
-                        'type="' + BackendCalendar.FILTER_TYPE_SERVICE + '">' +
-                        service['name'] + '</option>';
-            });
-            optgroupHtml += '</optgroup>';
-            $('#select-filter-item').append(optgroupHtml);
-        }
-
-        // Privileges Checks
-        if (GlobalVariables.user.role_slug == Backend.DB_SLUG_PROVIDER) {
-            $('#select-filter-item optgroup:eq(0)')
-                    .find('option[value="' + GlobalVariables.user.id + '"]').prop('selected', true);
-            $('#select-filter-item').prop('disabled', true);
-        }
-
-        if (GlobalVariables.user.role_slug == Backend.DB_SLUG_SECRETARY) {
-            $('#select-filter-item optgroup:eq(1)').remove();
-        }
-
-        if (GlobalVariables.user.role_slug == Backend.DB_SLUG_SECRETARY) {
-            // Remove the providers that are not connected to the secretary.
-            $('#select-filter-item option[type="provider"]').each(function(index, option) {
-                var found = false;
-                $.each(GlobalVariables.secretaryProviders, function(index, id) {
-                    if ($(option).val() == id) {
-                        found = true;
-                        return false;
-                    }
-                });
-
-                if (!found)
-                    $(option).remove();
-            });
-
-            if ($('#select-filter-item option[type="provider"]').length == 0) {
-                $('#select-filter-item optgroup[type="providers-group"]').remove();
-            }
-        }
-
-        // :: BIND THE DEFAULT EVENT HANDLERS (IF NEEDED)
-        if (defaultEventHandlers === true) {
-            BackendCalendar.bindEventHandlers();
-            $('#select-filter-item').trigger('change');
-        }
-
-        // :: DISPLAY EDIT DIALOG IF APPOINTMENT HASH IS PROVIDED
-        if (GlobalVariables.editAppointment != null) {
-            var $dialog = $('#manage-appointment');
-            var appointment = GlobalVariables.editAppointment;
-            BackendCalendar.resetAppointmentDialog();
-
-            $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']).change();
-            $dialog.find('#select-provider').val(appointment['id_users_provider']);
-
-            // 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));
-
-            var endDatetime = Date.parseExact(appointment['end_datetime'],
-                    'yyyy-MM-dd HH:mm:ss');
-            $dialog.find('#end-datetime').val(GeneralFunctions.formatDate(endDatetime, GlobalVariables.dateFormat, true));
-
-            var customer = appointment['customer'];
-            $dialog.find('#customer-id').val(appointment['id_users_customer']);
-            $dialog.find('#first-name').val(customer['first_name']);
-            $dialog.find('#last-name').val(customer['last_name']);
-            $dialog.find('#email').val(customer['email']);
-            $dialog.find('#phone-number').val(customer['phone_number']);
-            $dialog.find('#address').val(customer['address']);
-            $dialog.find('#city').val(customer['city']);
-            $dialog.find('#zip-code').val(customer['zip_code']);
-            $dialog.find('#appointment-notes').val(appointment['notes']);
-            $dialog.find('#customer-notes').val(customer['notes']);
-
-            $dialog.modal('show');
-        }
-
-        // Apply qtip to control tooltips.
-        $('#calendar-toolbar button').qtip({
-            position: {
-                my: 'top center',
-                at: 'bottom center'
-            },
-            style: {
-                classes: 'qtip-green qtip-shadow custom-qtip'
-            }
-        });
-
-        $('#select-filter-item').qtip({
-            position: {
-                my: 'middle left',
-                at: 'middle right'
-            },
-            style: {
-                classes: 'qtip-green qtip-shadow custom-qtip'
-            }
-        });
-
-        // Fine tune the footer's position only for this page.
-        if (window.innerHeight < 700) {
-            $('#footer').css('position', 'static');
-        }
-
-        if ($('#select-filter-item option').length == 0)
-            $('#calendar-actions button').prop('disabled', true);
-    },
 
     /**
      * 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".
      */
-    bindEventHandlers: function() {
+    function _bindEventHandlers() {
         /**
          * Event: Calendar Filter Item "Change"
          *
@@ -268,7 +42,7 @@ var BackendCalendar = {
          * display them on the calendar.
          */
         $('#select-filter-item').change(function() {
-            BackendCalendar.refreshCalendarAppointments(
+            _refreshCalendarAppointments(
                     $('#calendar'),
                     $('#select-filter-item').val(),
                     $('#select-filter-item option:selected').attr('type'),
@@ -277,15 +51,14 @@ var BackendCalendar = {
 
             // If current value is service, then the sync buttons must be disabled.
             if ($('#select-filter-item option:selected').attr('type')
-                    === BackendCalendar.FILTER_TYPE_SERVICE) {
+                    === 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);
-                // If the user has already the sync enabled then apply the proper
+                // If the user has already the sync enabled then apply the proper style changes.
-                // style changes.
                 if ($('#select-filter-item option:selected').attr('google-sync') === 'true') {
                     $('#enable-sync').addClass('btn-danger enabled');
                     $('#enable-sync span:eq(1)').text(EALang['disable_sync']);
@@ -304,12 +77,13 @@ var BackendCalendar = {
          * Trigger the synchronization algorithm.
          */
         $('#google-sync').click(function() {
-            var getUrl = GlobalVariables.baseUrl + '/index.php/google/sync/' + $('#select-filter-item').val();
+            var url = GlobalVariables.baseUrl + '/index.php/google/sync/' + $('#select-filter-item').val();
             $.ajax({
-                'type': 'GET',
+                url: url,
-                'url': getUrl,
+                type: 'GET',
-                'dataType': 'json',
+                dataType: 'json'
-                'success': function(response) {
+            })
+                .done(function(response) {
                     if (response.exceptions) {
                         response.exceptions = GeneralFunctions.parseExceptions(response.exceptions);
                         GeneralFunctions.displayMessageBox(GeneralFunctions.EXCEPTIONS_TITLE,
@@ -327,10 +101,9 @@ var BackendCalendar = {
 
                     Backend.displayNotification(EALang['google_sync_completed']);
                     $('#reload-appointments').trigger('click');
-                },
+                })
-                'error': function(jqXHR, textStatus, errorThrown) {
+                .fail(function(jqXHR, textStatus, errorThrown) {
                     Backend.displayNotification(EALang['google_sync_failed']);
-                }
                 });
         });
 
@@ -363,11 +136,11 @@ var BackendCalendar = {
 
             var $dialog;
 
-            if (BackendCalendar.lastFocusedEventData.data.is_unavailable == false) {
+            if (lastFocusedEventData.data.is_unavailable == false) {
-                var appointment = BackendCalendar.lastFocusedEventData.data;
+                var appointment = lastFocusedEventData.data;
                 $dialog = $('#manage-appointment');
 
-                BackendCalendar.resetAppointmentDialog();
+                _resetAppointmentDialog();
 
                 // :: APPLY APPOINTMENT DATA AND SHOW TO MODAL DIALOG
                 $dialog.find('.modal-header h3').text(EALang['edit_appointment_title']);
@@ -398,14 +171,14 @@ var BackendCalendar = {
                 $dialog.find('#appointment-notes').val(appointment['notes']);
                 $dialog.find('#customer-notes').val(customer['notes']);
             } else {
-                var unavailable = BackendCalendar.lastFocusedEventData.data;
+                var unavailable = lastFocusedEventData.data;
 
                 // Replace string date values with actual date objects.
-                unavailable.start_datetime = GeneralFunctions.clone(BackendCalendar.lastFocusedEventData.start);
+                unavailable.start_datetime = GeneralFunctions.clone(lastFocusedEventData.start);
-                unavailable.end_datetime = GeneralFunctions.clone(BackendCalendar.lastFocusedEventData.end);
+                unavailable.end_datetime = GeneralFunctions.clone(lastFocusedEventData.end);
 
                 $dialog = $('#manage-unavailable');
-                BackendCalendar.resetUnavailableDialog();
+                _resetUnavailableDialog();
 
                 // :: APPLY UNAVAILABLE DATA TO DIALOG
                 $dialog.find('.modal-header h3').text('Edit Unavailable Period');
@@ -429,14 +202,14 @@ var BackendCalendar = {
         $(document).on('click', '.delete-popover', function() {
             $(this).parents().eq(2).remove(); // Hide the popover
 
-            if (BackendCalendar.lastFocusedEventData.data.is_unavailable == false) {
+            if (lastFocusedEventData.data.is_unavailable == false) {
                 var messageButtons = {};
                 messageButtons['OK'] = function() {
                     var postUrl = GlobalVariables.baseUrl + '/index.php/backend_api/ajax_delete_appointment';
 
                     var postData = {
                         'csrfToken': GlobalVariables.csrfToken,
-                        'appointment_id' : BackendCalendar.lastFocusedEventData.data['id'],
+                        'appointment_id' : lastFocusedEventData.data['id'],
                         'delete_reason': $('#delete-reason').val()
                     };
 
@@ -475,7 +248,7 @@ var BackendCalendar = {
 
                 var postData = {
                     'csrfToken': GlobalVariables.csrfToken,
-                    'unavailable_id' : BackendCalendar.lastFocusedEventData.data.id
+                    'unavailable_id' : lastFocusedEventData.data.id
                 };
 
                 $.post(postUrl, postData, function(response) {
@@ -517,7 +290,7 @@ var BackendCalendar = {
          */
         $('#manage-appointment #save-appointment').click(function() {
             // Before doing anything the appointment data need to be validated.
-            if (!BackendCalendar.validateAppointmentForm()) {
+            if (!_validateAppointmentForm()) {
                 return; // validation failed
             }
 
@@ -593,8 +366,7 @@ var BackendCalendar = {
             };
 
             // :: CALL THE UPDATE APPOINTMENT METHOD
-            BackendCalendar.saveAppointment(appointment, customer,
+            _saveAppointment(appointment, customer, successCallback, errorCallback);
-                    successCallback, errorCallback);
         });
 
         /**
@@ -673,7 +445,7 @@ var BackendCalendar = {
                 $dialog.find('.modal-message').addClass('alert-danger').removeClass('hidden');
             };
 
-            BackendCalendar.saveUnavailable(unavailable, successCallback, errorCallback);
+            _saveUnavailable(unavailable, successCallback, errorCallback);
         });
 
         /**
@@ -750,7 +522,7 @@ var BackendCalendar = {
                         provider['settings']['google_sync'] = '0';
                         provider['settings']['google_token'] = null;
 
-                        BackendCalendar.disableProviderSync(provider['id']);
+                        _disableProviderSync(provider['id']);
 
                         $('#enable-sync').removeClass('btn-danger enabled');
                         $('#enable-sync span:eq(1)').text(EALang['enable_sync']);
@@ -770,7 +542,7 @@ var BackendCalendar = {
          * the user to create a new appointment.
          */
         $('#insert-appointment').click(function() {
-            BackendCalendar.resetAppointmentDialog();
+            _resetAppointmentDialog();
             var $dialog = $('#manage-appointment');
 
             // Set the selected filter item and find the next appointment time
@@ -827,7 +599,7 @@ var BackendCalendar = {
          * a time period where he cannot accept any appointments.
          */
         $('#insert-unavailable').click(function() {
-            BackendCalendar.resetUnavailableDialog();
+            _resetUnavailableDialog();
             var $dialog = $('#manage-unavailable');
 
             // Set the default datetime values.
@@ -1018,7 +790,7 @@ var BackendCalendar = {
         $('#close-calendar').click(function() {
             $('#select-google-calendar').modal('hide');
         });
-    },
+    }
 
     /**
      * This method calculates the proper calendar height, in order to be displayed
@@ -1026,11 +798,11 @@ var BackendCalendar = {
      *
      * @return {int} Returns the calendar element height in pixels.
      */
-    getCalendarHeight: function () {
+    function _getCalendarHeight() {
         var result = window.innerHeight - $('#footer').height() - $('#header').height()
                 - $('#calendar-toolbar').height() - 50; // 80 for fine tuning
         return (result > 500) ? result : 500; // Minimum height is 500px
-    },
+    }
 
     /**
      * This method reloads the registered appointments for the selected date period
@@ -1038,14 +810,13 @@ var BackendCalendar = {
      *
      * @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
+     * @param {string} filterType The filter type, could be either FILTER_TYPE_PROVIDER or FILTER_TYPE_SERVICE.
-     * or FILTER_TYPE_SERVICE.
      * @param {date} startDate Visible start date of the calendar.
      * @param {type} endDate Visible end date of the calendar.
      */
-    refreshCalendarAppointments: function($calendar, recordId, filterType, startDate, endDate) {
+    function _refreshCalendarAppointments($calendar, recordId, filterType, startDate, endDate) {
-        var postUrl = GlobalVariables.baseUrl + '/index.php/backend_api/ajax_get_calendar_appointments';
+        var postUrl = GlobalVariables.baseUrl + '/index.php/backend_api/ajax_get_calendar_appointments',
-        var postData = {
+            postData = {
             'csrfToken': GlobalVariables.csrfToken,
             'record_id': recordId,
             'start_date': startDate.toString('yyyy-MM-dd'),
@@ -1081,7 +852,7 @@ var BackendCalendar = {
             // :: ADD PROVIDER'S UNAVAILABLE TIME PERIODS
             var calendarView = $calendar.fullCalendar('getView').name;
 
-            if (filterType === BackendCalendar.FILTER_TYPE_PROVIDER && calendarView !== 'month') {
+            if (filterType === FILTER_TYPE_PROVIDER && calendarView !== 'month') {
                 $.each(GlobalVariables.availableProviders, function(index, provider) {
                     if (provider['id'] == recordId) {
                         var workingPlan = jQuery.parseJSON(provider.settings.working_plan);
@@ -1288,11 +1059,9 @@ var BackendCalendar = {
                         }
                     }
                 });
-                // Convert the titles to html code.
-                //BackendCalendar.convertTitlesToHtml();
             }
         }, 'json').fail(GeneralFunctions.ajaxFailureHandler);
-    },
+    }
 
     /**
      * This method stores the changes of an already registered appointment
@@ -1307,10 +1076,9 @@ var BackendCalendar = {
      * @param {function} errorCallback (OPTIONAL) If defined, this function is
      * going to be executed on post failure.
      */
-    saveAppointment: function(appointment, customer, successCallback, errorCallback) {
+    function _saveAppointment(appointment, customer, successCallback, errorCallback) {
-        var postUrl = GlobalVariables.baseUrl + '/index.php/backend_api/ajax_save_appointment';
+        var postUrl = GlobalVariables.baseUrl + '/index.php/backend_api/ajax_save_appointment',
-
+            postData = {
-        var postData = {
                 'csrfToken': GlobalVariables.csrfToken,
                 'appointment_data': JSON.stringify(appointment)
             };
@@ -1320,22 +1088,22 @@ var BackendCalendar = {
         }
 
         $.ajax({
-            'type': 'POST',
+            url: postUrl,
-            'url': postUrl,
+            type: 'POST',
-            'data': postData,
+            data: postData,
-            'dataType': 'json',
+            dataType: 'json'
-            'success': function(response) {
+        })
+            .done(function(response) {
                 if (successCallback !== undefined) {
                     successCallback(response);
                 }
-            },
+            })
-            'error': function(jqXHR, textStatus, errorThrown) {
+            .fail(function(jqXHR, textStatus, errorThrown) {
                 if (errorCallback !== undefined) {
                     errorCallback();
                 }
-            }
             });
-    },
+    }
 
     /**
      * Save unavailable period to database.
@@ -1344,7 +1112,7 @@ var BackendCalendar = {
      * @param {function} successCallback The ajax success callback function.
      * @param {function} errorCallback The ajax failure callback function.
      */
-    saveUnavailable: function(unavailable, successCallback, errorCallback) {
+    function _saveUnavailable(unavailable, successCallback, errorCallback) {
         var postUrl = GlobalVariables.baseUrl + '/index.php/backend_api/ajax_save_unavailable';
 
         var postData = {
@@ -1359,7 +1127,7 @@ var BackendCalendar = {
             'success': successCallback,
             'error': errorCallback
         });
-    },
+    }
 
     /**
      * Calendar Event "Resize" Callback
@@ -1370,7 +1138,7 @@ var BackendCalendar = {
      *
      * @see updateAppointmentData()
      */
-    calendarEventResize: function(event, dayDelta, minuteDelta, revertFunc,
+    function _calendarEventResize(event, dayDelta, minuteDelta, revertFunc,
             jsEvent, ui, view) {
         if (GlobalVariables.user.privileges.appointments.edit == false) {
             revertFunc();
@@ -1442,8 +1210,7 @@ var BackendCalendar = {
             };
 
             // :: UPDATE APPOINTMENT DATA VIA AJAX CALL
-            BackendCalendar.saveAppointment(appointment, undefined,
+            _saveAppointment(appointment, undefined, successCallback, undefined);
-                    successCallback, undefined);
         } else {
             // :: UPDATE UNAVAILABLE TIME PERIOD
             var unavailable = {
@@ -1497,9 +1264,9 @@ var BackendCalendar = {
                 $('#footer').css('position', 'static'); // Footer position fix.
             };
 
-            BackendCalendar.saveUnavailable(unavailable, successCallback, undefined);
+            _saveUnavailable(unavailable, successCallback, undefined);
+        }
     }
-    },
 
     /**
      * Calendar Window "Resize" Callback
@@ -1508,12 +1275,11 @@ var BackendCalendar = {
      * window. Nevertheless, if the window becomes very small the the calendar
      * won't shrink anymore.
      *
-     * @see getCalendarHeight()
+     * @see _getCalendarHeight()
      */
-    calendarWindowResize: function(view) {
+    function _calendarWindowResize(view) {
-        $('#calendar').fullCalendar('option', 'height',
+        $('#calendar').fullCalendar('option', 'height', _getCalendarHeight());
-                BackendCalendar.getCalendarHeight());
+    }
-    },
 
     /**
      * Calendar Day "Click" Callback
@@ -1521,12 +1287,12 @@ var BackendCalendar = {
      * When the user clicks on a day square on the calendar, then he will
      * automatically be transfered to that day view calendar.
      */
-    calendarDayClick: function(date, allDay, jsEvent, view) {
+    function _calendarDayClick(date, allDay, jsEvent, view) {
         if (allDay) {
             $('#calendar').fullCalendar('gotoDate', date);
             $('#calendar').fullCalendar('changeView', 'agendaDay');
         }
-    },
+    }
 
     /**
      * Calendar Event "Click" Callback
@@ -1534,7 +1300,7 @@ var BackendCalendar = {
      * When the user clicks on an appointment object on the calendar, then
      * a data preview popover is display above the calendar item.
      */
-    calendarEventClick: function(event, jsEvent, view) {
+    function _calendarEventClick(event, jsEvent, view) {
         $('.popover').remove(); // Close all open popovers.
 
         var html, displayEdit, displayDelete;
@@ -1619,14 +1385,14 @@ var BackendCalendar = {
             'trigger': 'manual'
         });
 
-        BackendCalendar.lastFocusedEventData = event;
+        lastFocusedEventData = event;
         $(jsEvent.target).popover('toggle');
 
         // Fix popover position
         if ($('.popover').length > 0) {
             if ($('.popover').position().top < 200) $('.popover').css('top', '200px');
         }
-    },
+    }
 
     /**
      * Calendar Event "Drop" Callback
@@ -1635,7 +1401,7 @@ var BackendCalendar = {
      * 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.
      */
-    calendarEventDrop : function(event, dayDelta, minuteDelta, allDay,
+    function _calendarEventDrop(event, dayDelta, minuteDelta, allDay,
             revertFunc, jsEvent, ui, view) {
         if (GlobalVariables.user.privileges.appointments.edit == false) {
             revertFunc();
@@ -1726,8 +1492,7 @@ var BackendCalendar = {
             };
 
             // :: UPDATE APPOINTMENT DATA VIA AJAX CALL
-            BackendCalendar.saveAppointment(appointment, undefined,
+            _saveAppointment(appointment, undefined, successCallback, undefined);
-                    successCallback, undefined);
         } else {
             // :: UPDATE UNAVAILABLE TIME PERIOD
             var unavailable = {
@@ -1788,9 +1553,9 @@ var BackendCalendar = {
                 $('#footer').css('position', 'static'); // Footer position fix.
             };
 
-            BackendCalendar.saveUnavailable(unavailable, successCallback, undefined);
+            _saveUnavailable(unavailable, successCallback, undefined);
+        }
     }
-    },
 
     /**
      * Calendar "View Display" Callback
@@ -1798,12 +1563,12 @@ var BackendCalendar = {
      * Whenever the calendar changes or refreshes its view certain actions
      * need to be made, in order to display proper information to the user.
      */
-    calendarViewDisplay : function(view) {
+    function _calendarViewDisplay(view) {
         if ($('#select-filter-item').val() === null) {
              return;
         }
 
-        BackendCalendar.refreshCalendarAppointments(
+        _refreshCalendarAppointments(
                 $('#calendar'),
                 $('#select-filter-item').val(),
                 $('#select-filter-item option:selected').attr('type'),
@@ -1820,14 +1585,14 @@ var BackendCalendar = {
         $('.fv-events').each(function(index, eventHandle) {
             $(eventHandle).popover();
         });
-    },
+    }
 
     /**
      * This method disables the google synchronization for a specific provider.
      *
      * @param {int} providerId The selected provider record id.
      */
-    disableProviderSync: function(providerId) {
+    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';
@@ -1844,14 +1609,14 @@ var BackendCalendar = {
                 return;
             }
         }, 'json').fail(GeneralFunctions.ajaxFailureHandler);
-    },
+    }
 
     /**
      * 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.
      */
-    resetAppointmentDialog: function() {
+    function _resetAppointmentDialog() {
         var $dialog = $('#manage-appointment');
 
         // :: EMPTY FORM FIELDS
@@ -1973,7 +1738,7 @@ var BackendCalendar = {
             firstDay: 1
         });
         $dialog.find('#end-datetime').datepicker('setDate', endDatetime);
-    },
+    }
 
     /**
      * Validate the manage appointment dialog data. Validation checks need to
@@ -1981,7 +1746,7 @@ var BackendCalendar = {
      *
      * @returns {bool} Returns the validation result.
      */
-    validateAppointmentForm: function() {
+    function _validateAppointmentForm() {
         var $dialog = $('#manage-appointment');
 
         // Reset previous validation css formating.
@@ -2021,13 +1786,13 @@ var BackendCalendar = {
             $dialog.find('.modal-message').addClass('alert-danger').text(exc).removeClass('hidden');
             return false;
         }
-    },
+    }
 
     /**
      * Reset the "#manage-unavailable" dialog. Use this method to bring the dialog
      * to the initial state before it becomes visible to the user.
      */
-    resetUnavailableDialog: function() {
+    function _resetUnavailableDialog() {
         var $dialog = $('#manage-unavailable');
 
         $dialog.find('#unavailable-id').val('');
@@ -2110,7 +1875,7 @@ var BackendCalendar = {
 
         // Clear the unavailable notes field.
         $dialog.find('#unavailable-notes').val('');
-    },
+    }
 
     /**
      * On some calendar events the titles contain html markup that is not
@@ -2119,7 +1884,7 @@ var BackendCalendar = {
      * $.html() method. So in order for the title to displya the html properly
      * we convert all the .fc-event-titles where needed into html.
      */
-    convertTitlesToHtml: function() {
+    function _convertTitlesToHtml() {
         // Convert the titles to html code.
         $('.fc-custom').each(function() {
             var title = $(this).find('.fc-event-title').text();
@@ -2128,4 +1893,239 @@ var BackendCalendar = {
             $(this).find('.fc-event-time').html(time);
         });
     }
+
+    /**
+     * 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.
+     *
+     * @param {bool} 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;
+
+        // Dynamic Date Formats
+        var columnFormat = {};
+
+        switch(GlobalVariables.dateFormat) {
+            case 'DMY':
+                columnFormat = {
+                    'month': 'ddd',
+                    'week': 'ddd dd/MM',
+                    'day': 'dddd dd/MM'
                 };
+
+                break;
+            case 'MDY':
+            case 'YMD':
+                columnFormat = {
+                    'month': 'ddd',
+                    'week': 'ddd MM/dd',
+                    'day': 'dddd MM/dd'
+                };
+                break;
+            default:
+                throw new Error('Invalid date format setting provided!', GlobalVariables.dateFormat);
+        }
+
+
+        // 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'
+            },
+            'header': {
+                'left': 'prev,next today',
+                'center': 'title',
+                'right': 'agendaDay,agendaWeek,month'
+            },
+
+            // Translations
+            '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),
+                    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),
+                   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),
+                   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']
+            },
+
+            // Calendar events need to be declared on initialization.
+            'windowResize': _calendarWindowResize,
+            'viewDisplay': _calendarViewDisplay,
+            'dayClick': _calendarDayClick,
+            'eventClick': _calendarEventClick,
+            'eventResize': _calendarEventResize,
+            'eventDrop': _calendarEventDrop,
+            'eventAfterAllRender': function(view) {
+                _convertTitlesToHtml();
+            }
+        });
+
+        // Trigger once to set the proper footer position after calendar
+        // initialization.
+        _calendarWindowResize();
+
+        // Fill the select listboxes of the page.
+        if (GlobalVariables.availableProviders.length > 0) {
+            var optgroupHtml = '<optgroup label="' + EALang['providers'] + '" type="providers-group">';
+            $.each(GlobalVariables.availableProviders, function(index, provider) {
+                var hasGoogleSync = (provider['settings']['google_sync'] === '1')
+                        ? 'true' : 'false';
+
+                optgroupHtml += '<option value="' + provider['id'] + '" '
+                        + 'type="' + FILTER_TYPE_PROVIDER + '" '
+                        + 'google-sync="' + hasGoogleSync + '">'
+                        + provider['first_name'] + ' ' + provider['last_name']
+                        + '</option>';
+            });
+            optgroupHtml += '</optgroup>';
+            $('#select-filter-item').append(optgroupHtml);
+        }
+
+        if (GlobalVariables.availableServices.length > 0) {
+            optgroupHtml = '<optgroup label="' + EALang['services'] + '" type="services-group">';
+            $.each(GlobalVariables.availableServices, function(index, service) {
+                optgroupHtml += '<option value="' + service['id'] + '" ' +
+                        'type="' + FILTER_TYPE_SERVICE + '">' +
+                        service['name'] + '</option>';
+            });
+            optgroupHtml += '</optgroup>';
+            $('#select-filter-item').append(optgroupHtml);
+        }
+
+        // Privileges Checks
+        if (GlobalVariables.user.role_slug == Backend.DB_SLUG_PROVIDER) {
+            $('#select-filter-item optgroup:eq(0)')
+                    .find('option[value="' + GlobalVariables.user.id + '"]').prop('selected', true);
+            $('#select-filter-item').prop('disabled', true);
+        }
+
+        if (GlobalVariables.user.role_slug == Backend.DB_SLUG_SECRETARY) {
+            $('#select-filter-item optgroup:eq(1)').remove();
+        }
+
+        if (GlobalVariables.user.role_slug == Backend.DB_SLUG_SECRETARY) {
+            // Remove the providers that are not connected to the secretary.
+            $('#select-filter-item option[type="provider"]').each(function(index, option) {
+                var found = false;
+                $.each(GlobalVariables.secretaryProviders, function(index, id) {
+                    if ($(option).val() == id) {
+                        found = true;
+                        return false;
+                    }
+                });
+
+                if (!found)
+                    $(option).remove();
+            });
+
+            if ($('#select-filter-item option[type="provider"]').length == 0) {
+                $('#select-filter-item optgroup[type="providers-group"]').remove();
+            }
+        }
+
+        // :: BIND THE DEFAULT EVENT HANDLERS (IF NEEDED)
+        if (defaultEventHandlers === true) {
+            _bindEventHandlers();
+            $('#select-filter-item').trigger('change');
+        }
+
+        // :: DISPLAY EDIT DIALOG IF APPOINTMENT HASH IS PROVIDED
+        if (GlobalVariables.editAppointment != null) {
+            var $dialog = $('#manage-appointment');
+            var appointment = GlobalVariables.editAppointment;
+            _resetAppointmentDialog();
+
+            $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']).change();
+            $dialog.find('#select-provider').val(appointment['id_users_provider']);
+
+            // 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));
+
+            var endDatetime = Date.parseExact(appointment['end_datetime'],
+                    'yyyy-MM-dd HH:mm:ss');
+            $dialog.find('#end-datetime').val(GeneralFunctions.formatDate(endDatetime, GlobalVariables.dateFormat, true));
+
+            var customer = appointment['customer'];
+            $dialog.find('#customer-id').val(appointment['id_users_customer']);
+            $dialog.find('#first-name').val(customer['first_name']);
+            $dialog.find('#last-name').val(customer['last_name']);
+            $dialog.find('#email').val(customer['email']);
+            $dialog.find('#phone-number').val(customer['phone_number']);
+            $dialog.find('#address').val(customer['address']);
+            $dialog.find('#city').val(customer['city']);
+            $dialog.find('#zip-code').val(customer['zip_code']);
+            $dialog.find('#appointment-notes').val(appointment['notes']);
+            $dialog.find('#customer-notes').val(customer['notes']);
+
+            $dialog.modal('show');
+        }
+
+        // Apply qtip to control tooltips.
+        $('#calendar-toolbar button').qtip({
+            position: {
+                my: 'top center',
+                at: 'bottom center'
+            },
+            style: {
+                classes: 'qtip-green qtip-shadow custom-qtip'
+            }
+        });
+
+        $('#select-filter-item').qtip({
+            position: {
+                my: 'middle left',
+                at: 'middle right'
+            },
+            style: {
+                classes: 'qtip-green qtip-shadow custom-qtip'
+            }
+        });
+
+        // Fine tune the footer's position only for this page.
+        if (window.innerHeight < 700) {
+            $('#footer').css('position', 'static');
+        }
+
+        if ($('#select-filter-item option').length == 0) {
+            $('#calendar-actions button').prop('disabled', true);
+        }
+    };
+
+})(window.BackendCalendar);