From 0595267a8c60adc02c0e0c4f2c707da1f6a41a88 Mon Sep 17 00:00:00 2001
From: metatroncubeswdev <info@metatroncubesolutions.com>
Date: Tue, 1 Sep 2026 00:41:26 -0400
Subject: [PATCH] Polish appointment calendar alignment

---
 .../controllers/main.py                       |  2 +
 .../static/src/scss/appointment_booking.scss  | 84 ++++++++++++++-----
 .../views/appointment_templates.xml           | 27 ++++--
 3 files changed, 82 insertions(+), 31 deletions(-)

diff --git a/addons/mcs_appointment_booking/controllers/main.py b/addons/mcs_appointment_booking/controllers/main.py
index f3778e5..2df1de0 100644
--- a/addons/mcs_appointment_booking/controllers/main.py
+++ b/addons/mcs_appointment_booking/controllers/main.py
@@ -71,12 +71,14 @@ class McsAppointmentController(http.Controller):
         if selected_day > max_day:
             selected_day = max_day
         day_options = [today + timedelta(days=index) for index in range(appointment_type.max_schedule_days)]
+        calendar_blanks = list(range(day_options[0].weekday())) if day_options else []
         return request.render(
             "mcs_appointment_booking.appointment_type_page",
             {
                 "appointment_type": appointment_type,
                 "selected_day": selected_day,
                 "day_options": day_options,
+                "calendar_blanks": calendar_blanks,
                 "slots": self._display_slots(appointment_type, selected_day),
             },
         )
