")
- // .addClass("card-body")
- // .html("
" + e.description + "
");
- // cardBody.append(url);
- //
- // cardContent.append(cardBody);
- // eventCard.append(cardHead);
- // eventCard.append(cardContent);
- //
- // root.append(eventCard);
- // this.el.appendChild(root);
+ var date = instance.range.start.toLocaleDateString(locale, {
+ hour: '2-digit',
+ minute: '2-digit',
+ day: 'numeric',
+ month: 'long',
+ weekday: 'long',
+ year: 'numeric',
+ hour12: false,
+ });
+
+ const eventCard = document.createElement('div');
+ eventCard.classList.add('card', 'mb-0');
+
+ const eventIndicator = document.createElement('div');
+ eventIndicator.classList.add('event-indication');
+ eventIndicator.style = 'background-color: ' + def.ui.backgroundColor;
+
+ const cardHead = document.createElement('div');
+ cardHead.classList.add('card-header', 'collapsed');
+ cardHead.dataset.toggle = 'collapse';
+ cardHead.dataset.target = '#event-content-' + i;
+
+ const cardTitle = document.createElement('div');
+ cardTitle.classList.add('title');
+ const cardDate = document.createElement('span');
+ cardDate.append(date);
+ cardTitle.append(def.title + ' (');
+ cardTitle.append(cardDate);
+ cardTitle.append(')');
+
+ cardHead.append(eventIndicator);
+ cardHead.append(cardTitle);
+
+ const cardContent = document.createElement('div');
+ cardContent.classList.add('collapse');
+ cardContent.id = 'event-content-' + i;
+
+ const url = document.createElement('a');
+ url.classList.add('btn', 'btn-primary');
+ url.href = def.url;
+ url.target = def.extendedProps.blank ? '_blank' : '_self';
+ url.append(gettext("Go to event"));
+
+ const cardBody = document.createElement('div');
+ cardBody.classList.add('card-body');
+ const cardBodyText = document.createElement('p');
+ cardBodyText.append(def.extendedProps.description);
+ cardBody.append(cardBodyText);
+ cardBody.append(url);
+
+ cardContent.append(cardBody);
+ eventCard.append(cardHead);
+ eventCard.append(cardContent);
+
+ skeleton.append(eventCard);
}
+ this.el.append(skeleton);
}
unrenderEvents() {
- const noEventsEl = document.getElementById('fc-no-events');
+ const noEventsEl = this.el.querySelector('#fc-no-events');
if (noEventsEl) {
noEventsEl.remove();
}
- // should undo whatever renderEvents does
- }
+ const listView = this.el.querySelector('#fc-listview');
+ if (listView) {
+ listView.remove();
+ }
+ }
}
const listViewPlugin = FullCalendar.createPlugin({
diff --git a/website/events/static/events/js/main.js b/website/events/static/events/js/main.js
index 9a26a0d07e638cd1d9fe5e8540010295d59dabb1..db979400ba55df4665351b9e7578f97a580f1851 100644
--- a/website/events/static/events/js/main.js
+++ b/website/events/static/events/js/main.js
@@ -1,89 +1,100 @@
-var BIRTHDAYS_COOKIE = 'showbirthdays';
-var VIEW_COOKIE = 'agendaview';
-var SOURCES = {
- events: "/api/v1/events/calendarjs",
- birthdays: "/api/v1/members/birthdays",
- partners: "/api/v1/partners/calendarjs",
- unpublishedEvents: "/api/v1/events/unpublished"
+const BIRTHDAYS_COOKIE = 'showbirthdays';
+const VIEW_COOKIE = 'calendarview';
+const SOURCES = {
+ events: {
+ id: 'event',
+ url: '/api/v1/events/calendarjs/',
+ },
+ birthdays: {
+ id: 'birthdays',
+ url: '/api/v1/members/birthdays/',
+ },
+ partners: {
+ id: 'partners',
+ url: '/api/v1/partners/calendarjs/',
+ },
+ unpublished: {
+ id: 'unpublished',
+ url: '/api/v1/events/unpublished/',
+ },
};
-function checkResponsiveState(calendarElement, windowWidth, view) {
+function checkResponsiveState(calendar, windowWidth, view) {
var buttonText = gettext('show birthdays');
- calendarElement.fullCalendar('removeEventSource', SOURCES.birthdays);
+ if (calendar.getEventSourceById(SOURCES.birthdays.id)) {
+ calendar.getEventSourceById(SOURCES.birthdays.id).remove();
+ }
if (windowWidth <= 768) {
- calendarElement.fullCalendar('option', 'header', {
+ calendar.setOption('header', {
right: ''
});
} else {
- if (view.name === 'list') {
- calendarElement.fullCalendar('option', 'header', {
- right: 'list,agendaWeek,month'
+ if (view.type === 'list') {
+ calendar.setOption('header', {
+ right: 'list,timeGridWeek,dayGridMonth'
});
} else {
if (Cookies.get(BIRTHDAYS_COOKIE)) {
- calendarElement.fullCalendar('addEventSource', SOURCES.birthdays);
+ calendar.addEventSource(SOURCES.birthdays);
buttonText = gettext('hide birthdays');
}
- calendarElement.fullCalendar('option', 'header', {
- right: 'showBirthdays, list,agendaWeek,month prev,next today'
+ calendar.setOption('header', {
+ right: 'showBirthdays, list,timeGridWeek,dayGridMonth prev,next today'
});
}
}
$('.fc-showBirthdays-button').html(buttonText);
}
-$(function () {
- var calendarElement = $('#calendar');
+document.addEventListener('DOMContentLoaded', function () {
+ const calendarEl = document.getElementById('calendar');
- var showUnpublished = calendarElement.data('show-unpublished');
- var defaultDate = calendarElement.data('default-date');
- var isAuthenticated = calendarElement.data('authenticated');
- var language = calendarElement.data('language');
+ const showUnpublished = calendarEl.dataset['show-unpublished'];
+ let defaultDate = calendarEl.dataset['default-date'];
+ const isAuthenticated = calendarEl.dataset.authenticated;
+ const language = calendarEl.dataset.language;
- var eventSources = [SOURCES.events, SOURCES.partners];
+ const eventSources = [SOURCES.events, SOURCES.partners];
if (showUnpublished) {
- eventSources.push(SOURCES.unpublishedEvents);
+ eventSources.push(SOURCES.unpublished);
}
if (Cookies.get(BIRTHDAYS_COOKIE)) {
eventSources.push(SOURCES.birthdays);
}
- var tmpView = ($(window).width() < 979) ? 'list' : 'agendaWeek';
+ let tmpView = window.innerWidth < 979 ? 'list' : 'timeGridWeek';
if (Cookies.get(VIEW_COOKIE) !== undefined) {
tmpView = Cookies.get(VIEW_COOKIE);
}
- // History idea and code parts from
- // https://github.com/fullcalendar/fullcalendar/issues/659#issuecomment-132535804
- // and https://github.com/fullcalendar/fullcalendar/issues/659#issuecomment-245544401
- var startDate = new Date(defaultDate);
- var tmpYear = startDate.getFullYear();
- var tmpMonth = startDate.getMonth();
- var tmpDay = startDate.getDate();
- var vars = window.location.hash.split("&");
- for (var i = 0; i < vars.length; i++) {
- if (vars[i].match("^#year")) tmpYear = vars[i].substring(6);
- if (vars[i].match("^month")) tmpMonth = vars[i].substring(6) - 1;
- if (vars[i].match("^day")) tmpDay = vars[i].substring(4);
- if (vars[i].match("^view")) tmpView = vars[i].substring(5);
+ if (window.location.hash.indexOf('date') > -1) {
+ defaultDate = window.location.hash.substr(window.location.hash.indexOf('date') + 5, 24);
}
- calendarElement.fullCalendar({
+ const calendar = new FullCalendar.Calendar(calendarEl, {
+ plugins: ['timeGrid', 'dayGrid', 'bootstrap', listViewPlugin],
aspectRatio: 1.8,
- theme: 'bootstrap4',
- eventSources: eventSources,
+ themeSystem: 'bootstrap',
defaultView: tmpView,
+ defaultDate: defaultDate,
+ eventSources: eventSources,
firstDay: 1,
scrollTime: '14:00:00',
- timeFormat: 'HH:mm',
+ eventTimeFormat: {
+ hour: '2-digit',
+ minute: '2-digit',
+ hour12: false,
+ },
eventLimit: true,
locale: language,
+ nowIndicator: true,
views: {
list: {
buttonText: gettext('list'),
- duration: {years: 5}
+ duration: { years: 5 },
+ type: 'list',
+ titleFormat: function() { return gettext("Upcoming Events") },
}
},
- defaultDate: defaultDate,
customButtons:
isAuthenticated ? {
showBirthdays: {
@@ -92,71 +103,63 @@ $(function () {
if (Cookies.get(BIRTHDAYS_COOKIE)) {
e.target.innerHTML = gettext('show birthdays');
Cookies.remove(BIRTHDAYS_COOKIE);
- calendarElement.fullCalendar('removeEventSource', SOURCES.birthdays);
+ calendar.getEventSourceById(SOURCES.birthdays.id).remove();
} else {
e.target.innerHTML = gettext('hide birthdays');
Cookies.set(BIRTHDAYS_COOKIE, 1);
- calendarElement.fullCalendar('addEventSource', SOURCES.birthdays);
+ calendar.addEventSource(SOURCES.birthdays);
}
}
}
- } : {}
- ,
+ } : {},
header: {
- right: 'showBirthdays, list,agendaWeek,month prev,next today'
+ right: 'showBirthdays, list,timeGridWeek,dayGridMonth prev,next today'
},
- eventClick: function (event) {
- if (event.url && event.blank) {
+ eventClick: function ({ jsEvent, event }) {
+ console.log(event);
+ if (event.url && event.extendedProps.blank) {
+ jsEvent.preventDefault();
window.open(event.url, '_blank');
- return false;
- } else if (event.url) {
- window.replace(event.url);
- return false;
}
},
- eventRender: function (event, element) {
- element.attr('title', event.description);
+ eventRender: function ({ el, event }) {
+ el.setAttribute(
+ 'title', event.extendedProps.description);
},
- viewRender: function (view) {
- var prevView = Cookies.get(VIEW_COOKIE);
- var moment = calendarElement.fullCalendar('getDate');
- if (moment && moment.isValid()) {
- window.location.hash = 'year=' + moment.format('YYYY') + '&month=' + (moment.format('M')) + '&day=' + moment.format('DD') + '&view=' + view.name;
- }
+ viewSkeletonRender: function ({ view }) {
+ const prevView = Cookies.get(VIEW_COOKIE);
+
+ const date = calendar.getDate();
+ window.location.hash = 'date=' + date.toISOString() + '&view=' + view.type;
- if (view.name !== prevView) {
- var windowWidth = $(window).width();
- Cookies.set(VIEW_COOKIE, view.name);
- checkResponsiveState(calendarElement, windowWidth, view);
+ if (view.type !== prevView) {
+ const windowWidth = window.innerWidth;
+ Cookies.set(VIEW_COOKIE, view.type);
+ checkResponsiveState(calendar, windowWidth, view);
}
- }
- ,
+ },
+ datesRender: function ({ view }) {
+ const date = calendar.getDate();
+ window.location.hash = 'date=' + date.toISOString() + '&view=' + view.type;
+ },
windowResize: function () {
- var windowWidth = $(window).width();
- var view = (windowWidth <= 768) ? 'list' : Cookies.get(VIEW_COOKIE);
- var currentView = $('#calendar').fullCalendar('getView');
- if (view !== currentView.name) {
- calendarElement.fullCalendar('changeView', view);
+ const windowWidth = window.innerWidth;
+ const view = (windowWidth <= 768) ? 'list' : Cookies.get(VIEW_COOKIE);
+ const currentView = calendar.view;
+ if (view !== currentView.type) {
+ calendar.changeView(view);
} else {
- checkResponsiveState(calendarElement, windowWidth, currentView);
+ checkResponsiveState(calendar, windowWidth, currentView);
}
}
- })
- ;
+ });
- var date = new Date(tmpYear, tmpMonth, tmpDay, 0, 0, 0);
- var moment = calendarElement.fullCalendar('getDate');
- var view = calendarElement.fullCalendar('getView');
- if (date.getFullYear() !== moment.format('YYYY') ||
- date.getMonth() !== moment.format('M') ||
- date.getDate() !== moment.format('DD')) {
- calendarElement.fullCalendar('gotoDate', date);
- }
+ calendar.render();
- if (view.name !== tmpView) {
- calendarElement.fullCalendar('changeView', tmpView);
+ if (calendar.view.type !== tmpView) {
+ calendar.changeView(tmpView);
} else {
- var windowWidth = $(window).width();
- checkResponsiveState(calendarElement, windowWidth, view);
+ var windowWidth = window.innerWidth;
+ checkResponsiveState(calendar, windowWidth, calendar.view);
}
});
diff --git a/website/events/static/events/js/new.js b/website/events/static/events/js/new.js
deleted file mode 100644
index e2b42127e53556cd1ac41acdf1e48c6892cdccc2..0000000000000000000000000000000000000000
--- a/website/events/static/events/js/new.js
+++ /dev/null
@@ -1,169 +0,0 @@
-const BIRTHDAYS_COOKIE = 'showbirthdays';
-const VIEW_COOKIE = 'calendarview';
-const SOURCES = {
- events: {
- id: 'event',
- url: '/api/v1/events/calendarjs/',
- },
- birthdays: {
- id: 'birthdays',
- url: '/api/v1/members/birthdays/',
- },
- partners: {
- id: 'partners',
- url: '/api/v1/partners/calendarjs/',
- },
- unpublished: {
- id: 'unpublished',
- url: '/api/v1/events/unpublished/',
- },
-};
-
-function checkResponsiveState(calendar, windowWidth, view) {
- var buttonText = gettext('show birthdays');
- if (calendar.getEventSourceById(SOURCES.birthdays.id)) {
- calendar.getEventSourceById(SOURCES.birthdays.id).remove();
- }
- if (windowWidth <= 768) {
- calendar.setOption('header', {
- right: ''
- });
- } else {
- if (view.type === 'list') {
- calendar.setOption('header', {
- right: 'list,timeGridWeek,dayGridMonth'
- });
- } else {
- if (Cookies.get(BIRTHDAYS_COOKIE)) {
- calendar.addEventSource(SOURCES.birthdays);
- buttonText = gettext('hide birthdays');
- }
- calendar.setOption('header', {
- right: 'showBirthdays, list,timeGridWeek,dayGridMonth prev,next today'
- });
- }
- }
- $('.fc-showBirthdays-button').html(buttonText);
-}
-
-document.addEventListener('DOMContentLoaded', function () {
- const calendarEl = document.getElementById('calendar');
-
- const showUnpublished = calendarEl.dataset['show-unpublished'];
- let defaultDate = calendarEl.dataset['default-date'];
- const isAuthenticated = calendarEl.dataset.authenticated;
- const language = calendarEl.dataset.language;
-
- const eventSources = [SOURCES.events, SOURCES.partners];
- if (showUnpublished) {
- eventSources.push(SOURCES.unpublished);
- }
- if (Cookies.get(BIRTHDAYS_COOKIE)) {
- eventSources.push(SOURCES.birthdays);
- }
- let tmpView = ($(window).width() < 979) ? 'list' : 'timeGridWeek';
- if (Cookies.get(VIEW_COOKIE) !== undefined) {
- tmpView = Cookies.get(VIEW_COOKIE);
- }
-
- if (window.location.hash.indexOf('date') > -1) {
- defaultDate = window.location.hash.substr(window.location.hash.indexOf('date') + 5, 24);
- }
-
- const calendar = new FullCalendar.Calendar(calendarEl, {
- plugins: ['timeGrid', 'dayGrid', 'bootstrap', listViewPlugin],
- aspectRatio: 1.8,
- themeSystem: 'bootstrap',
- defaultView: tmpView,
- defaultDate: defaultDate,
- eventSources: eventSources,
- firstDay: 1,
- scrollTime: '14:00:00',
- eventTimeFormat: {
- hour: '2-digit',
- minute: '2-digit',
- hour12: false,
- },
- eventLimit: true,
- locale: language,
- nowIndicator: true,
- views: {
- list: {
- buttonText: gettext('list'),
- duration: { years: 5 },
- type: 'list',
- titleFormat: function() { return gettext("Upcoming Events") },
- }
- },
- customButtons:
- isAuthenticated ? {
- showBirthdays: {
- text: Cookies.get(BIRTHDAYS_COOKIE) ? gettext('hide birthdays') : gettext('show birthdays'),
- click: function (e) {
- if (Cookies.get(BIRTHDAYS_COOKIE)) {
- e.target.innerHTML = gettext('show birthdays');
- Cookies.remove(BIRTHDAYS_COOKIE);
- calendar.getEventSourceById(SOURCES.birthdays.id).remove();
- } else {
- e.target.innerHTML = gettext('hide birthdays');
- Cookies.set(BIRTHDAYS_COOKIE, 1);
- calendar.addEventSource(SOURCES.birthdays);
- }
- }
- }
- } : {},
- header: {
- right: 'showBirthdays, list,timeGridWeek,dayGridMonth prev,next today'
- },
- eventClick: function (info) {
- console.log(info);
- // if (event.url && event.blank) {
- // // window.open(event.url, '_blank');
- // return false;
- // } else if (event.url) {
- // // window.replace(event.url);
- // return false;
- // }
- },
- eventRender: function (info) {
- info.el.setAttribute(
- 'title', info.event.extendedProps.description);
- },
- viewSkeletonRender: function (info) {
- const view = info.view;
- const prevView = Cookies.get(VIEW_COOKIE);
-
- const date = calendar.getDate();
- window.location.hash = 'date=' + date.toISOString() + '&view=' + view.type;
-
- if (view.type !== prevView) {
- const windowWidth = $(window).width();
- Cookies.set(VIEW_COOKIE, view.type);
- checkResponsiveState(calendar, windowWidth, view);
- }
- },
- datesRender: function (info) {
- const date = calendar.getDate();
- window.location.hash = 'date=' + date.toISOString() + '&view=' + info.view.type;
- },
- windowResize: function () {
- const windowWidth = $(window).width();
- const view = (windowWidth <= 768) ? 'list' : Cookies.get(VIEW_COOKIE);
- const currentView = calendar.view;
- if (view !== currentView.type) {
- calendar.changeView(view);
- } else {
- checkResponsiveState(calendar, windowWidth, currentView);
- }
- }
- });
-
- calendar.render();
-
- if (calendar.view.type !== tmpView) {
- calendar.changeView(tmpView);
- } else {
- var windowWidth = $(window).width();
- checkResponsiveState(calendar, windowWidth, calendar.view);
- }
-});
diff --git a/website/events/templates/events/index.html b/website/events/templates/events/index.html
index 7dfc6695adaaaa82bcb37e960472cba22e74391a..89f45670f167dc7e23c54eff1941f008f8207798 100644
--- a/website/events/templates/events/index.html
+++ b/website/events/templates/events/index.html
@@ -78,6 +78,6 @@
+ src="{% static "events/js/main.js" %}">
{% endcompress %}
{% endblock js_body %}
diff --git a/website/utils/snippets.py b/website/utils/snippets.py
index 5bc1d9d85ffdcd323fa9aea207d0696ffb9d5636..997781143d3dd5b3794db47d02d012a75894ede4 100644
--- a/website/utils/snippets.py
+++ b/website/utils/snippets.py
@@ -2,12 +2,10 @@
import hmac
from _sha1 import sha1
from base64 import urlsafe_b64decode, urlsafe_b64encode
-from datetime import datetime
from django.conf import settings
from django.template.defaultfilters import urlencode
from django.utils import timezone, dateparse
-from pytz import InvalidTimeError
from rest_framework.exceptions import ParseError
@@ -73,7 +71,6 @@ def extract_date_range(request, allow_empty=False):
default_value = None
start = request.query_params.get('start', default_value)
- print(start)
start = dateparse.parse_datetime(start)
if not timezone.is_aware(start):
start = timezone.make_aware(start)