Embed a calendar with all the events on the Calendar page (#252)

* embed a calendar with the events on the community calendars page

* Dont open zoom window on click

* add colors to the calendar

* use vega color scheme category10 to generate calendar colors

* make some UI changes

Author: MridulS

layouts/calendars/list.html

@@ -36,6 +36,47 @@ <h5 class="subtitle is-5 is-muted">{{ .Params.Subtitle }}</h5>
           {{ end }}
         </div>
 
+        <br>
+        <script src="https://cdn.jsdelivr.net/npm/vega@5"></script>
+        <link href='https://cdn.jsdelivr.net/npm/fullcalendar@5.11.0/main.min.css' rel='stylesheet' />
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/ical.js/1.4.0/ical.min.js"></script>
+        <script src='https://cdn.jsdelivr.net/npm/fullcalendar@5.11.0/main.min.js'></script>
+        <script src="https://cdn.jsdelivr.net/npm/@fullcalendar/icalendar@5.11.0/main.global.min.js"></script>
+
+        <script>
+          document.addEventListener('DOMContentLoaded', function() {
+            var cal_colors = vega.scheme('category10');
+            var community_calendar = document.getElementById('community_calendar');
+            var calendar = new FullCalendar.Calendar(community_calendar, {
+                aspectRatio: 1,
+                timeZone: 'local',
+                initialView: 'dayGridMonth',
+                headerToolbar: {
+                  left: "prev,next today",
+                  center: "title",
+                  right: "dayGridMonth,timeGridWeek,listWeek",
+                },
+                eventSources: [
+                {{ range $key, $value := $.Site.Data.calendars }}
+                    {
+                        url: '{{ $key }}.ics',
+                        format: 'ics',
+                        color: cal_colors.shift(),
+                    },
+                {{ end }}
+                ],
+                eventClick: function(info) {
+                    info.jsEvent.preventDefault();
+                    alert('Event: ' + info.event.title + '\n' + info.event.extendedProps.description + '\n' + 'URL: ' +info.event.url);
+                },
+                eventDisplay: 'block',
+            });
+            calendar.render();
+          });
+
+        </script>
+        <div id='community_calendar'></div>
+
         <h3 id="subscribe-google-calendar">Google Calendar</h3>
         Instructions from <a href="https://support.google.com/calendar/answer/37100?hl=en&co=GENIE.Platform%3DDesktop">the Google Calendar docs</a>:
         <ol>