Something went wrong. Try again.
Central platform for European atproto.<cc> country community websites atproto.eu
community atproto
Something went wrong. Try again.
2.4 kB · 70 lines
Astro
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071---import type { CalendarEvent } from '../lib/atproto/events';import { useTranslations, type Lang } from '../i18n/ui';
interface Props { event: CalendarEvent; lang?: Lang; label?: string;}
const { event, lang = 'en' } = Astro.props;const t = useTranslations(lang);const tz = event.timezone || 'Europe/Amsterdam';
// Dutch date + 24h time on both language sides; shown in the event's own timezone.const start = new Date(event.startsAt);const end = event.endsAt ? new Date(event.endsAt) : undefined;// "25 Jun 2026" style, matching the ecosystem event cards (not numeric DD-MM-YYYY).const dateStr = start.toLocaleDateString('en-GB', { day: 'numeric', month: 'short', year: 'numeric', timeZone: tz,});const timeOpts = { hour: '2-digit', minute: '2-digit', timeZone: tz } as const;const startTime = start.toLocaleTimeString('nl-NL', timeOpts);const endTime = end ? end.toLocaleTimeString('nl-NL', timeOpts) : undefined;const cancelled = event.status === 'cancelled';---
<article class="event-card cal-event"> {event.thumb && <img class="cal-thumb" src={event.thumb} alt="" loading="lazy" />} <div class="cal-body"> <div class="event-top"> <span class="org-badge org-ours">{event.sourceHandle}</span> <span class="cal-when"> {dateStr} · {startTime}{endTime ? `–${endTime}` : ''} </span> </div> <h3 class="cal-name">{event.name}</h3> { (event.location || event.mode === 'virtual') && ( <p class="cal-loc">{event.location ?? 'Online'}</p> ) } {cancelled && <p class="cal-cancelled">{t('events.cancelled')}</p>} {event.description && <p class="cal-desc">{event.description}</p>} { event.upcoming && !cancelled ? ( <div class="cal-actions"> <button class="btn rsvp-btn" type="button" data-event-uri={event.uri} data-event-cid={event.cid} data-url={event.url} data-label-go={t('events.rsvp.go')} data-label-going={t('events.rsvp.going')} aria-pressed="false" >{t('events.rsvp.go')}</button> <a class="btn ghost" href={event.url} rel="noopener">{t('events.details')}</a> </div> ) : ( <div class="cal-actions"> <a class="btn ghost" href={event.url} rel="noopener">{t('events.details')}</a> </div> ) } </div></article>