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

75
templates/calendar.html
View file

@ -99,8 +99,7 @@
</div>
<!-- TOAST UI Calendar JS -->
<!-- TOAST UI Calendar JS -->
<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>
@ -134,8 +133,6 @@
},
month: {
startDayOfWeek: 1, // Monday
// We've removed `visibleWeeksCount: 6` to allow the calendar
// to dynamically show 4, 5, or 6 weeks as needed.
},
timezone: {
zones: [{
@ -179,33 +176,66 @@
const calendarTitle = document.getElementById('calendar-title');
function updateCalendarTitle() {
const tzDate = calendar.getDate();
const nativeDate = tzDate.toDate();
const currentView = calendar.getViewName();
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();
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...
calendarTitle.textContent = `${monthName} ${year}`;
// 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', () => {
const currentView = calendar.getViewName();
if (currentView === 'month') {
const currentDate = calendar.getDate().toDate();
// Go to the previous month
currentDate.setMonth(currentDate.getMonth() - 1);
// **Crucially, set the day to the 1st to align the view**
currentDate.setDate(1);
calendar.setDate(currentDate);
} else {
calendar.prev();
}
updateCalendarTitle();
});
nextBtn.addEventListener('click', () => {
const currentView = calendar.getViewName();
if (currentView === 'month') {
const currentDate = calendar.getDate().toDate();
// Go to the next month
currentDate.setMonth(currentDate.getMonth() + 1);
// **Crucially, set the day to the 1st to align the view**
currentDate.setDate(1);
calendar.setDate(currentDate);
} else {
calendar.next();
}
updateCalendarTitle();
});
@ -214,16 +244,23 @@
updateCalendarTitle();
});
monthViewBtn.addEventListener('click', () => calendar.changeView('month'));
weekViewBtn.addEventListener('click', () => calendar.changeView('week'));
dayViewBtn.addEventListener('click', () => calendar.changeView('day'));
monthViewBtn.addEventListener('click', () => {
calendar.changeView('month');
updateCalendarTitle();
});
weekViewBtn.addEventListener('click', () => {
calendar.changeView('week');
updateCalendarTitle();
});
dayViewBtn.addEventListener('click', () => {
calendar.changeView('day');
updateCalendarTitle();
});
// Initial setup
updateCalendarTitle();
});
</script>
</body>
</html>