v4

core/templates/core/calendar_embed.html

@@ -3,8 +3,8 @@
 {% block title %}Embeddable Calendar Widget{% endblock %}
 
 {% block content %}
-<section class="embed-section">
+<section class="embed-section embed-section-wide">
-  <div class="container-fluid px-md-4 px-lg-5">
+  <div class="embed-container">
     <div class="embed-shell-card {% if not show_embed_header %}embed-shell-card-compact{% endif %}">
       {% if show_embed_header %}
       <div class="embed-header d-flex flex-column flex-md-row justify-content-between gap-3 align-items-md-center">

core/templates/core/includes/calendar_widget.html

@@ -5,9 +5,9 @@
       <h3 class="calendar-title mb-0">{{ month_label }}</h3>
     </div>
     <div class="calendar-nav d-flex gap-2">
-      <a class="btn btn-ghost btn-sm" href="?month={{ prev_month }}">Previous</a>
+      <a class="btn btn-ghost btn-sm" href="?month={{ prev_month }}{% if calendar_variant == 'embed' %}&header={{ embed_header_value|default:'0' }}{% endif %}">Previous</a>
-      <a class="btn btn-ghost btn-sm" href="?month={{ today_value }}">Today</a>
+      <a class="btn btn-ghost btn-sm" href="?month={{ today_value }}{% if calendar_variant == 'embed' %}&header={{ embed_header_value|default:'0' }}{% endif %}">Today</a>
-      <a class="btn btn-ghost btn-sm" href="?month={{ next_month }}">Next</a>
+      <a class="btn btn-ghost btn-sm" href="?month={{ next_month }}{% if calendar_variant == 'embed' %}&header={{ embed_header_value|default:'0' }}{% endif %}">Next</a>
     </div>
   </div>
   <div class="calendar-grid-wrap">

core/views.py

@@ -116,7 +116,11 @@ def _embed_base_url(request):
 
 
 def _show_embed_header(request):
-    return request.GET.get('header', '1') != '0'
+    return request.GET.get('header', '0') != '0'
+
+
+def _embed_header_value(request):
+    return '1' if _show_embed_header(request) else '0'
 
 
 def _serialize_event(event):
@@ -501,6 +505,7 @@ def calendar_embed(request):
             page_title='Embeddable calendar',
             embedded=True,
             show_embed_header=_show_embed_header(request),
+            embed_header_value=_embed_header_value(request),
             **month_context,
         ),
     )

static/css/custom.css

@@ -575,10 +575,21 @@ span {
     margin-bottom: 0.7rem;
 }
 
+.embed-section-wide {
+    padding: 0.3rem 0 0.85rem;
+}
+
+.embed-container {
+    width: 100%;
+    max-width: none;
+    margin: 0 auto;
+    padding-inline: clamp(0.35rem, 1vw, 0.85rem);
+}
+
 .embed-shell-card {
-    padding: 1.2rem;
+    padding: clamp(0.6rem, 1vw, 0.95rem);
-    margin: 1.2rem auto;
+    margin: 0;
-    max-width: 1200px;
+    max-width: none;
 }
 
 .embed-section .calendar-card {
@@ -588,6 +599,39 @@ span {
     padding: 0;
 }
 
+.calendar-embed .calendar-toolbar {
+    margin-bottom: 0.7rem;
+}
+
+.calendar-embed .calendar-weekdays,
+.calendar-embed .calendar-grid {
+    gap: 0.5rem;
+}
+
+.calendar-embed .calendar-day {
+    min-height: 96px;
+    padding: 0.7rem;
+    gap: 0.45rem;
+}
+
+.calendar-embed .calendar-day-number {
+    font-size: 1.22rem;
+}
+
+.calendar-embed .calendar-badge {
+    padding: 0.34rem 0.58rem;
+    font-size: 0.78rem;
+}
+
+.calendar-embed .calendar-title {
+    font-size: clamp(1.35rem, 2vw, 1.7rem);
+}
+
+.calendar-embed .toolbar-label {
+    font-size: 0.82rem;
+    margin-bottom: 0.2rem !important;
+}
+
 .event-card,
 .detail-card,
 .form-card,
@@ -821,4 +865,18 @@ textarea,
     .embed-section {
         padding-bottom: 2.3rem;
     }
+
+    .embed-container {
+        padding-inline: 0.4rem;
+    }
+
+    .embed-shell-card {
+        margin-top: 0;
+        padding: 0.55rem;
+    }
+
+    .calendar-embed .calendar-day {
+        min-height: 92px;
+        padding: 0.62rem;
+    }
 }

staticfiles/css/custom.css

@@ -575,10 +575,21 @@ span {
     margin-bottom: 0.7rem;
 }
 
+.embed-section-wide {
+    padding: 0.3rem 0 0.85rem;
+}
+
+.embed-container {
+    width: 100%;
+    max-width: none;
+    margin: 0 auto;
+    padding-inline: clamp(0.35rem, 1vw, 0.85rem);
+}
+
 .embed-shell-card {
-    padding: 1.2rem;
+    padding: clamp(0.6rem, 1vw, 0.95rem);
-    margin: 1.2rem auto;
+    margin: 0;
-    max-width: 1200px;
+    max-width: none;
 }
 
 .embed-section .calendar-card {
@@ -588,6 +599,39 @@ span {
     padding: 0;
 }
 
+.calendar-embed .calendar-toolbar {
+    margin-bottom: 0.7rem;
+}
+
+.calendar-embed .calendar-weekdays,
+.calendar-embed .calendar-grid {
+    gap: 0.5rem;
+}
+
+.calendar-embed .calendar-day {
+    min-height: 96px;
+    padding: 0.7rem;
+    gap: 0.45rem;
+}
+
+.calendar-embed .calendar-day-number {
+    font-size: 1.22rem;
+}
+
+.calendar-embed .calendar-badge {
+    padding: 0.34rem 0.58rem;
+    font-size: 0.78rem;
+}
+
+.calendar-embed .calendar-title {
+    font-size: clamp(1.35rem, 2vw, 1.7rem);
+}
+
+.calendar-embed .toolbar-label {
+    font-size: 0.82rem;
+    margin-bottom: 0.2rem !important;
+}
+
 .event-card,
 .detail-card,
 .form-card,
@@ -821,4 +865,18 @@ textarea,
     .embed-section {
         padding-bottom: 2.3rem;
     }
+
+    .embed-container {
+        padding-inline: 0.4rem;
+    }
+
+    .embed-shell-card {
+        margin-top: 0;
+        padding: 0.55rem;
+    }
+
+    .calendar-embed .calendar-day {
+        min-height: 92px;
+        padding: 0.62rem;
+    }
 }