https://lafayette250.org/events/

1<!DOCTYPE html>
2<html lang="en">
3<head>
4  <meta charset="UTF-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6  <title>250 events</title>
7  <!-- FullCalendar CSS -->
8  <link href="https://cdn.jsdelivr.net/npm/[email protected]/index.global.min.css" rel="stylesheet">
9  <!-- Bootstrap CSS -->
10  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
11  <!-- Bootstrap Icons CSS -->
12  <link href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css" rel="stylesheet">
13  <style>
14    body {
15      font-family: Arial, sans-serif;
16      margin: 20px;
17    }
18    #calendar {
19      max-width: 900px;
20      margin: 0 auto;
21    }
22    .header-container {
23      display: flex;
24      justify-content: space-between;
25      align-items: center;
26      margin-bottom: 20px;
27    }
28    h1 {
29      margin: 0;
30    }
31    .back-link {
32      font-size: 1.5rem;
33      color: #007bff;
34      text-decoration: none;
35    }
36    .back-link:hover {
37      color: #0056b3;
38    }
39    .fc-daygrid-day-number {
40      color: black;
41      text-decoration: none;
42    }
43    .fc .fc-daygrid .fc-col-header-cell-cushion,
44    .fc .fc-timegrid .fc-col-header-cell-cushion {
45      color: black !important;
46      text-decoration: none;
47    }
48  </style>
49</head>
50<body>
51  <div class="header-container">
52    <h1>Lafayette250 events</h1>
53    <a href="https://www.lafayette250.org" class="back-link" title="Back to Main Page">
54      <i class="bi bi-house-door"></i>
55    </a>
56  </div>
57  <div id="calendar"></div>
58
59  <!-- Bootstrap Modal -->
60  <div class="modal fade" id="eventModal" tabindex="-1" aria-labelledby="eventModalLabel" aria-hidden="true">
61    <div class="modal-dialog">
62      <div class="modal-content">
63        <div class="modal-header">
64          <h5 class="modal-title" id="eventModalLabel">Event Details</h5>
65          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
66        </div>
67        <div class="modal-body">
68          <p><strong>Title:</strong> <span id="eventTitle"></span></p>
69          <p><strong>Date:</strong> <span id="eventDate"></span></p>
70          <p><strong>Description:</strong> <span id="eventDescription"></span></p>
71        </div>
72        <div class="modal-footer">
73          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
74        </div>
75      </div>
76    </div>
77  </div>
78
79  <!-- FullCalendar JS -->
80  

80<script src="https://cdn.jsdelivr.net/npm/[email protected]/index.global.min.js"></script>

80
81  <!-- Bootstrap JS -->
82  

82<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

82
83  

83<script>
84    document.addEventListener('DOMContentLoaded', function() {
85      var calendarEl = document.getElementById('calendar');
86      var calendar = new FullCalendar.Calendar(calendarEl, {
87        initialView: 'dayGridMonth',
88        headerToolbar: {
89          left: 'prev,next today',
90          center: 'title',
91          right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
92        },
93        views: {
94          timeGridWeek: {
95            type: 'timeGrid',
96            duration: { weeks: 1 },
97            buttonText: 'week'
98          },
99          timeGridDay: {
100            type: 'timeGrid',
101            duration: { days: 1 },
102            buttonText: 'day'
103          },
104          listWeek: {
105            type: 'list',
106            duration: { weeks: 1 },
107            buttonText: 'list'
108          }
109        },
110        events: [],
111        eventClick: function(info) {
112          document.getElementById('eventTitle').textContent = info.event.title;
113          document.getElementById('eventDate').textContent = info.event.start.toLocaleString('en-US', {
114            dateStyle: 'medium',
115            timeStyle: info.event.allDay ? undefined : 'short'
116          });
117          document.getElementById('eventDescription').innerHTML = info.event.extendedProps.description || 'No details';
118          var eventModal = new bootstrap.Modal(document.getElementById('eventModal'));
119          eventModal.show();
120        }
121      });
122
123      // Fetch events from JSON file
124      fetch('events.json')
125        .then(response => {
126          if (!response.ok) {
127            throw new Error('Network response was not ok');
128          }
129          return response.json();
130        })
131        .then(events => {
132          calendar.setOption('events', events);
133          calendar.render();
134        })
135        .catch(error => {
136          console.error('Error fetching events:', error);
137          alert('Failed to load events. Please try again later.');
138        });
139    });
140  </script>

140
141</body>

142<script>'undefined'=== typeof _trfq || (window._trfq = []);'undefined'=== typeof _trfd && (window._trfd=[]),_trfd.push({'tccl.baseHost':'secureserver.net'},{'ap':'cpsh-oh'},{'server':'p3plzcpnl509119'},{'dcenter':'p3'},{'cp_id':'10577017'},{'cp_cl':'8'}) // Monitoring performance to make your website faster. If you want to opt-out, please contact web hosting support.</script>

142<script src='https://img1.wsimg.com/traffic-assets/js/tccl.min.js'></script>

142</html>