I’m implementing a FullCalendar instance on my website and facing an issue where the “Today” button is not functioning as expected. Despite my efforts, clicking the “Today” button does not navigate the calendar to the current date. My code setup for initializing the calendar is as follows:
var now = new Date();
// Ensure it doesn't go back to the previous day
var adjustedHour = now.getHours() - 2 < 0 ? 0 : now.getHours() - 2;
var scrollTime = adjustedHour.toString().padStart(2, '0') + ':00:00';
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
initialView: 'timeGrid',
dayCount: getDayCountForWindowSize(),
height: '99%',
titleFormat: { // Specify how the title should be formatted
month: 'short', // Full name of the month
year: '2-digit' // 4 digit year
},
allDaySlot: false,
scrollTime: scrollTime,
dayHeaderFormat: { weekday: 'short', day: '2-digit' }
});
calendar.render();
});
function getDayCountForWindowSize() {
var width = window.innerWidth;
if (width < 768) { // Mobile devices
console.log(3)
return 3;
} else if (width >= 768 && width < 1024) { // Tablets
return 5;
} else { // Desktops and larger screens
return 7; // Assuming a full week for larger screens
}
}
Debugging Steps Taken:
- Console Errors: Checked the browser’s console for errors and found none related to FullCalendar or its initialization.
- Event Listeners: Inspected the “Today” button for additional click
event listeners and found only those attached by FullCalendar. No
custom or conflicting event handlers are present. - CSS Inspection: Looked into potential CSS conflicts that could interfere with the button’s functionality, specifically pointer-events, but found no issues. The button’s styles seem to be in order.
- Element Isolation: While trying to inspect the element in the
browser, I noticed that the “Today” button does not get highlighted
separately.
Can someone help me with what I am missing here?