diff --git a/addons/mcs_appointment_booking/static/src/scss/appointment_booking.scss b/addons/mcs_appointment_booking/static/src/scss/appointment_booking.scss
index f02d25d..f471cf2 100644
--- a/addons/mcs_appointment_booking/static/src/scss/appointment_booking.scss
+++ b/addons/mcs_appointment_booking/static/src/scss/appointment_booking.scss
@@ -22,7 +22,7 @@
 
 .mcs-appt-shell {
     display: grid;
-    grid-template-columns: minmax(240px, 300px) minmax(0, 1fr);
+    grid-template-columns: minmax(230px, 280px) minmax(0, 1fr);
     gap: 0;
     max-width: 1240px;
     margin: 0 auto;
@@ -89,7 +89,7 @@
 
 .mcs-appt-booking {
     min-width: 0;
-    padding: 24px;
+    padding: 20px;
 }
 
 .mcs-appt-section-head {
@@ -122,16 +122,45 @@
 .mcs-appt-date-strip {
     display: grid;
     grid-template-columns: repeat(7, minmax(0, 1fr));
-    gap: 6px;
+    gap: 4px;
+}
+
+.mcs-appt-calendar-card {
+    max-width: 330px;
+    padding: 10px;
+    border: 1px solid var(--mcs-appt-line);
+    border-radius: 10px;
+    background: #ffffff;
+}
+
+.mcs-appt-month {
+    margin-bottom: 8px;
+    color: var(--mcs-appt-ink);
+    font-size: 0.9rem;
+    font-weight: 850;
+}
+
+.mcs-appt-weekdays {
+    display: grid;
+    grid-template-columns: repeat(7, minmax(0, 1fr));
+    gap: 4px;
+    margin-bottom: 5px;
+
+    span {
+        color: var(--mcs-appt-muted);
+        font-size: 0.68rem;
+        font-weight: 850;
+        text-align: center;
+    }
 }
 
 .mcs-appt-date {
     display: grid;
-    min-height: 54px;
+    min-height: 38px;
     place-items: center;
-    padding: 6px;
+    padding: 3px;
     border: 1px solid var(--mcs-appt-line);
-    border-radius: 10px;
+    border-radius: 8px;
     background: #ffffff;
     color: var(--mcs-appt-muted);
     text-align: center;
@@ -139,14 +168,14 @@
     transition: border-color 160ms ease-out, background 160ms ease-out, color 160ms ease-out, transform 160ms ease-out;
 
     strong,
-    span,
     small {
-        display: block;
+        display: none;
     }
 
     span {
+        display: block;
         color: var(--mcs-appt-ink);
-        font-size: 1rem;
+        font-size: 0.84rem;
         line-height: 1;
         font-weight: 850;
     }
@@ -167,6 +196,11 @@
     }
 }
 
+.mcs-appt-date--blank {
+    visibility: hidden;
+    pointer-events: none;
+}
+
 @media (hover: hover) and (pointer: fine) {
     .mcs-appt-date:hover {
         border-color: var(--mcs-appt-blue);
@@ -184,7 +218,7 @@
 
 .mcs-appt-workspace {
     display: grid;
-    grid-template-columns: minmax(300px, 480px) minmax(340px, 1fr);
+    grid-template-columns: 330px minmax(360px, 1fr);
     gap: 22px;
     margin-top: 0;
     align-items: start;
@@ -204,9 +238,9 @@
 
 .mcs-appt-slot-grid {
     display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(108px, 1fr));
+    grid-template-columns: repeat(2, minmax(0, 1fr));
     gap: 8px;
-    max-height: 284px;
+    max-height: 252px;
     overflow-y: auto;
     padding-right: 4px;
 }
@@ -214,10 +248,10 @@
 .mcs-appt-time {
     display: grid;
     gap: 1px;
-    min-height: 54px;
+    min-height: 48px;
     border: 1px solid var(--mcs-appt-line);
     border-radius: 10px;
-    padding: 8px 10px;
+    padding: 7px 10px;
     background: #ffffff;
     color: var(--mcs-appt-ink);
     text-align: left;
@@ -252,7 +286,7 @@
 
 .mcs-appt-form-grid {
     display: grid;
-    grid-template-columns: repeat(4, minmax(0, 1fr));
+    grid-template-columns: repeat(2, minmax(0, 1fr));
     gap: 12px;
 
     label {
@@ -280,11 +314,11 @@
 }
 
 .mcs-appt-form-wide {
-    grid-column: span 2;
+    grid-column: 1 / -1;
 }
 
 .mcs-appt-form button {
-    justify-self: start;
+    justify-self: end;
     min-height: 46px;
     border: 0;
     border-radius: 10px;
@@ -302,20 +336,22 @@
 
 .mcs-appt-details {
     display: grid;
-    grid-template-columns: minmax(220px, 300px) minmax(0, 1fr);
-    gap: 18px;
-    margin-top: 22px;
+    grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
+    gap: 16px;
+    margin-top: 16px;
     padding: 16px;
     border: 1px solid #cbd8f7;
     border-radius: 14px;
     background: #f8fbff;
+    align-items: start;
 }
 
 .mcs-appt-selected-slot {
     display: grid;
     gap: 4px;
     margin-bottom: 0;
-    padding: 11px;
+    min-height: 84px;
+    padding: 12px;
     border: 1px solid var(--mcs-appt-line);
     border-radius: 10px;
     background: #ffffff;
@@ -347,6 +383,10 @@
         grid-template-columns: 1fr;
     }
 
+    .mcs-appt-calendar-card {
+        max-width: none;
+    }
+
     .mcs-appt-details {
         grid-template-columns: 1fr;
     }
@@ -364,7 +404,7 @@
     }
 
     .mcs-appt-date-strip {
-        grid-template-columns: repeat(3, minmax(0, 1fr));
+        grid-template-columns: repeat(7, minmax(0, 1fr));
     }
 
     .mcs-appt-section-head {
diff --git a/addons/mcs_appointment_booking/views/appointment_templates.xml b/addons/mcs_appointment_booking/views/appointment_templates.xml
index b65f5a6..0a7ed6e 100644
--- a/addons/mcs_appointment_booking/views/appointment_templates.xml
+++ b/addons/mcs_appointment_booking/views/appointment_templates.xml
@@ -57,15 +57,24 @@
                                     <span>Step 1</span>
                                     <h2>Select a date</h2>
                                 </header>
-                                <div class="mcs-appt-date-strip">
-                                    <t t-foreach="day_options" t-as="day">
-                                        <a t-attf-class="mcs-appt-date #{'active' if day == selected_day else ''}"
-                                           t-att-href="'/appointments/%s?date=%s' % (appointment_type.id, day.isoformat())">
-                                            <strong t-esc="day.strftime('%a')"/>
-                                            <span t-esc="day.strftime('%d')"/>
-                                            <small t-esc="day.strftime('%b')"/>
-                                        </a>
-                                    </t>
+                                <div class="mcs-appt-calendar-card">
+                                    <div class="mcs-appt-month" t-esc="selected_day.strftime('%B %Y')"/>
+                                    <div class="mcs-appt-weekdays">
+                                        <span>Mon</span><span>Tue</span><span>Wed</span><span>Thu</span><span>Fri</span><span>Sat</span><span>Sun</span>
+                                    </div>
+                                    <div class="mcs-appt-date-strip">
+                                        <t t-foreach="calendar_blanks" t-as="blank">
+                                            <span class="mcs-appt-date mcs-appt-date--blank"/>
+                                        </t>
+                                        <t t-foreach="day_options" t-as="day">
+                                            <a t-attf-class="mcs-appt-date #{'active' if day == selected_day else ''}"
+                                               t-att-href="'/appointments/%s?date=%s' % (appointment_type.id, day.isoformat())">
+                                                <strong t-esc="day.strftime('%a')"/>
+                                                <span t-esc="day.strftime('%d')"/>
+                                                <small t-esc="day.strftime('%b')"/>
+                                            </a>
+                                        </t>
+                                    </div>
                                 </div>
                             </div>