edward/agenda
1
0
Fork 0
Code Issues 16 Pull requests Packages Projects Releases Wiki Activity

Bug fix calendar next/prev buttons.

Browse source
This commit is contained in:
Edward Betts 2025-07-24 23:28:30 +01:00
parent 0e769c3de6
commit 8a9bad4bba
1 changed files with 66 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

95
templates/calendar.html
View file

@ -99,8 +99,7 @@
</div> </div>
<!-- TOAST UI Calendar JS -->
<!-- TOAST UI Calendar JS -->
<script src="https://uicdn.toast.com/calendar/latest/toastui-calendar.min.js"></script> <script src="https://uicdn.toast.com/calendar/latest/toastui-calendar.min.js"></script>
<script src="{{ url_for("static", filename="bootstrap5/js/bootstrap.bundle.min.js") }}"></script> <script src="{{ url_for("static", filename="bootstrap5/js/bootstrap.bundle.min.js") }}"></script>
@ -134,8 +133,6 @@
}, },
month: { month: {
startDayOfWeek: 1, // Monday startDayOfWeek: 1, // Monday
// We've removed `visibleWeeksCount: 6` to allow the calendar
// to dynamically show 4, 5, or 6 weeks as needed.
}, },
timezone: { timezone: {
zones: [{ zones: [{
@ -179,33 +176,66 @@
const calendarTitle = document.getElementById('calendar-title'); const calendarTitle = document.getElementById('calendar-title');
function updateCalendarTitle() { function updateCalendarTitle() {
const tzDate = calendar.getDate(); const currentView = calendar.getViewName();
const nativeDate = tzDate.toDate(); const currentDate = calendar.getDate().toDate();
let titleText = '';
const year = nativeDate.getFullYear();
const monthName = nativeDate.toLocaleDateString('en-GB', { month: 'long' }); if (currentView === 'month') {
const year = currentDate.getFullYear();
calendarTitle.textContent = `${monthName} ${year}`; const monthName = currentDate.toLocaleDateString('en-GB', { month: 'long' });
titleText = `${monthName} ${year}`;
} else if (currentView === 'week') {
// Manually calculate the start and end of the week
const startDayOfWeek = options.week.startDayOfWeek; // 1 for Monday
const day = currentDate.getDay(); // 0 for Sunday, 1 for Monday...
// Calculate days to subtract to get to the start of the week
const offset = (day - startDayOfWeek + 7) % 7;
const startDate = new Date(currentDate);
startDate.setDate(currentDate.getDate() - offset);
const endDate = new Date(startDate);
endDate.setDate(startDate.getDate() + 6);
const startMonth = startDate.toLocaleDateString('en-GB', { month: 'short' });
const endMonth = endDate.toLocaleDateString('en-GB', { month: 'short' });
if (startMonth === endMonth) {
titleText = `${startDate.getDate()} - ${endDate.getDate()} ${startMonth} ${startDate.getFullYear()}`;
} else {
titleText = `${startDate.getDate()} ${startMonth} - ${endDate.getDate()} ${endMonth} ${startDate.getFullYear()}`;
}
} else { // Day view
titleText = currentDate.toLocaleDateString('en-GB', { dateStyle: 'full' });
}
calendarTitle.textContent = titleText;
} }
// --- CORRECTED NAVIGATION LOGIC --- // --- View-aware navigation logic (no changes here) ---
prevBtn.addEventListener('click', () => { prevBtn.addEventListener('click', () => {
const currentDate = calendar.getDate().toDate(); const currentView = calendar.getViewName();
// Go to the previous month if (currentView === 'month') {
currentDate.setMonth(currentDate.getMonth() - 1); const currentDate = calendar.getDate().toDate();
// **Crucially, set the day to the 1st to align the view** currentDate.setMonth(currentDate.getMonth() - 1);
currentDate.setDate(1); currentDate.setDate(1);
calendar.setDate(currentDate); calendar.setDate(currentDate);
} else {
calendar.prev();
}
updateCalendarTitle(); updateCalendarTitle();
}); });
nextBtn.addEventListener('click', () => { nextBtn.addEventListener('click', () => {
const currentDate = calendar.getDate().toDate(); const currentView = calendar.getViewName();
// Go to the next month if (currentView === 'month') {
currentDate.setMonth(currentDate.getMonth() + 1); const currentDate = calendar.getDate().toDate();
// **Crucially, set the day to the 1st to align the view** currentDate.setMonth(currentDate.getMonth() + 1);
currentDate.setDate(1); currentDate.setDate(1);
calendar.setDate(currentDate); calendar.setDate(currentDate);
} else {
calendar.next();
}
updateCalendarTitle(); updateCalendarTitle();
}); });
@ -214,16 +244,23 @@
updateCalendarTitle(); updateCalendarTitle();
}); });
monthViewBtn.addEventListener('click', () => calendar.changeView('month')); monthViewBtn.addEventListener('click', () => {
weekViewBtn.addEventListener('click', () => calendar.changeView('week')); calendar.changeView('month');
dayViewBtn.addEventListener('click', () => calendar.changeView('day')); updateCalendarTitle();
});
weekViewBtn.addEventListener('click', () => {
calendar.changeView('week');
updateCalendarTitle();
});
dayViewBtn.addEventListener('click', () => {
calendar.changeView('day');
updateCalendarTitle();
});
// Initial setup // Initial setup
updateCalendarTitle(); updateCalendarTitle();
}); });
</script> </script>
</body> </body>
</html> </html>