Commit 3651c4a3 authored by Jelle Besseling's avatar Jelle Besseling

Merge branch 'tc/fullcalendar-v4' into 'master'

Migrate to FullCalendar v4

Closes #808 and #879

See merge request !1291
parents f787ab67 c0976d9a
......@@ -24,15 +24,15 @@ class CalenderJSSerializer(serializers.ModelSerializer):
"""
class Meta:
fields = (
'start', 'end', 'all_day', 'is_birthday',
'start', 'end', 'allDay', 'isBirthday',
'url', 'title', 'description',
'backgroundColor', 'textColor', 'blank'
)
start = serializers.SerializerMethodField('_start')
end = serializers.SerializerMethodField('_end')
all_day = serializers.SerializerMethodField('_all_day')
is_birthday = serializers.SerializerMethodField('_is_birthday')
allDay = serializers.SerializerMethodField('_all_day')
isBirthday = serializers.SerializerMethodField('_is_birthday')
url = serializers.SerializerMethodField('_url')
title = serializers.SerializerMethodField('_title')
description = serializers.SerializerMethodField('_description')
......@@ -87,6 +87,9 @@ class EventCalenderJSSerializer(CalenderJSSerializer):
pass
return "#616161"
def _text_color(self, instance):
return "#FFFFFF"
class UnpublishedEventSerializer(CalenderJSSerializer):
"""
......
/*!
FullCalendar Bootstrap Plugin v4.2.0
Docs & License: https://fullcalendar.io/
(c) 2019 Adam Shaw
*/
.fc.fc-bootstrap a {
text-decoration: none;
}
.fc.fc-bootstrap a[data-goto]:hover {
text-decoration: underline;
}
.fc-bootstrap hr.fc-divider {
border-color: inherit;
}
.fc-bootstrap .fc-today.alert {
border-radius: 0;
}
.fc-bootstrap a.fc-event:not([href]):not([tabindex]) {
color: #fff;
}
.fc-bootstrap .fc-popover.card {
position: absolute;
}
/* Popover
--------------------------------------------------------------------------------------------------*/
.fc-bootstrap .fc-popover .card-body {
padding: 0;
}
/* TimeGrid Slats (lines that run horizontally)
--------------------------------------------------------------------------------------------------*/
.fc-bootstrap .fc-time-grid .fc-slats table {
/* some themes have background color. see through to slats */
background: none;
}
This diff is collapsed.
This diff is collapsed.
/*!
FullCalendar Day Grid Plugin v4.2.0
Docs & License: https://fullcalendar.io/
(c) 2019 Adam Shaw
*/
/* DayGridView
--------------------------------------------------------------------------------------------------*/
/* day row structure */
.fc-dayGridWeek-view .fc-content-skeleton,
.fc-dayGridDay-view .fc-content-skeleton {
/* there may be week numbers in these views, so no padding-top */
padding-bottom: 1em;
/* ensure a space at bottom of cell for user selecting/clicking */ }
.fc-dayGrid-view .fc-body .fc-row {
min-height: 4em;
/* ensure that all rows are at least this tall */ }
/* a "rigid" row will take up a constant amount of height because content-skeleton is absolute */
.fc-row.fc-rigid {
overflow: hidden; }
.fc-row.fc-rigid .fc-content-skeleton {
position: absolute;
top: 0;
left: 0;
right: 0; }
/* week and day number styling */
.fc-day-top.fc-other-month {
opacity: 0.3; }
.fc-dayGrid-view .fc-week-number,
.fc-dayGrid-view .fc-day-number {
padding: 2px; }
.fc-dayGrid-view th.fc-week-number,
.fc-dayGrid-view th.fc-day-number {
padding: 0 2px;
/* column headers can't have as much v space */ }
.fc-ltr .fc-dayGrid-view .fc-day-top .fc-day-number {
float: right; }
.fc-rtl .fc-dayGrid-view .fc-day-top .fc-day-number {
float: left; }
.fc-ltr .fc-dayGrid-view .fc-day-top .fc-week-number {
float: left;
border-radius: 0 0 3px 0; }
.fc-rtl .fc-dayGrid-view .fc-day-top .fc-week-number {
float: right;
border-radius: 0 0 0 3px; }
.fc-dayGrid-view .fc-day-top .fc-week-number {
min-width: 1.5em;
text-align: center;
background-color: #f2f2f2;
color: #808080; }
/* when week/day number have own column */
.fc-dayGrid-view td.fc-week-number {
text-align: center; }
.fc-dayGrid-view td.fc-week-number > * {
/* work around the way we do column resizing and ensure a minimum width */
display: inline-block;
min-width: 1.25em; }
/*!
FullCalendar Time Grid Plugin v4.2.0
Docs & License: https://fullcalendar.io/
(c) 2019 Adam Shaw
*/
/* TimeGridView all-day area
--------------------------------------------------------------------------------------------------*/
.fc-timeGrid-view .fc-day-grid {
position: relative;
z-index: 2;
/* so the "more.." popover will be over the time grid */ }
.fc-timeGrid-view .fc-day-grid .fc-row {
min-height: 3em;
/* all-day section will never get shorter than this */ }
.fc-timeGrid-view .fc-day-grid .fc-row .fc-content-skeleton {
padding-bottom: 1em;
/* give space underneath events for clicking/selecting days */ }
/* TimeGrid axis running down the side (for both the all-day area and the slot area)
--------------------------------------------------------------------------------------------------*/
.fc .fc-axis {
/* .fc to overcome default cell styles */
vertical-align: middle;
padding: 0 4px;
white-space: nowrap; }
.fc-ltr .fc-axis {
text-align: right; }
.fc-rtl .fc-axis {
text-align: left; }
/* TimeGrid Structure
--------------------------------------------------------------------------------------------------*/
.fc-time-grid-container,
.fc-time-grid {
/* so slats/bg/content/etc positions get scoped within here */
position: relative;
z-index: 1; }
.fc-time-grid {
min-height: 100%;
/* so if height setting is 'auto', .fc-bg stretches to fill height */ }
.fc-time-grid table {
/* don't put outer borders on slats/bg/content/etc */
border: 0 hidden transparent; }
.fc-time-grid > .fc-bg {
z-index: 1; }
.fc-time-grid .fc-slats,
.fc-time-grid > hr {
/* the <hr> TimeGridView injects when grid is shorter than scroller */
position: relative;
z-index: 2; }
.fc-time-grid .fc-content-col {
position: relative;
/* because now-indicator lives directly inside */ }
.fc-time-grid .fc-content-skeleton {
position: absolute;
z-index: 3;
top: 0;
left: 0;
right: 0; }
/* divs within a cell within the fc-content-skeleton */
.fc-time-grid .fc-business-container {
position: relative;
z-index: 1; }
.fc-time-grid .fc-bgevent-container {
position: relative;
z-index: 2; }
.fc-time-grid .fc-highlight-container {
position: relative;
z-index: 3; }
.fc-time-grid .fc-event-container {
position: relative;
z-index: 4; }
.fc-time-grid .fc-now-indicator-line {
z-index: 5; }
.fc-time-grid .fc-mirror-container {
/* also is fc-event-container */
position: relative;
z-index: 6; }
/* TimeGrid Slats (lines that run horizontally)
--------------------------------------------------------------------------------------------------*/
.fc-time-grid .fc-slats td {
height: 1.5em;
border-bottom: 0;
/* each cell is responsible for its top border */ }
.fc-time-grid .fc-slats .fc-minor td {
border-top-style: dotted; }
/* TimeGrid Highlighting Slots
--------------------------------------------------------------------------------------------------*/
.fc-time-grid .fc-highlight-container {
/* a div within a cell within the fc-highlight-skeleton */
position: relative;
/* scopes the left/right of the fc-highlight to be in the column */ }
.fc-time-grid .fc-highlight {
position: absolute;
left: 0;
right: 0;
/* top and bottom will be in by JS */ }
/* TimeGrid Event Containment
--------------------------------------------------------------------------------------------------*/
.fc-ltr .fc-time-grid .fc-event-container {
/* space on the sides of events for LTR (default) */
margin: 0 2.5% 0 2px; }
.fc-rtl .fc-time-grid .fc-event-container {
/* space on the sides of events for RTL */
margin: 0 2px 0 2.5%; }
.fc-time-grid .fc-event,
.fc-time-grid .fc-bgevent {
position: absolute;
z-index: 1;
/* scope inner z-index's */ }
.fc-time-grid .fc-bgevent {
/* background events always span full width */
left: 0;
right: 0; }
/* TimeGrid Event Styling
----------------------------------------------------------------------------------------------------
We use the full "fc-time-grid-event" class instead of using descendants because the event won't
be a descendant of the grid when it is being dragged.
*/
.fc-time-grid-event {
margin-bottom: 1px; }
.fc-time-grid-event-inset {
-webkit-box-shadow: 0px 0px 0px 1px #fff;
box-shadow: 0px 0px 0px 1px #fff; }
.fc-time-grid-event.fc-not-start {
/* events that are continuing from another day */
/* replace space made by the top border with padding */
border-top-width: 0;
padding-top: 1px;
/* remove top rounded corners */
border-top-left-radius: 0;
border-top-right-radius: 0; }
.fc-time-grid-event.fc-not-end {
/* replace space made by the top border with padding */
border-bottom-width: 0;
padding-bottom: 1px;
/* remove bottom rounded corners */
border-bottom-left-radius: 0;
border-bottom-right-radius: 0; }
.fc-time-grid-event .fc-content {
overflow: hidden;
max-height: 100%; }
.fc-time-grid-event .fc-time,
.fc-time-grid-event .fc-title {
padding: 0 1px; }
.fc-time-grid-event .fc-time {
font-size: .85em;
white-space: nowrap; }
/* short mode, where time and title are on the same line */
.fc-time-grid-event.fc-short .fc-content {
/* don't wrap to second line (now that contents will be inline) */
white-space: nowrap; }
.fc-time-grid-event.fc-short .fc-time,
.fc-time-grid-event.fc-short .fc-title {
/* put the time and title on the same line */
display: inline-block;
vertical-align: top; }
.fc-time-grid-event.fc-short .fc-time span {
display: none;
/* don't display the full time text... */ }
.fc-time-grid-event.fc-short .fc-time:before {
content: attr(data-start);
/* ...instead, display only the start time */ }
.fc-time-grid-event.fc-short .fc-time:after {
content: "\000A0-\000A0";
/* seperate with a dash, wrapped in nbsp's */ }
.fc-time-grid-event.fc-short .fc-title {
font-size: .85em;
/* make the title text the same size as the time */
padding: 0;
/* undo padding from above */ }
/* resizer (cursor device) */
.fc-time-grid-event.fc-allow-mouse-resize .fc-resizer {
left: 0;
right: 0;
bottom: 0;
height: 8px;
overflow: hidden;
line-height: 8px;
font-size: 11px;
font-family: monospace;
text-align: center;
cursor: s-resize; }
.fc-time-grid-event.fc-allow-mouse-resize .fc-resizer:after {
content: "="; }
/* resizer (touch device) */
.fc-time-grid-event.fc-selected .fc-resizer {
/* 10x10 dot */
border-radius: 5px;
border-width: 1px;
width: 8px;
height: 8px;
border-style: solid;
border-color: inherit;
background: #fff;
/* horizontally center */
left: 50%;
margin-left: -5px;
/* center on the bottom edge */
bottom: -5px; }
/* Now Indicator
--------------------------------------------------------------------------------------------------*/
.fc-time-grid .fc-now-indicator-line {
border-top-width: 1px;
left: 0;
right: 0; }
/* arrow on axis */
.fc-time-grid .fc-now-indicator-arrow {
margin-top: -5px;
/* vertically center on top coordinate */ }
.fc-ltr .fc-time-grid .fc-now-indicator-arrow {
left: 0;
/* triangle pointing right... */
border-width: 5px 0 5px 6px;
border-top-color: transparent;
border-bottom-color: transparent; }
.fc-rtl .fc-time-grid .fc-now-indicator-arrow {
right: 0;
/* triangle pointing left... */
border-width: 5px 6px 5px 0;
border-top-color: transparent;
border-bottom-color: transparent; }
......@@ -41,10 +41,23 @@
}
#events-index {
.fc-bootstrap4 .fc-today {
.fc-bootstrap .fc-today {
background: #fff9fc;
}
.fc-now-indicator {
border-color: $dark-grey;
&.fc-now-indicator-arrow {
border-top-color: transparent;
border-bottom-color: transparent;
}
}
.fc-day-top {
padding: 5px;
}
.fc-list-view {
border: none;
......@@ -67,6 +80,8 @@
background-color: #616161;
border-radius: 0;
border: none;
overflow: hidden;
transition-property: opacity;
.fc-content {
padding: 5px;
......@@ -85,21 +100,8 @@
.fc-content {
opacity: 0.8;
}
}
}
}
@media(max-width: 575px) {
#events-index {
.fc-right {
> div {
margin-bottom: 0.5rem;
float: right;
}
> button {
clear: both;
float: right;
}
color: $white;
}
}
}
......
var FC = $.fullCalendar; // a reference to FullCalendar's root namespace
var View = FC.View; // the class that all views must inherit from
var ListView; // our subclass
ListView = View.extend({
title: gettext("Upcoming Events"),
computeTitle: function (d) {
return this.title;
},
fetchInitialEvents: function (dateProfile) {
var calendar = this.calendar;
var today = new Date();
return calendar.requestEvents(
calendar.msToMoment(Date.UTC(today.getFullYear(), today.getMonth(), today.getDate(), 0, 0, 0), false),
calendar.msToMoment(Date.UTC(today.getFullYear() + 2, today.getMonth(), today.getDate(), 0, 0, 0), false)
);
},
renderEvents: function (events) {
var root = $("<div>").addClass("accordion bordered");
events.sort(function (a, b) {
return a.start < b.start ? -1 : a.start > b.start ? 1 : 0;
});
if (events.length === 0) {
this.el.html('<div class="alert alert-info">' + gettext('No events planned in the selected period.') +'</div>');
}
for (var i = 0; i < events.length; i++) {
var e = events[i];
if (e.is_birthday) {
break;
}
var date = e.start.format('LLLL');
var eventCard = $("<div>").addClass("card mb-0");
var eventIndicator = $("<div>")
.addClass("event-indication")
.attr("style", "background-color: " + e.backgroundColor);
var cardHead = $("<div>").addClass("card-header collapsed")
.attr("data-toggle", "collapse")
.attr("data-target", "#event-content-" + i);
cardHead.append(eventIndicator);
cardHead.append("<div class=\"title\">" + e.title + " " +
"(<span class=\"date\">" + date + "</span>)</div>");
var cardContent = $("<div>")
.addClass("collapse")
.attr("id", "event-content-" + i);
var url = $("<a>")
.addClass("btn btn-primary")
.attr("href", e.url)
.attr("target", e.blank ? "_blank" : "_self")
.html(gettext("Go to event"));
var cardBody = $("<div>")
.addClass("card-body")
.html("<p>" + e.description + "</p>");
cardBody.append(url);
cardContent.append(cardBody);
eventCard.append(cardHead);
eventCard.append(cardContent);
root.append(eventCard);
this.el.html(root);
}
},
});
FC.views.list = ListView; // register our class with the view system
!function(e,a){"object"==typeof exports&&"object"==typeof module?module.exports=a(require("moment"),require("fullcalendar")):"function"==typeof define&&define.amd?define(["moment","fullcalendar"],a):"object"==typeof exports?a(require("moment"),require("fullcalendar")):a(e.moment,e.FullCalendar)}("undefined"!=typeof self?self:this,function(e,a){return function(e){function a(t){if(n[t])return n[t].exports;var r=n[t]={i:t,l:!1,exports:{}};return e[t].call(r.exports,r,r.exports,a),r.l=!0,r.exports}var n={};return a.m=e,a.c=n,a.d=function(e,n,t){a.o(e,n)||Object.defineProperty(e,n,{configurable:!1,enumerable:!0,get:t})},a.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return a.d(n,"a",n),n},a.o=function(e,a){return Object.prototype.hasOwnProperty.call(e,a)},a.p="",a(a.s=169)}({0:function(a,n){a.exports=e},1:function(e,n){e.exports=a},169:function(e,a,n){Object.defineProperty(a,"__esModule",{value:!0}),n(170);var t=n(1);t.datepickerLocale("nl","nl",{closeText:"Sluiten",prevText:"",nextText:"",currentText:"Vandaag",monthNames:["januari","februari","maart","april","mei","juni","juli","augustus","september","oktober","november","december"],monthNamesShort:["jan","feb","mrt","apr","mei","jun","jul","aug","sep","okt","nov","dec"],dayNames:["zondag","maandag","dinsdag","woensdag","donderdag","vrijdag","zaterdag"],dayNamesShort:["zon","maa","din","woe","don","vri","zat"],dayNamesMin:["zo","ma","di","wo","do","vr","za"],weekHeader:"Wk",dateFormat:"dd-mm-yy",firstDay:1,isRTL:!1,showMonthAfterYear:!1,yearSuffix:""}),t.locale("nl",{buttonText:{year:"Jaar",month:"Maand",week:"Week",day:"Dag",list:"Agenda"},allDayText:"Hele dag",eventLimitText:"extra",noEventsMessage:"Geen evenementen om te laten zien"})},170:function(e,a,n){!function(e,a){a(n(0))}(0,function(e){var a="jan._feb._mrt._apr._mei_jun._jul._aug._sep._okt._nov._dec.".split("_"),n="jan_feb_mrt_apr_mei_jun_jul_aug_sep_okt_nov_dec".split("_"),t=[/^jan/i,/^feb/i,/^maart|mrt.?$/i,/^apr/i,/^mei$/i,/^jun[i.]?$/i,/^jul[i.]?$/i,/^aug/i,/^sep/i,/^okt/i,/^nov/i,/^dec/i],r=/^(januari|februari|maart|april|mei|april|ju[nl]i|augustus|september|oktober|november|december|jan\.?|feb\.?|mrt\.?|apr\.?|ju[nl]\.?|aug\.?|sep\.?|okt\.?|nov\.?|dec\.?)/i;return e.defineLocale("nl",{months:"januari_februari_maart_april_mei_juni_juli_augustus_september_oktober_november_december".split("_"),monthsShort:function(e,t){return e?/-MMM-/.test(t)?n[e.month()]:a[e.month()]:a},monthsRegex:r,monthsShortRegex:r,monthsStrictRegex:/^(januari|februari|maart|mei|ju[nl]i|april|augustus|september|oktober|november|december)/i,monthsShortStrictRegex:/^(jan\.?|feb\.?|mrt\.?|apr\.?|mei|ju[nl]\.?|aug\.?|sep\.?|okt\.?|nov\.?|dec\.?)/i,monthsParse:t,longMonthsParse:t,shortMonthsParse:t,weekdays:"zondag_maandag_dinsdag_woensdag_donderdag_vrijdag_zaterdag".split("_"),weekdaysShort:"zo._ma._di._wo._do._vr._za.".split("_"),weekdaysMin:"zo_ma_di_wo_do_vr_za".split("_"),weekdaysParseExact:!0,longDateFormat:{LT:"HH:mm",LTS:"HH:mm:ss",L:"DD-MM-YYYY",LL:"D MMMM YYYY",LLL:"D MMMM YYYY HH:mm",LLLL:"dddd D MMMM YYYY HH:mm"},calendar:{sameDay:"[vandaag om] LT",nextDay:"[morgen om] LT",nextWeek:"dddd [om] LT",lastDay:"[gisteren om] LT",lastWeek:"[afgelopen] dddd [om] LT",sameElse:"L"},relativeTime:{future:"over %s",past:"%s geleden",s:"een paar seconden",ss:"%d seconden",m:"één minuut",mm:"%d minuten",h:"één uur",hh:"%d uur",d:"één dag",dd:"%d dagen",M:"één maand",MM:"%d maanden",y:"één jaar",yy:"%d jaar"},dayOfMonthOrdinalParse:/\d{1,2}(ste|de)/,ordinal:function(e){return e+(1===e||8===e||e>=20?"ste":"de")},week:{dow:1,doy:4}})})}})});
/*!
FullCalendar Bootstrap Plugin v4.2.0
Docs & License: https://fullcalendar.io/
(c) 2019 Adam Shaw
*/
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@fullcalendar/core')) :
typeof define === 'function' && define.amd ? define(['exports', '@fullcalendar/core'], factory) :
(global = global || self, factory(global.FullCalendarBootstrap = {}, global.FullCalendar));
}(this, function (exports, core) { 'use strict';
/*! *****************************************************************************
Copyright (c) Microsoft Corporation. All rights reserved.
Licensed under the Apache License, Version 2.0 (the "License"); you may not use
this file except in compliance with the License. You may obtain a copy of the
License at http://www.apache.org/licenses/LICENSE-2.0
THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
MERCHANTABLITY OR NON-INFRINGEMENT.
See the Apache Version 2.0 License for specific language governing permissions
and limitations under the License.
***************************************************************************** */
/* global Reflect, Promise */
var extendStatics = function(d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return extendStatics(d, b);
};
function __extends(d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
}
var BootstrapTheme = /** @class */ (function (_super) {
__extends(BootstrapTheme, _super);
function BootstrapTheme() {
return _super !== null && _super.apply(this, arguments) || this;
}
return BootstrapTheme;
}(core.Theme));
BootstrapTheme.prototype.classes = {
widget: 'fc-bootstrap',
tableGrid: 'table-bordered',