Cleanup calendar CSS/JS load order

This commit is contained in:
2023-11-07 16:30:55 +00:00
parent f571db1a2c
commit 5f388b3826
3 changed files with 46 additions and 34 deletions

View File

@@ -22,5 +22,37 @@ $(document).ready(function () {
}
});
function render_calendar() {
const calendar = new tui.Calendar('#calendar', {
defaultView: 'month',
isReadOnly: true,
useDetailPopup: true,
usageStatistics: false,
calendars: [
{
id: '1',
name: 'Hackspace Events',
backgroundColor: '#ff0000',
},
],
});
$.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();
}

View File

@@ -3,6 +3,8 @@
<head>
{{ partial "head.html" . }}
{{ block "extra_css" . }}
{{ end }}
</head>
<body id="top" class="">
@@ -62,6 +64,8 @@
{{ partial "footer.html" .}}
{{ partial "foot.html" .}}
{{ block "extra_js" . }}
{{ end }}
</body>
</html>

View File

@@ -6,43 +6,19 @@
{{ .Params.subtitle }}
{{ end }}
{{ define "content" }}
{{ define "extra_css" }}
<link rel="stylesheet" href="https://uicdn.toast.com/calendar/latest/toastui-calendar.min.css" />
{{ end }}
{{ define "extra_js" }}
<script src="https://uicdn.toast.com/calendar/latest/toastui-calendar.min.js"></script>
<div id="calendar" style="height: 800px"></div>
<script>
/* in the browser environment namespace */
const Calendar = tui.Calendar;
const calendar = new Calendar('#calendar', {
defaultView: 'month',
isReadOnly: true,
useDetailPopup: true,
usageStatistics: false,
calendars: [
{
id: '1',
name: 'Hackspace Events',
backgroundColor: '#ff0000',
},
],
$(document).ready(function () {
render_calendar();
});
console.log(calendar.getEvent());
$.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();
</script>
{{ end }}
{{ define "content" }}
<div id="calendar" style="height: 800px"></div>
{{ end }}