working 3 tier approach

src/app/events/events.component.html

@@ -10,25 +10,35 @@
       </p>
     </div>
 
-    <div class="events-list">
-      <div class="event-card" *ngFor="let event of upcomingEvents">
-        <div class="event-date">
-          <span class="event-month">Jul</span>
-          <span class="event-day">12</span>
-          <span class="event-year">2026</span>
-        </div>
-        <div class="event-content">
-          <h3>{{ event.title }}</h3>
-          <p>{{ event.description }}</p>
-          <div class="event-meta">
-            <span class="event-location">
-              <span aria-hidden="true">📍</span> {{ event.location }}
-            </span>
-            <a href="#" class="event-rsvp">Learn More →</a>
+    @if (loading) {
+      <div class="schedule-loading">Loading events&hellip;</div>
+    } @else if (upcomingEvents.length === 0) {
+      <div class="schedule-empty">No upcoming events — check back later!</div>
+    } @else {
+      <div class="events-list">
+        <div class="event-card" *ngFor="let event of upcomingEvents">
+          <div class="event-date">
+            <span class="event-month">{{ event.date | date:'MMM' }}</span>
+            <span class="event-day">{{ event.date | date:'d' }}</span>
+            <span class="event-year">{{ event.date | date:'yyyy' }}</span>
           </div>
+          <div class="event-content">
+            <h3>{{ event.title }}</h3>
+            <p>{{ event.description }}</p>
+            <div class="event-meta">
+              <span class="event-location">
+                <span aria-hidden="true">&#x1F4CD;</span> {{ event.location }}
+              </span>
+              @if (event.rsvp_url) {
+                <a [href]="event.rsvp_url" class="event-rsvp" target="_blank" rel="noopener">RSVP &rarr;</a>
+              } @else {
+                <a href="#" class="event-rsvp">Learn More &rarr;</a>
+              }
+            </div>
+          </div>
+          <div class="event-icon" aria-hidden="true">{{ event.icon }}</div>
         </div>
-        <div class="event-icon" aria-hidden="true">{{ event.icon }}</div>
       </div>
-    </div>
+    }
   </div>
 </section>

src/app/events/events.component.ts

@@ -1,50 +1,32 @@
-import { Component } from '@angular/core';
-import { NgFor } from '@angular/common';
+import { Component, inject, OnInit } from '@angular/core';
+import { DatePipe, NgFor } from '@angular/common';
 
-interface Event {
-  date: string;
-  title: string;
-  description: string;
-  location: string;
-  icon: string;
-}
+import { EventService } from '../services/event.service';
+import { Event } from '../interfaces/event';
 
 @Component({
   selector: 'app-events',
   standalone: true,
-  imports: [NgFor],
+  imports: [DatePipe, NgFor],
   templateUrl: './events.component.html',
   styleUrl: './events.component.scss',
 })
-export class EventsComponent {
-  readonly upcomingEvents: Event[] = [
-    {
-      date: 'July 12, 2026',
-      title: 'Summer Sounds Festival',
-      description: 'A full day of live local music, community booths, and station meet-and-greet at the foothills park. Free admission — donations welcome.',
-      location: 'Foothills Community Park',
-      icon: '🎵',
-    },
-    {
-      date: 'August 5, 2026',
-      title: 'Annual Fundraiser Gala',
-      description: 'Our biggest fundraiser of the year! Enjoy dinner, silent auction, and performances from past guest artists.',
-      location: 'Mountain View Ballroom',
-      icon: '🎙️',
-    },
-    {
-      date: 'September 18, 2026',
-      title: 'Volunteer Open House',
-      description: 'Tour the studio, meet the team, and learn how you can help keep our free stream alive. New volunteers always welcome!',
-      location: 'KMTN Studio — 42 Pine St',
-      icon: '🤝',
-    },
-    {
-      date: 'October 30, 2026',
-      title: 'Harvest Moon Broadcast',
-      description: 'Special live broadcast from the harvest moon gathering. Featuring folk, bluegrass, and indigenous music.',
-      location: 'Ridgefield Amphitheater',
-      icon: '🌙',
-    },
-  ];
+export class EventsComponent implements OnInit {
+  private eventService = inject(EventService);
+
+  upcomingEvents: Event[] = [];
+  loading = true;
+
+  ngOnInit(): void {
+    this.eventService.getEvents(true).subscribe({
+      next: (data) => {
+        this.upcomingEvents = data;
+        this.loading = false;
+      },
+      error: () => {
+        this.loading = false;
+        this.upcomingEvents = [];
+      },
+    });
+  }
 }