Ajout d'un datepicker intégré au modal

src/agenda_culturel/static/air-datepicker/fr.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _default = {
+  days: ['Dimanche', 'Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi'],
+  daysShort: ['Dim', 'Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam'],
+  daysMin: ['Di', 'Lu', 'Ma', 'Me', 'Je', 'Ve', 'Sa'],
+  months: ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre'],
+  monthsShort: ['Jan', 'Fév', 'Mars', 'Avr', 'Mai', 'Juin', 'Juil', 'Août', 'Sep', 'Oct', 'Nov', 'Dec'],
+  today: "Aujourd'hui",
+  clear: 'Effacer',
+  dateFormat: 'dd/MM/yyyy',
+  timeFormat: 'HH:mm',
+  firstDay: 1
+};
+exports.default = _default;

src/agenda_culturel/static/style.scss

@@ -1912,12 +1912,12 @@ dialog {
 }
 
 #quand-popup {
-    form {
-        aspect-ratio: 3/2;
-        display: grid;
-        row-gap: auto;
-        align-items: center;
-
+    article {
+        min-width: 30%;
+    }
+    .air-datepicker {
+        margin: 1em auto;
+        max-width: 20em;
     }
     footer {
         text-align: left;
@@ -1936,3 +1936,110 @@ dialog {
         }
     }
 }
+
+.air-datepicker {
+    @extend article;
+    --adp-background-color: var(--primary);
+    --adp-background-color-hover: var(--primary-hover);
+    --adp-background-color-active: var(--primary-focus);
+    --adp-background-color-in-range: rgba(92, 196, 239, .1);
+    --adp-background-color-in-range-focused: rgba(92, 196, 239, .2);
+    --adp-background-color-selected-other-month-focused: var(--primary-inverse);
+    --adp-background-color-selected-other-month: #0d4259;
+    --adp-color: var(--color);
+    --adp-color-secondary: var(--color);
+    --adp-accent-color: var(--contrast);
+    --adp-color-current-date: var(--adp-accent-color);
+    --adp-color-other-month: var(--muted-color);
+    --adp-color-disabled: #525252;
+    --adp-color-disabled-in-range: #6b6b6b;
+    --adp-color-other-month-hover: var(--primary-inverse);
+    --adp-border-color: var(--form-element-border-color);
+    --adp-border-color-inner: #3f3f3f;
+    --adp-border-color-inline: var(--form-element-border-color);
+    --adp-nav-arrow-color: var(--adp-color-secondary);
+    --adp-nav-color-secondary: var(--adp-color-secondary);
+    --adp-day-name-color: var(--primary);
+    --adp-day-name-color-hover: var(--primary);
+    --adp-cell-background-color-hover: var(--primary-hover);
+    --adp-cell-background-color-selected: var(--primary);
+    --adp-cell-background-color-selected-hover: var(--primary-hover);
+    --adp-cell-background-color-in-range: rgba(92, 196, 239, 0.1);
+    --adp-cell-background-color-in-range-hover: rgba(92, 196, 239, 0.2);
+    --adp-cell-border-color-in-range: var(--adp-cell-background-color-selected);
+    --adp-btn-color: var(--adp-accent-color);
+    --adp-btn-color-hover: red;
+    --adp-btn-background-color-hover: var(--adp-background-color-hover);
+    --adp-btn-background-color-active: var(--adp-background-color-active);
+    --adp-time-track-color: RGBA(23, 116, 155, .6);
+    --adp-time-track-color-hover: RGBA(23, 116, 155, .9);
+    --adp-time-day-period-color: var(--adp-color-secondary);
+    
+    .air-datepicker-overlay {
+    --adp-overlay-background-color: rgba(255, 255,255, .3);
+    }
+    
+    .air-datepicker--pointer:after {
+    background:var(--adp-background-color);
+    border-top: 1px solid var(--adp-border-color-inline);
+    border-right: 1px solid var(--adp-border-color-inline);
+    }
+    
+    .air-datepicker--buttons,
+    .air-datepicker--time {
+    border-top: 1px solid var(--adp-border-color-inner);
+    }
+    
+    .air-datepicker-nav {
+    border-bottom: 1px solid var(--adp-border-color-inner);
+    }
+    
+    .air-datepicker-time--row input[type=range]::-ms-thumb{
+    background: var(--adp-time-track-color);
+    border: 1px solid var(--adp-time-track-color);
+    }
+    
+    .air-datepicker-time--row input[type=range]::-webkit-slider-thumb{
+    background: var(--adp-time-track-color);
+    border: 1px solid var(--adp-time-track-color);
+    }
+    
+    .air-datepicker-time--row input[type=range]::-moz-range-thumb {
+    background: var(--adp-time-track-color);
+    border: 1px solid var(--adp-time-track-color);
+    }
+    
+    .air-datepicker-time--row input[type=range]:hover::-webkit-slider-thumb {
+    border-color: var(--adp-time-track-color-hover);
+    }
+    .air-datepicker-time--row input[type=range]:hover::-moz-range-thumb {
+    border-color: var(--adp-time-track-color-hover);
+    }
+    
+    .air-datepicker-time--row input[type=range]:hover::-ms-thumb {
+    border-color: var(--adp-time-track-color-hover);
+    }
+    
+    .air-datepicker-time--row input[type=range]:focus::-webkit-slider-thumb {
+    background: var(--adp-cell-background-color-selected);
+    border-color: var(--adp-cell-background-color-selected);
+    }
+    .air-datepicker-time--row input[type=range]:focus::-moz-range-thumb {
+    background: var(--adp-cell-background-color-selected);
+    border-color: var(--adp-cell-background-color-selected);
+    }
+    .air-datepicker-time--row input[type=range]:focus::-ms-thumb {
+    background: var(--adp-cell-background-color-selected);
+    border-color: var(--adp-cell-background-color-selected);
+    }
+    .air-datepicker-nav--title:hover,
+    .air-datepicker-cell:hover,
+    .air-datepicker-nav--action:hover
+     {
+        color: var(--primary-inverse);
+        svg path {
+            stroke: var(--primary-inverse);
+        }
+
+    }
+}

