Event Calendar - weekly view

If you encounter a display issue, adding this code to the header of your calendar script may be the solution:

// Checks if the request is an AJAX request
if (isset($_GET['ajax']) && $_GET['ajax'] === 'true' || 
	(!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest')) {
	// Send only the content of the chosen view
	if ($view === 'month') {
		renderMonthCalendar($month, $year, $events, $weekStart, $lang, $translations);
	} elseif ($view === 'week') {
		renderWeekView($month, $year, $week, $events, $weekStart, $lang, $translations, $workingStartTime, $workingEndTime);
	} elseif ($view === 'day') {
		renderDayViewWithHours($month, $year, $day, $events, $lang, $translations, $workingStartTime, $workingEndTime);
	} elseif ($view === 'year') {
		renderYearCalendar($year, $events, $weekStart, $lang, $translations);
	}
	exit;
}

Next, you can dynamically add the parameter "ajax=true" to the URLs by modifying the JavaScript as follows:

$(document).ready(function() {
    // Handling clicks on view change and navigation links
    $(document).on('click', '.view-switcher a, .calendar-navigation a, .day-number', function(event) {
        event.preventDefault();
        
        // Adding the ajax=true parameter to the URL
        let url = $(this).attr('href');
        url += (url.indexOf('?') > -1 ? '&' : '?') + 'ajax=true';
        
        // Load the page part via AJAX
        loadCalendar(url);
    });

    function loadCalendar(url) {
        toggleLoading(true);

        $('#container-calendar').load(`${url} #container-calendar`, function(response, status, xhr) {
            toggleLoading(false);

            if (status === "error") {
                displayError(xhr.status, xhr.statusText);
            } else {
                updateActiveLink(url);
            }
        });
    }

    function toggleLoading(isLoading) {
        $('#loading').toggle(isLoading);
    }

    function displayError(status, statusText) {
        $('#container-calendar').html(`Sorry, an error occurred: ${status} ${statusText}`);
    }

	function updateActiveLink(url) {
		// Remove the active class from all links in .view-switcher
		$('.view-switcher a').removeClass('active');

		// Extract the view parameter from the URL
		const urlParams = new URLSearchParams(url.split('?')[1]);
		const currentView = urlParams.get('view');

		// Add the active class to the link in .view-switcher corresponding to the current view
		if (currentView) {
			$(`.view-switcher a[href*="view=${currentView}"]`).addClass('active');
		}

		// Remove the active class from all links in .calendar-navigation
		$('.calendar-navigation a').removeClass('active');
	}
});

This approach ensures that traditional navigation will work even if JavaScript is disabled.

Thanks,
Djulia