EDT: navigation prev/next week

app/static/css/edt.css

@@ -1,34 +1,58 @@
-
 .toastui-calendar-template-time {
-    padding: 4px;
-    word-break: break-all;
-    white-space: normal !important;
-    align-items: normal !important;
-    font-size: 12pt;
-    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+  padding: 4px;
+  word-break: break-all;
+  white-space: normal !important;
+  align-items: normal !important;
+  font-size: 12pt;
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
 }
 .group-name {
-    color:rgb(25, 113, 25);
+  color: rgb(25, 113, 25);
 }
 .group-edt {
-    color: red;
-    background-color: yellow;
+  color: red;
+  background-color: yellow;
 }
 
+#renderRange {
+  margin-left: 16px;
+}
 .toastui-calendar-timegrid {
-    height: 100% !important;
-    min-height: auto !important;
+  height: 100% !important;
+  min-height: auto !important;
 }
-.toastui-calendar-time{
-    height: calc(100% - 44px) !important;
+.toastui-calendar-time {
+  height: calc(100% - 44px) !important;
 }
-.toastui-calendar-week-view-day-names, .toastui-calendar-time {
-    overflow: hidden !important;
+.toastui-calendar-week-view-day-names,
+.toastui-calendar-time {
+  overflow: hidden !important;
 }
 
-.ic-arrow-line-left {
-    background: url('../icons/ic-arrow-line-left.png') no-repeat;
+.btn {
+  border-radius: 25px;
+  border-color: #ddd;
 }
-.ic-arrow-line-right {
-    background: url('../icons/ic-arrow-line-right.png') no-repeat;
+
+.btn:hover {
+  border: solid 1px #bbb;
+  background-color: #fff;
+}
+
+.btn:active {
+  background-color: #f9f9f9;
+  border: solid 1px #bbb;
+  outline: none;
+}
+
+.btn:disabled {
+  background-color: #f9f9f9;
+  border: solid 1px #ddd;
+  color: #bbb;
+}
+
+.btn:focus:active,
+.btn:focus,
+.btn:active {
+  outline: none;
 }

app/templates/formsemestre/edt.j2

@@ -18,10 +18,10 @@
             <button type="button" class="btn btn-default btn-sm move-today"
                 data-action="move-today">Aujourd'hui</button>
             <button type="button" class="btn btn-default btn-sm move-day" data-action="move-prev">
-                <i class="calendar-icon ic-arrow-line-left" data-action="move-prev"></i>
+                <i class="calendar-icon ic-arrow-line-left" data-action="move-prev">&lt;</i>
             </button>
             <button type="button" class="btn btn-default btn-sm move-day" data-action="move-next">
-                <i class="calendar-icon ic-arrow-line-right" data-action="move-next"></i>
+                <i class="calendar-icon ic-arrow-line-right" data-action="move-next">&gt;</i>
             </button>
         </span>
         <span id="renderRange" class="render-range"></span>
@@ -41,7 +41,12 @@ let hm_formatter = new Intl.DateTimeFormat('default', {
     hour12: false
 });
 
+function getDataAction(target) {
+    return target.dataset ? target.dataset.action : target.getAttribute('data-action');
+}
+
 document.addEventListener('DOMContentLoaded', function() {
+    document.getElementById('menu-navi').addEventListener('click', onClickNavi);
     const Calendar = tui.Calendar;
     const container = document.getElementById('calendar');
     const options = {
@@ -86,25 +91,7 @@ document.addEventListener('DOMContentLoaded', function() {
     };
 
     const calendar = new Calendar(container, options);
-    //let events = [
-    //    {
-    //        id: "12456",
-    //        start:"2023-11-10T09:30",
-    //        end:"2023-11-10T11:30",
-    //        backgroundColor:"lightblue",
-    //        color: "red", // couleur du texte
-    //        location: "quelque part",
-    //        title:'Essai <a href="">saisir</a>',
-    //    },
-    //    {
-    //        id: "12457",
-    //        start:"2023-11-10T09:30",
-    //        end:"2023-11-10T11:50",
-    //        backgroundColor:"lightgreen",
-    //        color: "blue", // couleur du texte
-    //        title:'TD groupe 2',
-    //    },
-    //];
+
     fetch(`${SCO_URL}/../api/formsemestre/{{formsemestre.id}}/edt`)
 		.then(r=>{return r.json()})
 		.then(events=>{
@@ -115,6 +102,52 @@ document.addEventListener('DOMContentLoaded', function() {
                 calendar.createEvents(events);
             }
         });
+
+    function formatDate(date) {
+        let year = date.getFullYear();
+        let month = (date.getMonth() + 1).toString().padStart(2, '0'); // Months are zero-indexed in JavaScript
+        let day = date.getDate().toString().padStart(2, '0');
+        return `${day}/${month}/${year}`;
+    }
+
+    function setRenderRangeText() {
+        var renderRange = document.getElementById('renderRange');
+        var options = calendar.getOptions();
+        var viewName = calendar.getViewName();
+
+        var html = [];
+        if (viewName === 'day') {
+            html.push(currentCalendarDate('YYYY.MM.DD'));
+        } else if (viewName === 'month' &&
+            (!options.month.visibleWeeksCount || options.month.visibleWeeksCount > 4)) {
+            html.push(currentCalendarDate('YYYY.MM'));
+        } else {
+            html.push(formatDate(calendar.getDateRangeStart()));
+            html.push(' - ');
+            html.push(formatDate(calendar.getDateRangeEnd()));
+        }
+        renderRange.innerHTML = html.join('');
+    }
+    function onClickNavi(e) {
+        var action = getDataAction(e.target);
+
+        switch (action) {
+            case 'move-prev':
+                calendar.prev();
+                break;
+            case 'move-next':
+                calendar.next();
+                break;
+            case 'move-today':
+                calendar.today();
+                break;
+            default:
+                return;
+        }
+
+        setRenderRangeText();
+        // setSchedules();
+    }
 });
 
 </script>