I created a small calendar application using Google Calendar API via Service Account. Despite some difficulties, I managed to write working code! However, there was a problem – the code almost works.
My goal was for the code to display only 6 days, skipping Sunday. Below these days were to generate buttons with hours. When I clicked on any of the buttons, it was to add an event to my Google calendar at a specific time. In addition, if an event at a particular hour already exists, the button for that hour should disappear. This is where the problem arises.
If I select an hour of, say, 1 p.m., I check my Google calendar and see that the booking exists and runs from 1 to 3 p.m. The button for 1 p.m. disappears, but the button for 2 p.m. is still visible, which surprises me. I guess the problem lies in my if condition, but I don’t know how to write it correctly?
if (isset($reservedHours[$day->format('l')][$hour])) {
echo ' disabled ';
}
In addition, I would like to be able to update the calendar for another week, but unfortunately I have no idea how to do it. I tried using Ajax, but unfortunately my code limits me:
$startDate = new DateTime('now');
$endDate = (new DateTime('now'))->modify('+6 days');
and I don’t know how limit the display to 6 days in another way
index.php
<?php
require_once 'vendor/autoload.php';
$calendarId = '[email protected]';
$keyFilePath = 'file.json';
$client = new Google_Client();
$client->setAuthConfig($keyFilePath);
$client->setScopes([Google_Service_Calendar::CALENDAR_READONLY]);
$service = new Google_Service_Calendar($client);
$startDate = new DateTime('now');
$endDate = (new DateTime('now'))->modify('+6 days');
$events = $service->events->listEvents($calendarId, [
'timeMin' => $startDate->format(DATE_RFC3339),
'timeMax' => $endDate->format(DATE_RFC3339),
]);
$reservedHours = [];
foreach ($events->getItems() as $event) {
$startDateTime = new DateTime($event->start->dateTime);
$day = $startDateTime->format('l');
$hour = $startDateTime->format('G');
$reservedHours[$day][$hour] = true;
}
$day = $startDate;
?>
<button id="nextWeekButton" onclick="updateCalendar()">Next Week</button>
<div id="calendarContainer">
<div id="row">
<div class="apud">
<?php
echo '<form action="make_reservation.php" method="post">';
while ($day <= $endDate) {
echo '<div id="calendar-cell">';
if($day->format('D') != 'Sun'){
echo '<div class="daysdaysdays">' . $day->format('D') .'<h1>'. $day->format('j') . '</h1></div>';
for ($hour = 10; $hour <= 17; $hour++) {
echo '<div class="calendar-cell-hours">';
echo '<div class="radio-toolbar">';
echo '<input type="radio" id="' . $day->format('Y-m-d') . 'T' . str_pad($hour, 2, '0', STR_PAD_LEFT) . ':00:00" "
name="reservation[]" value="' . $day->format('Y-m-d') . 'T' . str_pad($hour, 2, '0', STR_PAD_LEFT) . ':00:00" ';
if (isset($reservedHours[$day->format('l')][$hour])) {
echo ' disabled ';
}
echo '><label for="' . $day->format('Y-m-d') . 'T' . str_pad($hour, 2, '0', STR_PAD_LEFT) . ':00:00"> ';
echo $hour.':00 </label></div>';
echo '</div>';
}
}
echo '</div>';
$day->modify('+1 day');
}
?>
<input type="submit" value="Make Reservations" id="submitButton" style="display: none;">
</form>
</div></div>
<label for="name" id="nameLabel" style="display: none;">Name:</label><input type="text" id="name" name="name" required style="display: none;"><br>
<label for="surname" id="surnameLabel" style="display: none;">Surname:</label><input type="text" id="surname" name="surname" required style="display: none;"><br>
<label for="phone" id="phoneLabel" style="display: none;">Phone:</label><input type="tel" id="phone" name="phone" required style="display: none;"><br>
</div>
<button type="button" onclick="showForm();">NEXT</button>
Here I tried to update the calendar for another week, update-calendar.php looks the same as index.php
But I think this code limits me:
$startDate = new DateTime('now');
$endDate = (new DateTime('now'))->modify('+6 days');
Ajax in index.php:
<script>
function updateCalendar() {
$.ajax({
type: 'GET',
url: 'update_calendar.php',
success: function (data) {
$('#calendarContainer').html(data);
},
error: function () {
alert('Error updating calendar');
}
});
}
$('#updateButton').click(function () {
updateCalendar();
});
</script>
