Since you're using an "approved" checkbox field, you can simply exclude unapproved listings with:

customWhere: "approved = '1'"

// list of businesses
list($business_directoryRecords, $business_directoryMetaData) = getRecords(array(
  'tableName' => 'business_directory',
  'loadCreatedBy' => false,
));

// SEARCH BY WORD/PHRASE //
// for type-in search box
$searchOptions = array();
$searchOptions['keywords'] = @$_REQUEST['q'];
$searchOptions['perPage']  = "200";
$searchOptions['debugSql'] = "0"; // set to '1' to use debug

$searchTables = array();

$searchTables['business_directory'] = array(
  'viewerUrl'    => '/business/directory/directory-search-results.php',
  'titleField'   => 'business_name',
  'summaryField' => 'description',
  'field1'       => 'num',
  'field2'       => 'contact_names',
  'field3'       => 'phone_1',
  'field4'       => 'phone_2',
  'field5'       => 'address',
  'field6'       => 'town_city',
  'field7'       => 'business_website_url',
  'field8'       => 'alternate_website_url',
  'field9'       => 'alternate_website_url_title',
  'field10'      => 'approved',

  'searchFields' => array(
    'business_name',
    'description',
    'contact_names'
  ),

  // ONLY show approved listings
  'customWhere'  => "approved = '1'",
);

list($searchRows, $searchDetails) = searchMultipleTables($searchTables, $searchOptions);

This ensures that only listings with the approved checkbox checked are included in your multi-search results.

I hope this helps!

Djulia

The issue appears to stem from improper handling of dates that span across two years in the week view, particularly during the transition from week 52/53 of one year to week 1 of the following year. This can lead to inconsistencies in the values generated for $week_start, $start, and $end.

Here is a corrected version for the query in the week view:

// Creates a date for the start of the given week (ISO year and ISO week)
$date = new DateTime();
$date->setISODate($year, $week); // Sets the date using the ISO year and week

// Format for the start and end of the week
$week_start = $date->format($FORMAT_START); // First day of the week
$start = $date->modify('-1 week')->format($FORMAT_START); // Start of the previous week
$end = $date->modify('+2 weeks -1 day')->format($FORMAT_END); // End of the following week

// SQL query to find events overlapping this period
$query = "start_date <= '$end' AND end_date >= '$start'";

Thanks,
Djulia

Thanks for the suggestion! Supporting RRule is a great idea for handling complex recurring events like "the 3rd Wednesday of every month for 12 months."

To integrate support for the RRule standard, we can use the PHP Recurr library.

Step 1: Add Recurr to the project via Composer

composer require simshaun/recurr

Step 2: Pre-processing events

use Recurr\Rule;
use Recurr\Transformer\ArrayTransformer;

/**
 * Expands events based on their RRule (recurrence rule).
 *
 * This function processes an array of events, checks if each event has an RRule, 
 * and generates the corresponding occurrences based on the RRule. If an event 
 * does not have an RRule, it is added to the result as is. For events with 
 * valid recurrence rules, the function will expand them into multiple occurrences
 * and return the list of expanded events.
 *
 * @param array $events The array of events, where each event can have an optional 'rrule' key.
 * @return array The array of expanded events with start and end dates adjusted for each occurrence.
 */
function expandRRuleEvents(array $events): array {
    $expandedEvents = [];
    $transformer = new ArrayTransformer();

    foreach ($events as $event) {
        // If the event has no RRule, add it as is
        if (empty($event['rrule'])) {
            $expandedEvents[] = $event;
            continue;
        }

        // Extract original time (hours, minutes, seconds) from the start and end dates
        $originalStartTime = (new DateTime($event['start_date']))->format('H:i:s');
        $originalEndTime = (new DateTime($event['end_date']))->format('H:i:s');

        // Ensure the event has a valid recurrence rule
        try {
            $rule = new Rule($event['rrule'], new DateTime($event['start_date']));
            $occurrences = $transformer->transform($rule);

            foreach ($occurrences as $occurrence) {
                $newEvent = $event;

                // Adjust start and end dates by applying the original time
                $newEvent['start_date'] = $occurrence->getStart()->format('Y-m-d') . ' ' . $originalStartTime;
                $newEvent['end_date'] = $occurrence->getEnd()->format('Y-m-d') . ' ' . $originalEndTime;

                unset($newEvent['rrule']); // Remove the RRule key to avoid unnecessary duplicates

                $expandedEvents[] = $newEvent;
            }
        } catch (Exception $e) {
            // If the rule is invalid, log the error and skip the event
            error_log("RRule processing error: " . $e->getMessage());
        }
    }

    return $expandedEvents;
}

