Show pro name and time zone in calendar header

public/css/style.css

@@ -776,6 +776,22 @@ body .node input[type="number"] {
 .appt-form .stag-current-appt .fc-daygrid-event-dot {
     border-color: #fff;
 }
+.appt-form .fc .fc-toolbar.fc-header-toolbar {
+    margin-bottom: 0;
+    align-items: start;
+}
+.stag-calendar-header-extra {
+    background: #cde8ff;
+    padding: 3px 10px;
+    margin-top: 7px;
+    border-top-left-radius: 6px;
+    border-top-right-radius: 6px;
+    border: 1px solid #44a5f982;
+    border-bottom: 0;
+}
+.stag-calendar-header-extra * {
+    font-size: 14px !important;
+}
 
 /* call panel */
 #proCallComponent {

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

@@ -195,8 +195,29 @@
                 });
 
                 $(document).on('change input paste', '.appt-form-col *', function() {
+                    updateCalendarTitle();
                     $('.apply-appt-button').prop('disabled', false);
                 });
+
+                function updateCalendarTitle() {
+                    $('.stag-calendar-header-extra').remove();
+                    if(!$('.appt-form [name="proUid"]').val() || !$('.appt-form [name="timeZone"]').val()) {
+                        $('.fc-toolbar-title').parent().addClass('mb-3').removeClass('text-center');
+                        return;
+                    }
+                    else {
+                        $('.fc-toolbar-title').parent().removeClass('mb-3').addClass('text-center');
+                    }
+                    let html = '<div class="stag-calendar-header-extra d-inline-flex">' +
+                        '<span class="text-secondary">Pro:</span>&nbsp;' +
+                        '<span class="font-weight-bold mr-4">' + $('.appt-form [name="proUid"] option:selected').text() + '</span>' +
+                        '<span class="text-secondary">Times in</span>&nbsp;' +
+                        '<span class="font-weight-bold">' + $('.appt-form [name="timeZone"] option:selected').text() + '</span>' +
+                        '</div>';
+                    $(html).insertAfter('.fc-toolbar-title');
+                }
+
+                updateCalendarTitle();
             }
             addMCInitializer('patient-manage-appointment', init);
         })();