Romeo Fragomeli
ebce7719b6
This commit updates the FullCalendar library from v3 to v4.
The purpose of this update for us is to add a proper support of the
drag-and-drop of events on mobile.
But also to fix scrolling issues present mainly on smaller screens. In
those configurations multi/inner-scrolls were present resulting into
either the inability to properly scroll the desired content or even
blocking alltogether the scroll.
As a nice-to-have feature, the version 4 removes its dependency on the
jQuery library, allowing a faster loading of a bigger set of events.
Last but not least, this version also reduces its dependency on the
Moment.js library (but still keeps a binding to it for compatibility
purpose).
This commit focus only on the update of the library itself and the
adaptation of the related code to keep it working. Further
enhancements/fixes will be done later on.
To do so it modifies the following points:
* Update the library in itself (js, css...).
* Convert all FullCalendar's method calls to the new syntax (e.g.
`$calendar.fullCalendar('destroy')` becomes `calendar.destroy()`).
* Add a utility method to convert v4 events into the old v3 event
structure to ease the transition from one version to the other.
* Wrap all event's custom fields into a new event's
`extendedProps` object (as its the new way of storing them instead of
directly as a prop. of the event).
* Adapt `slotLabelFormat` and `weekNumberCalculation`.
* Use the view's new names:
** `agendaDay` -> `timeGridDay`
** `agendaWeek` -> `timeGridWeek`
** `month` -> `dayGridMonth`
* Use the option's new names:
** `viewRender` -> `datesRender`
** `eventMouseover` -> `eventMouseEnter`
** `eventMouseout` -> `eventMouseLeave`
** `isRTL` -> `dir`
** `selectHelper` -> `selectMirror`
** `weekNumberTitle` -> `weekLabel`
Ref:
https://fullcalendar.io/docs/upgrading-from-v3
Task ID: 2092550
78 lines
1.8 KiB
CSS
78 lines
1.8 KiB
CSS
/* 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;
|
|
} |