51 lines
1.9 KiB
HTML
51 lines
1.9 KiB
HTML
{% extends "authorized.html" %}
|
|
{% block links %}
|
|
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/@fullcalendar/core@4.2.0/main.min.css'>
|
|
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/@fullcalendar/daygrid@4.3.0/main.min.css'>
|
|
{% endblock links %}
|
|
{% block center %}
|
|
<h1>Cottage Calendar</h1>
|
|
<div class="mh-100">
|
|
<div id="calendar" class="fc"></div>
|
|
</div>
|
|
{% endblock center %}
|
|
{% block scripts %}
|
|
<script src='https://cdn.jsdelivr.net/npm/fullcalendar@6.1.15/index.global.min.js'></script>
|
|
<script src='https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js'></script>
|
|
<script src='https://cdn.jsdelivr.net/npm/uuid@8.3.2/dist/umd/uuidv4.min.js'></script>
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
var calendarEl = document.getElementById('calendar');
|
|
var calendar = new FullCalendar.Calendar(calendarEl, {
|
|
initialView: 'dayGridMonth',
|
|
themeSystem: 'bootstrap5',
|
|
selectable: true,
|
|
displayEventTime: true,
|
|
displayEventEnd: true,
|
|
slotDuration: {hours: 12},
|
|
slotLabelInterval: {hours: 24},
|
|
headerToolbar: {
|
|
left: 'prev,next today',
|
|
center: 'title',
|
|
right: 'dayGridMonth,timeGridWeek,timeGridDay,multiMonthYear'
|
|
},
|
|
events: '/getevents',
|
|
|
|
select: function (info) {
|
|
alert('selected ' + info.startStr + ' to ' + info.endStr);
|
|
let enddate = new Date(info.endStr);
|
|
enddate.setDate(enddate.getDate() - 1);
|
|
info.view.calendar.addEvent({
|
|
id: uuidv4(),
|
|
title: 'New Event',
|
|
start: info.startStr+'T14:00:00',
|
|
end: info.endStr+'T10:00:00',
|
|
allDay: false
|
|
});
|
|
}
|
|
});
|
|
|
|
calendar.render();
|
|
});
|
|
</script>
|
|
{% endblock scripts %} |