jmplace/ScoDoc-Lille
1
0
Fork 0
forked from ScoDoc/ScoDoc
Code Issues Pull Requests Projects Releases Wiki Activity

EDT: navigation prev/next week

Browse Source
This commit is contained in:
Emmanuel Viennet 2023-11-14 23:16:25 +01:00 committed by Iziram
parent b673ca2667
commit fbc501bf3c
2 changed files with 98 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
app/static/css/edt.css
View File

@ -1,4 +1,3 @@
.toastui-calendar-template-time {
padding: 4px;
word-break: break-all;
@ -15,6 +14,9 @@
background-color: yellow;
}
#renderRange {
margin-left: 16px;
}
.toastui-calendar-timegrid {
height: 100% !important;
min-height: auto !important;
@ -22,13 +24,35 @@
.toastui-calendar-time {
height: calc(100% - 44px) !important;
}
.toastui-calendar-week-view-day-names, .toastui-calendar-time {
.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;
}

75
app/templates/formsemestre/edt.j2
View File

@ -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>