EDT: navigation prev/next week

This commit is contained in:
Emmanuel Viennet 2023-11-14 23:16:25 +01:00
parent a043cb26ed
commit d87432e8ac
2 changed files with 98 additions and 41 deletions

View File

@ -1,34 +1,58 @@
.toastui-calendar-template-time { .toastui-calendar-template-time {
padding: 4px; padding: 4px;
word-break: break-all; word-break: break-all;
white-space: normal !important; white-space: normal !important;
align-items: normal !important; align-items: normal !important;
font-size: 12pt; font-size: 12pt;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
} }
.group-name { .group-name {
color:rgb(25, 113, 25); color: rgb(25, 113, 25);
} }
.group-edt { .group-edt {
color: red; color: red;
background-color: yellow; background-color: yellow;
} }
#renderRange {
margin-left: 16px;
}
.toastui-calendar-timegrid { .toastui-calendar-timegrid {
height: 100% !important; height: 100% !important;
min-height: auto !important; min-height: auto !important;
} }
.toastui-calendar-time{ .toastui-calendar-time {
height: calc(100% - 44px) !important; height: calc(100% - 44px) !important;
} }
.toastui-calendar-week-view-day-names, .toastui-calendar-time { .toastui-calendar-week-view-day-names,
overflow: hidden !important; .toastui-calendar-time {
overflow: hidden !important;
} }
.ic-arrow-line-left { .btn {
background: url('../icons/ic-arrow-line-left.png') no-repeat; 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;
} }

View File

@ -18,10 +18,10 @@
<button type="button" class="btn btn-default btn-sm move-today" <button type="button" class="btn btn-default btn-sm move-today"
data-action="move-today">Aujourd'hui</button> data-action="move-today">Aujourd'hui</button>
<button type="button" class="btn btn-default btn-sm move-day" data-action="move-prev"> <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>
<button type="button" class="btn btn-default btn-sm move-day" data-action="move-next"> <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> </button>
</span> </span>
<span id="renderRange" class="render-range"></span> <span id="renderRange" class="render-range"></span>
@ -41,7 +41,12 @@ let hm_formatter = new Intl.DateTimeFormat('default', {
hour12: false hour12: false
}); });
function getDataAction(target) {
return target.dataset ? target.dataset.action : target.getAttribute('data-action');
}
document.addEventListener('DOMContentLoaded', function() { document.addEventListener('DOMContentLoaded', function() {
document.getElementById('menu-navi').addEventListener('click', onClickNavi);
const Calendar = tui.Calendar; const Calendar = tui.Calendar;
const container = document.getElementById('calendar'); const container = document.getElementById('calendar');
const options = { const options = {
@ -86,25 +91,7 @@ document.addEventListener('DOMContentLoaded', function() {
}; };
const calendar = new Calendar(container, options); 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`) fetch(`${SCO_URL}/../api/formsemestre/{{formsemestre.id}}/edt`)
.then(r=>{return r.json()}) .then(r=>{return r.json()})
.then(events=>{ .then(events=>{
@ -115,6 +102,52 @@ document.addEventListener('DOMContentLoaded', function() {
calendar.createEvents(events); 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> </script>