src/agenda_culturel/templates/agenda_culturel/page.html

@@ -23,6 +23,8 @@
     <meta property="og:locale" content="fr_FR" />
     <meta property="og:url" content="{{ request.build_absolute_uri }}" />
 
+    <link rel="stylesheet" href="{% static 'air-datepicker/air-datepicker.css' %}">
+    
     {% if debug %}
     <link rel="icon" type="image/svg+xml" href="{% static 'images/favicon-dev.svg' %}">
     {% else %}
@@ -148,7 +150,7 @@
             </header>
             <form method="post" action="{% url 'day_view_when' %}?{% block when_parameters %}{% endblock %}">
                 {% csrf_token %}
-                <input type="date" name="when" required="" id="when_picker" value="{% now "Y-m-d" %}">
+                <input type="date" name="when" required="" id="when_picker" value="{% if init_date %}{{ init_date|date:"Y-m-d" }}{% else %}{% now "Y-m-d" %}{% endif %}"">
                 <input type="submit" value="Voir les événements">
             </form>
             <footer>
@@ -164,4 +166,27 @@
         </article>
     </dialog>
 
+    <script>
+        var exports = {
+          default: {}
+        }
+    </script>
+    
+    <script src="{% static 'air-datepicker/air-datepicker.js' %}"></script>
+    <script src="{% static 'air-datepicker/fr.js' %}"></script>
+    <script>
+      new exports.AirDatepicker('#when_picker', {
+        locale: exports.default,
+        inline: true,
+        dateFormat: "yyyy-MM-dd",
+        selectedDates: [new Date("{% if init_date %}{{ init_date|date:"Y-m-d" }}{% else %}{% now "Y-m-d" %}{% endif %}")],
+        navTitles: {
+           days: 'MMMM yyyy'
+        }
+
+      })
+      console.log("oui");
+    </script>
+    </body>
+    </html>
 </body>

src/agenda_culturel/views.py

@@ -234,7 +234,8 @@ def month_view(request, year=None, month=None, cat=None):
         "month": cmonth.get_month_name(),
         "calendar": cmonth,
         "filter": filter,
-        "category": category
+        "category": category,
+        "init_date": cmonth.firstdate
     }
     return render(request, "agenda_culturel/page-month.html", context)
 
@@ -260,7 +261,7 @@ def week_view(request, year=None, week=None, home=False, cat=None):
 
     cweek = CalendarWeek(year, week, filter)
 
-    context = {"year": year, "week": week, "calendar": cweek, "filter": filter, "category": category}
+    context = {"year": year, "week": week, "calendar": cweek, "filter": filter, "category": category, "init_date": cweek.firstdate }
     if home:
         context["home"] = 1
     return render(request, "agenda_culturel/page-week.html", context)
@@ -319,6 +320,7 @@ def upcoming_events(request, year=None, month=None, day=None, neighsize=1, cat=N
         "calendar": cal,
         "now": now,
         "day": day,
+        "init_date": day,
         "filter": filter,
         "date_pred": day + timedelta(days=-neighsize - 1),
         "date_next": day + timedelta(days=neighsize + 1),