diff --git a/themes/lhs/assets/js/site.js b/themes/lhs/assets/js/site.js
index 454c425..a5843cd 100644
--- a/themes/lhs/assets/js/site.js
+++ b/themes/lhs/assets/js/site.js
@@ -1,3 +1,7 @@
+function titleCase(word) {
+  return word.charAt(0).toUpperCase() + word.substr(1).toLowerCase();
+}
+
 $(document).ready(function () {
   $(".navbar-burger").click(function () {
     $(".navbar-burger").toggleClass("is-active");
@@ -19,10 +23,6 @@ $(document).ready(function () {
     });
   }
 
-  function titleCase(word) {
-    return word.charAt(0).toUpperCase() + word.substr(1).toLowerCase();
-  }
-
   // 'printers' shortcode
   if ($('div#printer-status').length) {
     $.getJSON("https://api.leighhack.org/space.json", function (data) {
@@ -41,42 +41,3 @@ $(document).ready(function () {
     });
   }
 });
-
-function render_calendar() {
-  const calendar = new tui.Calendar('#calendar', {
-    defaultView: 'month',
-    isReadOnly: true,
-    useDetailPopup: true,
-    usageStatistics: false,
-    month: {
-      startDayOfWeek: 1,
-      visibleWeeksCount: 4,
-    },
-    calendars: [
-      {
-        id: '1',
-        name: 'Hackspace Events',
-        backgroundColor: '#d41246',
-      },
-    ],
-  });
-
-  $.getJSON('https://api.leighhack.org/events', function (data) {
-    data.forEach(function (event) {
-      calendar.createEvents([{
-        id: event['uid'],
-        calendarId: '1',
-        title: event['summary'],
-        body: event['description'],
-        state: 'Free',
-        dueDateClass: '',
-        start: event['start']['dateTime'],
-        end: event['end']['dateTime'],
-      }])
-    });
-  });
-  calendar.render();
-}
-
-
-
diff --git a/themes/lhs/layouts/page/calendar.html b/themes/lhs/layouts/page/calendar.html
index a9e4df8..cc76b27 100644
--- a/themes/lhs/layouts/page/calendar.html
+++ b/themes/lhs/layouts/page/calendar.html
@@ -7,18 +7,41 @@
 {{ end }}
 
 {{ define "extra_css" }}
-<link rel="stylesheet" href="https://uicdn.toast.com/calendar/latest/toastui-calendar.min.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://uicdn.toast.com/calendar/latest/toastui-calendar.min.js"></script>
-<script>
+<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 () {
-        render_calendar();
+        $.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" style="height: 600px"></div>
+<div id="calendar"></div>
 {{ end }}
\ No newline at end of file