I am trying to get a form showing when a date is clicked in fullCalendar. I want all the events available on that date to show up in the form, EXCEPT those dates that have the title “excursion name . “+ Except Date”” and id “except_date”. So I want the form to show all of the events except the events that I have given id “except_date”.
var eventsOnDate = allEvents.filter(function(event) {
var eventStart = event.startStr; // Event start date (ISO string)
var eventEnd = event.endStr; // Event end date (ISO string, exclusive)
var except_dates = calendar.getEventById("except_date");
return info.dateStr >= eventStart && info.dateStr < eventEnd && event.id !== except_dates.id ;
});
The problem is that I get Uncaught SyntaxError: '#' not followed by identifier
when I try to run it in my browser.
This is my full code
global $wpdb;
$table_name = 'wp_booking_seasons';
//select all rows from the database
$results = $wpdb->get_results("SELECT * FROM $table_name");
ob_start(); // Start output buffering
?>
<div id="calendar"></div>
<div id="date-selection-form" style="display:none;">
<h3>Select Date Information</h3>
<form id="date-form">
<label for="event-title">Event Title:</label>
<input type="text" id="event-title" name="event-title" readonly style="width:400px"><br><br>
<!input type="text" id="event-title" name="event-title" required><br><br>
<input type="hidden" id="selected-date" name="selected-date">
<div id="time-slots">
<!-- Time slots will be dynamically inserted here -->
</div><br>
<input type="submit" value="Submit">
</form>
</div>
<script>
// show fullcalendar
document.addEventListener('DOMContentLoaded', function() {
// show calendar within the calendar div
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
//Set month view of the calendar
initialView: 'dayGridMonth',
//start the events array
events: [
<?php
//initialize an empty events array
$events= [];
//iterate through each row of events
foreach ($results as $row){
//INSERT SEASONAL EVENTS
//insert into events array the json_encoded (string version) of the title, startdate and end date. These correspond to the season in which the excursions are available for booking
$events[]= json_encode([
//fetch each row value from the database
'title'=> $row->excursion_name,
'start'=> $row->start_date,
'end'=> $row->end_date,
'timeSlots' => esc_js($row->time_slots)
]);
//INSERT EXCEPT DATES INTO THE CALENDAR
//check if the except_dates row is empty
if (!empty($row->except_dates)) {
$except_dates = json_decode($row->except_dates, true);
if (is_array($except_dates)) {
//fetch the values from the except_dates array
foreach ($except_dates as $key => $date) {
$events[] = json_encode([
//give except dates a new name
'id' => "except_date",
'title' => $row->excursion_name . " - Except Date",
'start' => $date,
'end' => $date,
]);
}
}
}
}
//join together all of the events with , into the events array
echo implode(",n", $events); ?>
],
dateClick: function(info) {
var dateForm = document.getElementById('date-selection-form');
dateForm.scrollIntoView({ behavior: 'smooth', block: 'start' });
document.getElementById('selected-date').value = info.dateStr;
document.getElementById('date-selection-form').style.display = 'block';
// Get all events on the calendar
var allEvents = calendar.getEvents();
// Filter events that match the clicked date
var eventsOnDate = allEvents.filter(function(event) {
var eventStart = event.startStr; // Event start date (ISO string)
var eventEnd = event.endStr; // Event end date (ISO string, exclusive)
var except_dates = calendar.getEventById("except_date");
return info.dateStr >= eventStart && info.dateStr < eventEnd && event.id !== except_dates.id ;
});
// Get the "Event Title" input field
var eventTitleInput = document.getElementById('event-title');
var timeSlotsDisplay = document.getElementById('time-slots');
// Display the event titles in the input field
if (eventsOnDate.length > 0) {
var eventTitles = [];
var timeSlots = [];
eventsOnDate.forEach(function(event) {
eventTitles.push(event.title);
// Extract time slots if available
if (event.extendedProps.timeSlots) {
var slots = event.extendedProps.timeSlots.split(","); // Assuming CSV format
timeSlots.push(...slots);
}
});
// Populate the event title and time slots
eventTitleInput.value = eventTitles.join(", ");
timeSlotsDisplay.innerHTML = "<strong>Available Time Slots:</strong><ul><li>" + timeSlots.join("</li><li>") + "</li></ul>";
} else {
// Clear fields if no events
eventTitleInput.value = "";
timeSlotsDisplay.innerHTML = "<strong>No time slots available for the selected date.</strong>";
}
//alert("Date clicked: " + info.dateStr); // Date string from FullCalendar
}
});
calendar.refetchEvents();
calendar.render();
});
</script>
<?php
return ob_get_clean(); // Return the buffered content