ScoDoc/app/templates/formsemestre/edt.j2

109 lines
3.2 KiB
Plaintext
Raw Normal View History

{% 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: calc(100vh - 180px);"></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>`;
},
},
timezone: {
zones: [
{
timezoneName: 'CET', // TODO récupérer timezone serveur
},
],
},
usageStatistics: false,
week: {
dayNames: [ "Dimanche", "Lundi", "Mardi", "Mercredi", "Jeudi", "Vendredi", "Samedi"],
eventView: ['time'],
hourStart: {{ hour_start }},
hourEnd: {{ hour_end }},
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=>{
if (typeof events == 'string') {
// error !
alert("error: " + events)
} else {
calendar.createEvents(events);
}
});
});
</script>
{% endblock scripts %}