forked from ScoDoc/ScoDoc
EDT: navigation prev/next week
This commit is contained in:
parent
a043cb26ed
commit
d87432e8ac
@ -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;
|
||||
}
|
||||
|
||||
@ -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"><</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">></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>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user