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

Thank you. I've tried that but it didn't work on the site, I've reverted to the previous version which is working really nicely.

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?

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.