97 lines
2.9 KiB
Plaintext
97 lines
2.9 KiB
Plaintext
|
{% extends "sco_page.j2" %}
|
||
|
|
{% import 'bootstrap/wtf.html' as wtf %}
|
||
|
|
|
||
|
|
{% block styles %}
|
||
|
|
{{super()}}
|
||
|
|
<link href="{{scu.STATIC_DIR}}/libjs/tui.calendar/toastui-calendar.min.css" rel="stylesheet" type="text/css" />
|
||
|
|
<link rel="stylesheet" href="{{ scu.STATIC_DIR }}/css/edt.css" type="text/css">
|
||
|
|
{% endblock %}
|
||
|
|
|
||
|
|
|
||
|
|
{% block app_content %}
|
||
|
|
|
||
|
|
<div class="tab-content">
|
||
|
|
<h2>Expérimental: emploi du temps</h2>
|
||
|
|
|
||
|
|
<div id="calendar" style="height: 900px;"></div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
{% endblock app_content %}
|
||
|
|
|
||
|
|
{% block scripts %}
|
||
|
|
{{ super() }}
|
||
|
|
<script src="{{scu.STATIC_DIR}}/libjs/tui.calendar/toastui-calendar.min.js"></script>
|
||
|
|
<script>
|
||
|
|
let hm_formatter = new Intl.DateTimeFormat('default', {
|
||
|
|
hour: '2-digit',
|
||
|
|
minute: '2-digit',
|
||
|
|
hour12: false
|
||
|
|
});
|
||
|
|
|
||
|
|
document.addEventListener('DOMContentLoaded', function() {
|
||
|
|
const Calendar = tui.Calendar;
|
||
|
|
const container = document.getElementById('calendar');
|
||
|
|
const options = {
|
||
|
|
defaultView: 'week',
|
||
|
|
calendars: [
|
||
|
|
{
|
||
|
|
id: 'cal1',
|
||
|
|
name: 'Personal',
|
||
|
|
backgroundColor: '#03bd9e',
|
||
|
|
borderColor: 'white',
|
||
|
|
},
|
||
|
|
],
|
||
|
|
isReadOnly: true,
|
||
|
|
// timezone: { zones: [ { timezoneName: 'Europe/Paris' } ] },
|
||
|
|
template: {
|
||
|
|
// ce template nous permet d'avoir du HTML dans le title de l'event
|
||
|
|
time: function(event) {
|
||
|
|
const date_start = new Date(event.start);
|
||
|
|
const start = hm_formatter.format(date_start);
|
||
|
|
return `<strong>${start}</strong> <span>${event.title}</span>`;
|
||
|
|
},
|
||
|
|
},
|
||
|
|
usageStatistics: false,
|
||
|
|
week: {
|
||
|
|
dayNames: [ "Dimanche", "Lundi", "Mardi", "Mercredi", "Jeudi", "Vendredi", "Samedi"],
|
||
|
|
eventView: ['time'],
|
||
|
|
hourStart: 7, // TODO préférence
|
||
|
|
hourEnd:24, // TODO préférence
|
||
|
|
showNowIndicator: true,
|
||
|
|
startDayOfWeek: 1,
|
||
|
|
taskView: false,
|
||
|
|
useDetailPopup:false, // on va pouvoir placer les liens scodoc
|
||
|
|
workweek: true, // TODO voir samedi travaillé
|
||
|
|
},
|
||
|
|
};
|
||
|
|
|
||
|
|
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=>{
|
||
|
|
calendar.createEvents(events);
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
</script>
|
||
|
|
{% endblock scripts %}
|