Event Calendar - weekly view

It's an excellent suggestion.

I have made changes to both files. You need to add an additional list field named "category."

<label for="category">Category:</label>
<select id="category" name="category">
  <option value="meeting">Meeting</option>
  <option value="holiday">Holiday</option>
  <option value="workshop">Workshop</option>
  <option value="conference">Conference</option>
</select>

The value should correspond to a CSS class.

/* Category Styles */
.event.meeting { background-color: #3498db; color: #fff; }
.event.holiday { background-color: #2ecc71; color: #000; }
.event.workshop { background-color: #e74c3c; color: #fff; }
.event.conference { background-color: #f1c40f; color: #000; }

You can find an example of a rule in the view file.

Please note that you may need to update the CSS, as it has changed significantly since the first file.

Thanks, Djulia

You're a star. Thank you

Thanks! You can remove all the JavaScript (cf.applyTextColor()).

Hi MercerDesign,

Could you try this version? It adds Ajax navigation.

Thanks again,
Djulia

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

Hi, I need some events to just be 10 minutes long but when I change the end time the event disappears, can you help please?

Hi MercerDesign,

I updated the renderWeekView function in calendar_functions.php. Could you try testing this new version?

Thanks,
Djulia

The calendar just doesn't work now: https://rodneys46.sg-host.com/calendar/

I've reverted to the working version, but not using the updated AJAX navigation as that didn't work for me.