---
layout: layouts/base.njk
title: Events
---

<h1>Upcoming Events</h1>

<p>You can also view our events on <a href="https://platform.openmeet.net/groups/devict" title="devICT Events on OpenMeet">OpenMeet</a>.</p>

<ul id="events-list" class="events-list">
  <li>Loading events&hellip;</li>
</ul>

<script>
  const list = document.getElementById('events-list');
  const dateFormat = new Intl.DateTimeFormat('en-US', {
    weekday: 'short', month: 'short', day: 'numeric',
    hour: 'numeric', minute: '2-digit',
  });

  fetch('https://events.devict.org/api/upcoming')
    .then((res) => res.json())
    .then((events) => {
      if (!events.length) {
        list.innerHTML = '<li>No upcoming events. Check back soon!</li>';
        return;
      }
      list.innerHTML = events.map((event) => `
        <li class="event">
          <a href="https://platform.openmeet.net/events/${event.slug}">${event.name}</a>
          <span class="event-date">${dateFormat.format(new Date(event.startDate))}</span>
          ${event.location ? `<span class="event-location">${event.location.split(',')[0]}</span>` : ''}
        </li>
      `).join('');
    })
    .catch(() => {
      list.innerHTML = '<li>Failed to load events. Try <a href="https://platform.openmeet.net/groups/devict">our OpenMeet page</a>.</li>';
    });
</script>