Before calling renderMonthCalendar, we can apply pre-processing to the events.

// Displays the monthly view with events for the month
$expandedEvents = expandRRuleEvents($events);
renderMonthCalendar($month, $year, $expandedEvents, $weekStart, $lang, $translations);

Here’s an example of an event with an RRule:

$events = [
    [
        'title' => 'Team Meeting',
        'start_date' => '2024-01-17 10:00:00',
        'end_date' => '2024-01-17 11:00:00',
        'description' => 'Monthly team sync-up',
        'location' => 'Conference Room',
        'rrule' => 'FREQ=MONTHLY;BYDAY=3WE;COUNT=12',           // RRule for the 3rd Wednesday of each month.
        //'rrule' => 'FREQ=WEEKLY;BYDAY=MO,WE,FR;COUNT=12',     // Repeat the event every Monday, Wednesday, and Friday for 12 occurrences.
        //'rrule' => 'FREQ=YEARLY;BYDAY=1MO;BYMONTH=1;COUNT=5', // Repeat the event on the first Monday of January, every year, for 5 years.
        //'rrule' => 'FREQ=WEEKLY;BYDAY=MO,WE,FR;COUNT=10',     // Repeat the event every Monday, Wednesday, and Friday for 10 occurrences.
    ],
];

With this integration, the calendar becomes compatible with complex rules defined by RRule while retaining the flexibility to handle simple or one-time events.

Thanks,
Djulia

Can you try with this version? Thanks!

Djulia

Have you tried with orderBy?

// load records from 'timeline'
list($timelineRecords, $timelineMetaData) = getRecords(array(
  'tableName'   => 'timeline',
  'loadUploads' => true,
  'orderBy'     => 'start_year DESC', // or ASC
  'allowSearch' => false,
));

Thanks,
Djulia

.calendar-week th, .calendar-week td {
	width: 80px;
	border: 1px solid #ccc;
	padding: 10px;
	text-align: left;
	word-wrap: break-word;
	vertical-align: top;
}

You can use user-agent analysis in the getCalendarParams() function :

/**
 * Retrieves and validates calendar parameters from the GET request.
 * Defaults to the current month, year, week, and day if parameters are not set.
 */
function getCalendarParams() {
    // Define default parameters
    $defaults = [
        'view'  => 'month',
        'year'  => date('Y'),
        'month' => date('m'),
        'week'  => date('W'),
        'day'   => date('d')
    ];

    // Retrieve GET parameter values, using default values if not set
    $view  = isset($_GET['view']) ? $_GET['view'] : null;
    $year  = isset($_GET['year']) ? intval($_GET['year']) : $defaults['year'];
    $month = isset($_GET['month']) ? intval($_GET['month']) : $defaults['month'];
    $week  = isset($_GET['week']) ? intval($_GET['week']) : $defaults['week'];
    $day   = isset($_GET['day']) ? intval($_GET['day']) : $defaults['day'];

    // List of allowed views
    $allowed_views = ['month', 'week', 'day', 'year'];

    // Device detection
    $user_agent = $_SERVER['HTTP_USER_AGENT'];
    if (is_null($view)) { // Only if the view is not specified in $_GET
        if (preg_match('/Mobile|Android|iPhone|iPad|iPod|BlackBerry|Windows Phone/i', $user_agent)) {
            $view = 'day'; // Default view for mobile
        } else {
            $view = 'week'; // Default view for desktop
        }
    }

    // Validate parameters
    $view = in_array($view, $allowed_views) ? $view : $defaults['view'];
    $year = ($year >= 1970 && $year <= date('Y') + 25) ? $year : $defaults['year'];
    $month = ($month >= 1 && $month <= 12) ? $month : $defaults['month'];
    $week = ($week >= 1 && $week <= 53) ? $week : $defaults['week'];
    $day = ($day >= 1 && $day <= 31) ? $day : $defaults['day'];

    // Return validated parameters as an array
    return [
        'view'  => $view,
        'year'  => $year,
        'month' => $month,
        'week'  => $week,
        'day'   => $day
    ];
}

