website-hugo/themes/lhs/layouts/page/calendar.html

{{ define "title" }}
{{ .Title }}
{{ end }}

{{ define "subtitle" }}
{{ .Params.subtitle }}
{{ end }}

{{ define "extra_css" }}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@event-calendar/build@2.4.1/event-calendar.min.css">

{{ end }}

{{ define "extra_js" }}
<script src="https://cdn.jsdelivr.net/npm/@event-calendar/build@2.4.1/event-calendar.min.js" type="application/javascript"></script>
<script type="application/javascript">
    var events = [];
    $(document).ready(function () {
        $.getJSON('https://api.leighhack.org/events', function (data) {
            data.forEach(function (event) {
                events.push({
                    id: event['uid'],
                    title: event['summary'],
                    body: event['description'],
                    state: 'Free',
                    dueDateClass: '',
                    start: event['start']['dateTime'],
                    end: event['end']['dateTime'],
                })
            });
            let ec = new EventCalendar(document.getElementById('calendar'), {
                view: 'listMonth',
                events: events,
                headerToolbar: {
                    start: 'prev,next today',
                    center: 'title',
                    end: 'dayGridMonth, listMonth'
                },
            });
        });
    });
</script>
{{ end }}

{{ define "content" }}
<div id="calendar"></div>
{{ end }}