Інтеграція Google Calendar API з сайтом

Інтеграція Google Calendar API з веб-сайтом

Google Calendar API використовується для відображення розкладу подій на сайті, синхронізації бронювань та зустрічей, створення подій від імені користувача. Охоплює завдання від простого віджета з подіями до повнофункціональної системи планування.

Публічний календар без авторизації

Для відображення публічних подій достатньо API Key без OAuth:

async function getPublicEvents(calendarId: string): Promise<CalendarEvent[]> {
  const resp = await fetch(
    `https://www.googleapis.com/calendar/v3/calendars/${encodeURIComponent(calendarId)}/events` +
    `?key=${process.env.GOOGLE_API_KEY}` +
    `&timeMin=${new Date().toISOString()}` +
    `&orderBy=startTime&singleEvents=true&maxResults=20`
  );

  const data = await resp.json();
  return data.items.map((item: any) => ({
    id:       item.id,
    title:    item.summary,
    start:    item.start.dateTime ?? item.start.date,
    end:      item.end.dateTime ?? item.end.date,
    location: item.location,
    url:      item.htmlLink,
  }));
}

OAuth2 для особистих календарів

// Створення події в календарі користувача після його авторизації
$client = new Google\Client();
$client->setAccessToken($userAccessToken);

$calendar  = new Google\Service\Calendar($client);
$eventData = new Google\Service\Calendar\Event([
    'summary'  => $booking->service->name,
    'location' => $booking->location,
    'start'    => ['dateTime' => $booking->starts_at->toRfc3339String(), 'timeZone' => 'Europe/Moscow'],
    'end'      => ['dateTime' => $booking->ends_at->toRfc3339String(),   'timeZone' => 'Europe/Moscow'],
    'reminders' => [
        'useDefault' => false,
        'overrides'  => [['method' => 'popup', 'minutes' => 60]],
    ],
]);

$event = $calendar->events->insert('primary', $eventData);

Кнопка "Додати в Google Calendar"

Без API — найпростіший варіант для подій:

function getGoogleCalendarUrl(event: Event): string {
  const params = new URLSearchParams({
    action:   'TEMPLATE',
    text:     event.title,
    dates:    `${formatDate(event.start)}/${formatDate(event.end)}`,
    details:  event.description,
    location: event.location ?? '',
  });
  return `https://calendar.google.com/calendar/render?${params}`;
}

function formatDate(date: Date): string {
  return date.toISOString().replace(/[-:]/g, '').split('.')[0] + 'Z';
}

Графік

Віджет публічних подій: 1 день. OAuth2 з записом в особистий календар: 2–3 дні.