_index.html

---
title: "Events"
date: 2020-02-03T22:26:16+11:00
draft: false
---
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.2.0/core/main.min.css" integrity="sha256-Lfe6+s5LEek8iiZ31nXhcSez0nmOxP+3ssquHMR3Alo=" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.2.0/daygrid/main.min.css" integrity="sha256-AVsv7CEpB2Y1F7ZjQf0WI8SaEDCycSk4vnDRt0L2MNQ=" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.2.0/list/main.min.css" integrity="sha256-saO3mkZVAcyqsfgsGMrmE7Cs/TLN1RgVykZ5dnnJKug=" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.2.0/core/main.min.js" integrity="sha256-GBryZPfVv8G3K1Lu2QwcqQXAO4Szv4xlY4B/ftvyoMI=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.2.0/daygrid/main.min.js" integrity="sha256-FT1eN+60LmWX0J8P25UuTjEEE0ZYvpC07nnU6oFKFuI=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.2.0/list/main.min.js" integrity="sha256-q57s73NpMCTQ4ZXqb1X5bIywrICySeB6WvYxFGfz/PA=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.2.0/google-calendar/main.min.js" integrity="sha256-c6/DYGU9nuQL+zHRFAsSo6hRLt/M/QolhlFj99aH3kw=" crossorigin="anonymous"></script>
<style>
/* fix calendar toolbar and make responsive */
.fc-header-toolbar {
    flex-wrap: wrap;
    justify-content: space-between;
}

/* next/prev buttons */
.fc-header-toolbar > .fc-center {
    margin: 0.5rem 0;
    white-space: nowrap;
    overflow: visible;
}

/* month text is full-width and centered. */
.fc-header-toolbar > .fc-left {
    /* full width across flexbox */
    width: 100%;
    flex-basis: 100%;
}

/* subscribe, list and month buttons */
.fc-header-toolbar > .fc-right {

}


/* stack buttons and center for small mobile devices. */
@media screen and (max-width: 374px) {
    .fc-header-toolbar {
        justify-content: center;
    }

    .fc-header-toolbar > .fc-left {
        text-align: center;
    }
}

/* collapse table entries to multiple rows at sizes below tablet. */
@media screen and (max-width: 767px) {
    .fc-list-item {
        display: grid;
        grid-template-columns: 1.5rem 1fr;
    }

    .fc-list-item-time {
        grid-column: 2;
        grid-row: 1;
        width: unset;
    }

    .fc-list-item-marker {
        grid-column: 1;
        grid-row: 1;
        width: unset;
    }

    td.fc-list-item-title {
        grid-column: 1 / span 2;
        grid-row: 2;
        border: none;
        padding-top: 0;

        box-sizing: border-box;
        width: 100%;
    }
}
</style>
<div class="columns is-centered">
    <div class="column is-8">
        <div class="section">
            <h1 class="title is-2">Events Calendar</h1>
            <div id="events-description">
                This calendar shows all currently planned UQCS events.
                While most of our events are held in person (and are catered)
                we're committed to making as much of our content available
                online. Recordings of technical talks and other events (where
                possible) are made available on
                <a href="https://link.uqcs.org/youtube">our YouTube channel</a>.
                You can also read more about our flagship competitive events
                (code jams, hackathons) <a href="/competitions/">here</a>.
            </div>
            <br/>
            <div id="uqcs-calendar"></div>
        </div>
    </div>
</div>
<script>
    const calendar = new FullCalendar.Calendar(document.getElementById('uqcs-calendar'), {
        plugins: ['googleCalendar', 'dayGrid', 'list'],
        defaultView: 'listTwoMonths',
        views: {
            listTwoMonths: {
                type: 'list',
                duration: { months: 2 },
                buttonText: 'list'
            }
        },
        height: 'auto',
        googleCalendarApiKey: 'AIzaSyC-c78Fu_Rw36zKXh9XvCpTOXvlNPXlyNc',
        eventSources: [
            { googleCalendarId: 'q3n3pce86072n9knt3pt65fhio@group.calendar.google.com' },
        ],
        header: {
            // note: CSS depends on these elements being left, center, right respectively.
            left: 'title',
            center: 'prev,next',
            right: 'subscribe listTwoMonths,dayGridMonth'
        },
        customButtons: {
            subscribe: {
                text: 'subscribe',
                click: function() {
                    window.open('https://calendar.google.com/calendar/embed?src=q3n3pce86072n9knt3pt65fhio%40group.calendar.google.com&ctz=Australia%2FBrisbane');
                }
            }
        },
        eventClick: function(info) {
            info.jsEvent.preventDefault(); // don't let the browser navigate
            if (info.event.url) {
                window.open(info.event.url); // open in new tab
            }
        },
    });
    calendar.render();
</script>