However, if you're looking for a more accurate solution, the Mobile Detect library is commonly used to determine whether the user is accessing the site from a mobile device or a desktop.
https://github.com/serbanghita/Mobile-Detect

Thanks,
Djulia

[
  'title' => 'Annual Conference',
  'start_date' => '2024-11-13 13:00:00',
  'end_date' => '2024-11-13 13:10:00',
  'permalink' => 'annual-conference',
  'description' => 'Annual conference on technological innovations.',
  'location' => 'Main Auditorium',
  'category' => 'conference'
],

Could you try with these two files in example mode?

I also added an event in the array():

[
  'title' => 'Annual Conference',
  'start_date' => '2024-11-13 13:00:00',
  'end_date' => '2024-11-13 13:10:00',
  'permalink' => 'annual-conference',
  'description' => 'Annual conference on technological innovations.',
  'location' => 'Main Auditorium',
  'category' => 'conference'
],

Thanks,
Djulia

<script src="calendar.js" defer></script>

If you prefer to keep the current version of your calendar, you can try modifying the renderWeekView() function directly.

In calendar_functions.php, replace:

// Check if the event should be displayed
if (
	($isSameDay && $currentDate === $eventStart->format('Y-m-d') && $hour >= (int)$eventStart->format('H') && $hour < (int)$eventEnd->format('H')) ||
	(!$isSameDay && (
		($currentDate === $eventStart->format('Y-m-d') && $hour >= (int)$eventStart->format('H')) ||
		($currentDate === $eventEnd->format('Y-m-d') && $hour < (int)$eventEnd->format('H')) ||
		($currentDate > $eventStart->format('Y-m-d') && $currentDate < $eventEnd->format('Y-m-d'))
	))
) {
	renderWeekEvent($event, $eventTimeDisplay, $currentHour, $workingStart, $workingEnd);
}

with:

// Check if the event should be displayed
if (
	// Case 1: Short event on the same day (e.g., 5 minutes)
	($isSameDay && $currentDate === $eventStart->format('Y-m-d') && 
		$currentHour >= $eventStart && $currentHour <= $eventEnd) ||

	// Case 2: Long event on the same day (e.g., 9:00 AM to 5:00 PM)
	($isSameDay && $currentDate === $eventStart->format('Y-m-d') && (
		$hour >= (int)$eventStart->format('H') && $hour <= (int)$eventEnd->format('H')
	)) ||

	// Case 3: Multi-day event
	(!$isSameDay && (
		($currentDate === $eventStart->format('Y-m-d') && $hour >= (int)$eventStart->format('H')) || // Start day
		($currentDate === $eventEnd->format('Y-m-d') && $hour < (int)$eventEnd->format('H')) ||      // End day
		($currentDate > $eventStart->format('Y-m-d') && $currentDate < $eventEnd->format('Y-m-d'))   // Intermediate days
	))
) {
	renderWeekEvent($event, $eventTimeDisplay, $currentHour, $workingStart, $workingEnd);
}

It should also work.

Thanks,
Djulia

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

Thanks,
Djulia

// 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

Thanks again,
Djulia

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

I added a link to switch to day view for the corresponding numbers, thinking it would make it easier to use.

Thanks, Djulia

You can try with:

// Display navigation for the day (buttons to go to the previous or next day)
renderDayNavigation($month, $year, $day, $lang, $translations);

// Display the daily view with events, including the hours of the day
renderDayViewWithHours($month, $year, $day, $events, $lang, $translations, $workingStartTime, $workingEndTime);

Thanks,