- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| File | -- | Statements | -- | Branches | -- | Functions | -- | Lines | -- |
|---|---|---|---|---|---|---|---|---|---|
| src | -
-
- |
- 0% | -0/0 | -0% | -0/0 | -0% | -0/0 | -0% | -0/0 | -
| src/BigCalendar | -
-
- |
- 59.54% | -78/131 | -61.53% | -80/130 | -65.62% | -21/32 | -57.37% | -70/122 | -
| src/BigCalendar/addons | -
-
- |
- 86.42% | -121/140 | -54.28% | -38/70 | -88.88% | -40/45 | -87.68% | -121/138 | -
| src/BigCalendar/components | -
-
- |
- 28.57% | -8/28 | -2.94% | -1/34 | -33.33% | -1/3 | -30.76% | -8/26 | -
| src/BigCalendar/components/AgentView | -
-
- |
- 85.21% | -98/115 | -60.25% | -47/78 | -82.35% | -14/17 | -86.48% | -96/111 | -
| src/BigCalendar/components/Date | -
-
- |
- 45.32% | -63/139 | -38.02% | -27/71 | -47.05% | -16/34 | -46.92% | -61/130 | -
| src/BigCalendar/components/DayView | -
-
- |
- 35.84% | -57/159 | -27.77% | -30/108 | -40.54% | -15/37 | -36.73% | -54/147 | -
| src/BigCalendar/components/DayView/layout-algorithms | -
-
- |
- 6.62% | -10/151 | -0% | -0/61 | -13.33% | -2/15 | -7.25% | -9/124 | -
| src/BigCalendar/components/Event | -
-
- |
- 49.01% | -100/204 | -46.39% | -148/319 | -48% | -12/25 | -49.74% | -99/199 | -
| src/BigCalendar/components/MonthRangeView | -
-
- |
- 22.5% | -9/40 | -0% | -0/22 | -0% | -0/10 | -27.27% | -9/33 | -
| src/BigCalendar/components/MonthView | -
-
- |
- 66.07% | -111/168 | -50.52% | -48/95 | -53.33% | -24/45 | -65.35% | -100/153 | -
| src/BigCalendar/components/TimeGrid | -
-
- |
- 78.08% | -114/146 | -60.81% | -45/74 | -64.1% | -25/39 | -79.02% | -113/143 | -
| src/BigCalendar/components/Toolbar | -
-
- |
- 97.22% | -35/36 | -78.26% | -18/23 | -92.85% | -13/14 | -96.87% | -31/32 | -
| src/BigCalendar/components/WeekView | -
-
- |
- 62.5% | -20/32 | -38.88% | -7/18 | -57.14% | -4/7 | -66.66% | -20/30 | -
| src/BigCalendar/mocks | -
-
- |
- 0% | -0/0 | -0% | -0/0 | -0% | -0/0 | -0% | -0/0 | -
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 -19 -20 -21 -22 -23 -24 -25 -26 -27 -28 -29 -30 -31 -32 -33 -34 -35 -36 -37 -38 -39 -40 -41 -42 -43 -44 -45 -46 -47 -48 -49 -50 -51 -52 -53 -54 -55 -56 -57 -58 -59 -60 -61 -62 -63 -64 -65 -66 | - - - -1x -1x -1x -1x - -1x - -1x - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -1x - - - - - - - - - - - - - - - - - - - - | import PropTypes from 'prop-types';
-import { DateTime } from 'luxon';
-import { Views } from 'react-big-calendar';
-
-export const TIMEZONE = DateTime.local().zoneName;
-export const TODAY = DateTime.local().toJSDate();
-export const MONTH_RANGE = 'monthRange';
-export const firstDayOfWeek = 1;
-
-export const BIGCALENDAR_VIEWS = [Views.MONTH, Views.WEEK, Views.DAY, Views.AGENDA, MONTH_RANGE];
-
-export const BIG_CALENDAR_PROP_TYPES = {
- timezone: PropTypes.string,
- currentView: PropTypes.oneOf(BIGCALENDAR_VIEWS),
- defaultDate: PropTypes.instanceOf(Date),
- locale: PropTypes.string,
- events: PropTypes.array,
- messages: PropTypes.shape({
- month: PropTypes.string,
- week: PropTypes.string,
- day: PropTypes.string,
- agenda: PropTypes.string,
- today: PropTypes.string,
- previous: PropTypes.string,
- next: PropTypes.string,
- showWeekends: PropTypes.string,
- allDay: PropTypes.string,
- init: PropTypes.string,
- end: PropTypes.string,
- }),
- validRange: PropTypes.shape({
- start: PropTypes.instanceOf(Date),
- end: PropTypes.instanceOf(Date),
- }),
- hooks: PropTypes.func,
- showWeekends: PropTypes.bool,
- dateClick: PropTypes.func,
- onSelectDay: PropTypes.func,
- onRangeChange: PropTypes.func,
- onSelectEvent: PropTypes.func,
- eventClick: PropTypes.func,
- backgroundEventClick: PropTypes.func,
- addEventClick: PropTypes.func,
-};
-
-export const BIG_CALENDAR_DEFAULT_PROPS = {
- timezone: TIMEZONE,
- defaultDate: TODAY,
- currentView: Views.MONTH,
- showWeekends: true,
- locale: 'en-EN',
- messages: {
- month: 'Monthly',
- week: 'Weekly',
- day: 'Day',
- agenda: 'Agenda',
- today: 'Today',
- previous: 'Previous',
- next: 'Next',
- showWeekends: 'View weekends',
- allDay: 'All day',
- init: 'Init',
- end: 'End',
- },
-};
- |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 -19 -20 -21 -22 -23 -24 -25 -26 -27 -28 -29 -30 -31 -32 -33 -34 -35 -36 -37 -38 -39 -40 -41 -42 -43 -44 -45 -46 -47 -48 -49 -50 -51 -52 -53 -54 -55 -56 -57 -58 -59 -60 -61 -62 -63 -64 -65 -66 -67 -68 -69 -70 -71 -72 -73 -74 -75 -76 -77 -78 -79 -80 -81 -82 -83 -84 -85 -86 -87 -88 -89 -90 -91 -92 -93 -94 -95 -96 -97 -98 -99 -100 -101 -102 -103 -104 -105 -106 -107 -108 -109 -110 -111 -112 -113 -114 -115 -116 -117 -118 -119 -120 -121 -122 -123 -124 -125 -126 -127 -128 -129 -130 -131 -132 -133 -134 -135 -136 -137 -138 -139 -140 -141 -142 -143 -144 -145 -146 -147 -148 -149 -150 -151 -152 -153 -154 -155 -156 -157 -158 -159 -160 -161 -162 -163 -164 -165 -166 -167 -168 -169 -170 -171 -172 -173 -174 -175 -176 -177 -178 -179 -180 -181 -182 -183 -184 -185 -186 -187 -188 -189 -190 -191 -192 -193 -194 -195 -196 -197 -198 -199 -200 -201 -202 -203 -204 -205 -206 -207 -208 -209 -210 -211 -212 -213 -214 -215 -216 -217 -218 -219 -220 -221 -222 -223 -224 -225 -226 -227 -228 -229 -230 -231 -232 -233 -234 -235 -236 -237 -238 -239 -240 -241 -242 -243 -244 -245 -246 -247 -248 -249 -250 -251 -252 -253 -254 -255 -256 -257 -258 -259 -260 -261 -262 -263 -264 -265 -266 -267 -268 -269 -270 -271 -272 -273 -274 -275 -276 -277 -278 -279 -280 -281 -282 -283 -284 -285 -286 -287 -288 -289 -290 -291 -292 -293 -294 -295 -296 -297 -298 -299 -300 -301 -302 -303 -304 -305 -306 -307 -308 -309 -310 -311 -312 | - - - - - - - - - - - - - - - - - - - - - - - - - -1x - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -28x -28x -28x -28x - -28x - - - - - - - - - - - - - - - -28x - - - -28x -28x - - -28x - - - - - - -28x -10x - - - -1142x - - - - - - - -28x -26x -26x -16x -176x - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -176x - - - - -176x - - - - -176x -29x - - - - -26x - - - - - -28x - - - - -28x -17x -17x -1x -1x -1x - - - -16x -1x -1x -1x - - - -15x - - - -17x -17x -17x -17x -17x - - - -28x -1x -1x - - -28x - - - - - - - -28x -10x - - - - -10x -10x - - - - - - - - - -28x - - - - - -28x - - - - - - - - -30x - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -1x -1x - - - - -1x - | /* eslint-disable sonarjs/cognitive-complexity */
-/* eslint-disable prefer-const */
-import React, { forwardRef, useEffect, useMemo, useState } from 'react';
-import { forEach, isArray, isNil } from 'lodash';
-import { Box } from '@mantine/core';
-import { Calendar } from 'react-big-calendar';
-import { DateTime, Interval } from 'luxon';
-import { RRule } from 'rrule';
-import 'react-big-calendar/lib/css/react-big-calendar.css';
-
-import luxonLocalizer from './addons/LuxonLocalizer';
-import { ToolBar } from './components/Toolbar/Toolbar';
-import { BigCalendarStyles } from './BigCalendar.styles';
-import { MonthView } from './components/MonthView/MonthView';
-import { WeekView } from './components/WeekView/WeekView';
-import { DayView } from './components/DayView/DayView';
-import { MonthRangeView } from './components/MonthRangeView/MonthRangeView';
-import { EventWrapper } from './components/EventWrapper';
-import Agenda from './components/AgentView/AgentView';
-import {
- MONTH_RANGE,
- BIG_CALENDAR_DEFAULT_PROPS,
- firstDayOfWeek,
- BIG_CALENDAR_PROP_TYPES,
-} from './BigCalendar.constants';
-
-const BigCalendar = forwardRef(
- (
- {
- timezone,
- defaultDate: defaultDateProp,
- currentView,
- locale,
- events: eventsProp,
- style,
- className,
- validRange,
- messages,
- minimumStartDifference,
- monthRange,
- hooks,
- minHour,
- maxHour,
- weekDays,
- timeslots,
- timeslotHeight = 40,
- hideAllDayCells,
- toolbarRightNode = null,
- hideToolbar = false,
- forceBgColorToEvents,
- showToolbarAddButton = true,
- showToolbarToggleWeekend = true,
- showToolbarViewSwitcher = true,
- showWeekends: showWeekendsProp,
- printMode,
- dateClick = () => {},
- onSelectDay = () => {},
- onRangeChange = () => {},
- onSelectEvent = () => {},
- eventClick = () => {},
- addEventClick = () => {},
- },
- ref
- ) => {
- const [showType, setShowType] = useState('full');
- const [showWeekends, setShowWeekends] = useState(showWeekendsProp);
- const [dateRange, setDateRange] = useState(null);
- const [hooksCreated, setHooksCreated] = useState(false);
-
- useEffect(() => setShowWeekends(showWeekendsProp), [showWeekendsProp]);
-
- // let { availableViews, showToolbar } = useMemo(() => {
- // let views = { month: MonthView, week: WeekView, day: DayView, agenda: Agenda };
- // showToolbar = true;
-
- // if (currentView === MONTH_RANGE) {
- // views = { monthRange: MonthRangeView };
- // showToolbar = false;
- // }
- // return { availableViews: views, showToolbar };
- // }, [currentView]);
-
- let availableViews;
- let showToolbar;
-
- Iif (currentView === MONTH_RANGE) {
- availableViews = { monthRange: MonthRangeView };
- showToolbar = false;
- } else {
- availableViews = { month: MonthView, week: WeekView, day: DayView, agenda: Agenda };
- showToolbar = true;
- }
-
- Iif (hideToolbar) {
- showToolbar = false;
- }
-
- // Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·
- // TIMEZONE CONFIG
-
- const { localizer, defaultDate, scrollToTime, getNow } = useMemo(
- () => ({
- localizer: luxonLocalizer(DateTime, { firstDayOfWeek }),
- defaultDate: defaultDateProp,
- scrollToTime: DateTime.local().toJSDate(),
- getNow: () => DateTime.local().toJSDate(),
- }),
- [timezone]
- );
-
- // Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·
- // INTERACTION HANDLE
-
- const events = useMemo(() => {
- const acc = [];
- if (dateRange) {
- forEach(eventsProp, (ev) => {
- Iif (ev.rrule) {
- const diff = DateTime.fromJSDate(ev.end).diff(
- DateTime.fromJSDate(ev.start)
- ).milliseconds;
-
- const rule = new RRule({
- ...ev.rrule,
- dtstart: new Date(
- Date.UTC(
- dateRange.start.getFullYear(),
- dateRange.start.getMonth(),
- dateRange.start.getDate(),
- dateRange.start.getHours(),
- dateRange.start.getMinutes(),
- dateRange.start.getSeconds()
- )
- ),
- until: new Date(
- Date.UTC(
- dateRange.end.getFullYear(),
- dateRange.end.getMonth(),
- dateRange.end.getDate(),
- dateRange.end.getHours(),
- dateRange.end.getMinutes(),
- dateRange.end.getSeconds()
- )
- ),
- });
- const dates = rule.all();
- forEach(dates, (date) => {
- const evStart = new Date(ev.start);
- date.setHours(evStart.getHours(), evStart.getMinutes(), evStart.getSeconds());
- acc.push({
- ...ev,
- start: date,
- end: new Date(date.getTime() + diff),
- });
- });
- } else {
- const range = Interval.fromDateTimes(
- DateTime.fromJSDate(dateRange.start),
- DateTime.fromJSDate(dateRange.end)
- );
-
- const e = Interval.fromDateTimes(
- DateTime.fromJSDate(ev.start),
- DateTime.fromJSDate(ev.end)
- );
-
- if (range.e >= e.s && range.s <= e.e) {
- acc.push(ev);
- }
- }
- });
- }
- return acc;
- }, [eventsProp, JSON.stringify(dateRange)]);
-
- // Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·
- // INTERACTION HANDLE
-
- const handleDayClick = ({ args: [date] }) => {
- onSelectDay(date);
- dateClick(date);
- };
-
- const handleRangeChange = (range) => {
- let newRange = range;
- if (isArray(newRange) && newRange.length > 1) {
- const end = newRange[newRange.length - 1];
- end.setHours(23, 59, 59);
- newRange = {
- start: newRange[0],
- end,
- };
- } else if (isArray(newRange) && newRange.length === 1) {
- const end = new Date(newRange[0]);
- end.setHours(23, 59, 59);
- newRange = {
- start: newRange[0],
- end,
- };
- } else Iif (isArray(newRange)) {
- newRange = null;
- }
-
- Eif (newRange) {
- newRange.end.setHours(23, 59, 59, 59);
- newRange.start.setHours(0, 0, 0, 0);
- onRangeChange(newRange);
- setDateRange(newRange);
- }
- };
-
- const handleSelectEvent = (ev) => {
- onSelectEvent(ev);
- eventClick(ev);
- };
-
- const handleBgEventClick = ({ args: [ev] }) => {
- onSelectEvent(ev);
- eventClick(ev);
- };
-
- // Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·
- // HOOKS CONFIG
-
- useEffect(() => {
- Iif (!hooksCreated && !isNil(hooks)) {
- hooks.addAction('big-calendar:dayClick', handleDayClick);
- hooks.addAction('big-calendar:backgroundEventClick', handleBgEventClick);
- setHooksCreated(true);
- }
- return () => {
- Iif (hooksCreated && !isNil(hooks)) {
- hooks.removeAction('big-calendar:dayClick', handleDayClick);
- hooks.removeAction('big-calendar:backgroundEventClick', handleBgEventClick);
- }
- };
- }, [hooks]);
-
- // Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·
- // STYLES
-
- const { classes, cx } = BigCalendarStyles({
- timeslotHeight,
- isMonthRange: currentView === MONTH_RANGE,
- printMode,
- });
-
- return (
- <Box className={cx(classes.root, className)} style={style}>
- <Calendar
- ref={ref}
- components={{
- showType,
- eventWrapper: EventWrapper,
- toolbar: showToolbar
- ? (props) => (
- <ToolBar
- {...props}
- addEventClick={addEventClick}
- showType={showType}
- setShowType={setShowType}
- showWeekends={showWeekends}
- setShowWeekends={setShowWeekends}
- toolbarRightNode={toolbarRightNode}
- showToolbarAddButton={showToolbarAddButton}
- showToolbarToggleWeekend={showToolbarToggleWeekend}
- showToolbarViewSwitcher={showToolbarViewSwitcher}
- />
- )
- : false,
- cx,
- showWeekends,
- minHour,
- maxHour,
- weekDays,
- hideAllDayCells,
- minimumStartDifference,
- forceBgColorToEvents,
- firstDayOfWeek,
- }}
- toolbar={showToolbar}
- events={events}
- timeslots={timeslots}
- messages={messages}
- defaultView={currentView}
- defaultDate={defaultDate}
- scrollToTime={scrollToTime}
- localizer={localizer}
- getNow={getNow}
- culture={locale}
- endAccessor="end"
- startAccessor="start"
- onSelectEvent={handleSelectEvent}
- onRangeChange={handleRangeChange}
- validRange={validRange}
- dateMonthRange={monthRange}
- views={availableViews}
- printMode={printMode}
- />
- </Box>
- );
- }
-);
-
-BigCalendar.defaultProps = BIG_CALENDAR_DEFAULT_PROPS;
-BigCalendar.propTypes = BIG_CALENDAR_PROP_TYPES;
-
-export default BigCalendar;
-export { BigCalendar };
-
-BigCalendar.displayName = 'BigCalendar';
- |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 -19 -20 -21 -22 -23 -24 -25 -26 -27 -28 -29 -30 -31 -32 -33 -34 -35 -36 -37 -38 -39 -40 -41 -42 -43 -44 -45 -46 -47 -48 -49 -50 -51 -52 -53 -54 -55 -56 -57 -58 -59 -60 -61 -62 -63 -64 -65 -66 -67 -68 -69 -70 -71 -72 -73 -74 -75 -76 -77 -78 -79 -80 -81 -82 -83 -84 -85 -86 -87 -88 -89 -90 -91 -92 -93 -94 -95 -96 -97 -98 -99 -100 -101 -102 -103 -104 -105 -106 -107 -108 -109 -110 -111 -112 -113 -114 -115 -116 -117 -118 -119 -120 -121 -122 -123 -124 -125 -126 -127 -128 -129 -130 -131 -132 -133 -134 -135 -136 -137 -138 -139 -140 -141 -142 -143 -144 -145 -146 -147 -148 -149 -150 -151 -152 -153 -154 -155 | - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - | /* eslint-disable react/prop-types */
-import React, { useState } from 'react';
-import { Box, Button, ColorInput, DatePicker, Select, TextInput } from '@bubbles-ui/components';
-import { BigCalendar } from './BigCalendar';
-import { BIGCALENDAR_VIEWS } from './BigCalendar.constants';
-import mdx from './BigCalendar.mdx';
-import EVENTS from './mocks/events';
-
-export default {
- title: 'Organisms/Calendar/BigCalendar',
- parameters: {
- component: BigCalendar,
- docs: {
- page: mdx,
- },
- // design: {
- // type: 'figma',
- // url: 'https://www.figma.com/file/kcSXz3QZFByFDTumNgzPpV/?node-id=2962%3A31342',
- // },
- },
- argTypes: {
- currentView: { options: BIGCALENDAR_VIEWS, control: { type: 'select' } },
- locale: { options: ['es-ES', 'en-GB'], control: { type: 'select' } },
- eventClick: { action: 'Event pressed' },
- dateClick: { action: 'Date clicked' },
- onSelectDay: { action: 'Day selected' },
- onRangeChange: { action: 'Range changed' },
- onSelectEvent: { action: 'Event selected' },
- addEventClick: { action: 'Add Event clicked' },
- },
-};
-
-const heightValue = 'calc(100vh - 40px)';
-
-const Template = (props) => {
- let messages;
- const { locale } = props;
- if (locale === 'es-ES') {
- messages = {
- month: 'Mensual',
- week: 'Semanal',
- day: 'Diario',
- agenda: 'Agenda',
- today: 'Hoy',
- previous: 'Anterior',
- next: 'siguiente',
- showWeekends: 'Mostrar fines de semana',
- display: 'Mostrar',
- entirePeriod: 'Periodo completo',
- onlyInitAndEnd: 'Solo mostrar inicio y final',
- onlyEnd: 'Solo mostrar fecha lΓmite',
- };
- }
- return <BigCalendar {...props} messages={messages} style={{ height: heightValue }} />;
-};
-
-export const Playground = Template.bind({});
-
-Playground.args = {
- events: EVENTS,
- currentView: BIGCALENDAR_VIEWS[0],
- locale: 'es-ES',
- defaultDate: EVENTS[0].start,
-};
-
-const MonthRangeTemplate = (props) => <BigCalendar {...props} style={{ height: heightValue }} />;
-
-export const MonthRangeView = MonthRangeTemplate.bind({});
-
-MonthRangeView.args = {
- events: EVENTS,
- currentView: BIGCALENDAR_VIEWS[4],
- locale: 'es-ES',
- defaultDate: EVENTS[0].start,
- monthRange: {
- startYear: 2022,
- startMonth: 8,
- endYear: 2022,
- endMonth: 11,
- },
- printMode: false,
-};
-
-const EventCreationTemplate = (props) => {
- const [events, setEvents] = useState([]);
- const [eventTitle, setEventTitle] = useState('');
- const [borderStyle, setBorderStyle] = useState('');
- const [eventColor, setEventColor] = useState('#000000');
- const [borderColor, setBorderColor] = useState('#000000');
- const [eventStart, setEventStart] = useState(null);
- const [eventEnd, setEventEnd] = useState(null);
-
- const submitHandler = (e) => {
- e.preventDefault();
-
- const newEvent = {
- title: eventTitle,
- allDay: true,
- start: eventStart,
- end: eventEnd,
- originalEvent: {
- calendar: { bgColor: eventColor, borderStyle, borderColor },
- },
- };
-
- setEvents([...events, newEvent]);
- setEventTitle('');
- setBorderStyle('');
- setBorderColor('#000000');
- setEventColor('#000000');
- setEventStart(null);
- setEventEnd(null);
- };
-
- return (
- <Box style={{ height: heightValue, display: 'flex' }}>
- <Box style={{ maxWidth: 620, overflow: 'scroll' }}>
- <BigCalendar events={events} {...props} style={{ height: '100%' }} />
- </Box>
- <Box style={{ flex: 1, backgroundColor: 'whitesmoke', height: '100%', padding: 48 }}>
- <form
- onSubmit={submitHandler}
- style={{ display: 'flex', flexDirection: 'column', gap: 24 }}
- >
- <TextInput label="Event title" value={eventTitle} onChange={setEventTitle} />
- <Select
- label="Border style"
- data={['solid', 'dashed', 'dotted']}
- value={borderStyle}
- onChange={setBorderStyle}
- />
- <Box style={{ display: 'flex', gap: 8 }}>
- <ColorInput label="Event color" value={eventColor} onChange={setEventColor} />
- <ColorInput label="Border color" value={borderColor} onChange={setBorderColor} />
- </Box>
- <DatePicker label="Event start" value={eventStart} onChange={setEventStart} />
- <DatePicker label="Event end" value={eventEnd} onChange={setEventEnd} />
- <Button type="submit" rounded>
- AΓ±adir evento
- </Button>
- </form>
- </Box>
- </Box>
- );
-};
-
-export const EventCreationForm = EventCreationTemplate.bind({});
-
-EventCreationForm.args = {
- currentView: BIGCALENDAR_VIEWS[4],
- locale: 'es-ES',
- defaultDate: EVENTS[0].start,
- monthRange: { startYear: 2022, endYear: 2022, startMonth: 0, endMonth: 11 },
-};
- |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 -19 -20 -21 -22 -23 -24 -25 -26 -27 -28 -29 -30 -31 -32 -33 -34 -35 -36 -37 -38 -39 -40 -41 -42 -43 -44 -45 -46 -47 -48 -49 -50 -51 -52 -53 -54 -55 -56 -57 -58 -59 -60 -61 -62 -63 -64 -65 -66 -67 -68 -69 -70 -71 -72 -73 -74 -75 -76 -77 -78 -79 -80 -81 -82 -83 -84 -85 -86 -87 -88 -89 -90 -91 -92 -93 -94 -95 -96 -97 -98 -99 -100 -101 -102 -103 -104 -105 -106 -107 -108 -109 -110 -111 -112 -113 -114 -115 -116 -117 -118 -119 -120 -121 -122 -123 -124 -125 -126 -127 -128 -129 -130 -131 -132 -133 -134 -135 -136 -137 -138 -139 -140 -141 -142 -143 -144 -145 -146 -147 -148 -149 -150 -151 -152 -153 -154 -155 -156 -157 -158 -159 -160 -161 -162 -163 -164 -165 -166 -167 -168 -169 -170 -171 -172 -173 -174 -175 -176 -177 -178 -179 -180 -181 -182 -183 -184 -185 -186 -187 -188 -189 -190 -191 -192 -193 -194 -195 -196 -197 -198 -199 -200 -201 -202 -203 -204 -205 -206 -207 -208 -209 -210 -211 -212 -213 -214 -215 -216 -217 -218 -219 -220 -221 -222 -223 -224 -225 -226 -227 -228 -229 -230 -231 -232 -233 -234 -235 -236 -237 -238 -239 -240 -241 -242 -243 -244 -245 -246 -247 -248 -249 -250 -251 -252 -253 -254 -255 -256 -257 -258 -259 -260 -261 -262 -263 -264 -265 -266 -267 -268 -269 -270 -271 -272 -273 -274 -275 -276 -277 -278 -279 -280 -281 -282 -283 -284 -285 -286 -287 -288 -289 -290 -291 -292 -293 -294 -295 -296 -297 -298 -299 -300 -301 -302 -303 -304 -305 -306 -307 -308 -309 -310 -311 -312 -313 -314 -315 -316 -317 -318 -319 -320 -321 -322 -323 -324 -325 -326 -327 -328 -329 -330 -331 -332 -333 -334 -335 -336 -337 -338 -339 -340 -341 -342 -343 -344 -345 -346 -347 -348 -349 -350 -351 -352 -353 -354 -355 -356 -357 -358 -359 -360 -361 -362 -363 -364 -365 -366 -367 -368 -369 -370 -371 -372 -373 -374 -375 -376 -377 -378 -379 -380 -381 -382 -383 -384 -385 -386 -387 -388 -389 -390 -391 -392 -393 -394 -395 -396 -397 -398 -399 -400 -401 -402 -403 -404 -405 -406 -407 -408 -409 -410 -411 -412 -413 -414 -415 -416 -417 -418 -419 -420 | - - - -28x - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -28x - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -28x - - - - - - - - - - - - - - - - - - - - - - -28x - - - - - -28x - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -28x - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -28x - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -1x -28x - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - | /* eslint-disable import/prefer-default-export */
-/* eslint-disable sonarjs/cognitive-complexity */
-import { createStyles, getFontProductive, getPaddings, pxToRem } from '@bubbles-ui/components';
-
-const getEventStyles = (theme, isMonthRange) => ({
- '.rbc-event': {
- backgroundColor: theme.colors.interactive01,
- color: theme.colors.text07,
- borderRadius: 3,
- ...getPaddings(4, 4),
- height: isMonthRange && '100%',
- zIndex: isMonthRange && 99,
- '&.rbc-selected': {
- backgroundColor: theme.colors.interactive01h,
- },
-
- '&:focus': {
- outline: `5px auto ${theme.colors.interactive01d}`,
- },
- },
- '.rbc-event-content': {
- ...getFontProductive(theme.fontSizes['1']),
- position: 'relative',
- opacity: isMonthRange && '0',
- height: isMonthRange && '100%',
- },
- '.rbc-event-label': {
- ...getFontProductive(theme.fontSizes['1']),
- },
- '.rbc-event-overlaps': {
- boxShadow: `-1px 1px 5px 0px rgba(51,51,51,.5)`,
- },
-});
-
-const getMonthViewStyles = (theme, isMonthRange, printMode) => ({
- '.rbc-month-view': {
- // borderColor: theme.colors.ui04,
- border: 'none',
- borderBottom: !isMonthRange && `1px solid ${theme.colors.ui04}`,
- },
- '.rbc-month-row': {
- border: !isMonthRange && `1px solid ${theme.colors.ui04}`,
- borderTop: 'none',
- borderBottom: 'none',
- height: isMonthRange && (printMode ? 28 : 36),
- maxHeight: isMonthRange && (printMode ? 28 : 36),
- minHeight: isMonthRange && (printMode ? 28 : 36),
- },
- '.rbc-month-row + .rbc-month-row': {
- borderColor: theme.colors.ui04,
- borderTop: isMonthRange && 'none',
- },
- '.rbc-row-content': {
- height: isMonthRange && '100%',
- },
- '.rbc-row-content .rbc-row': {
- height: isMonthRange && '100%',
- },
- '.rbc-row-content > .rbc-row:first-of-type': {
- // position: 'relative',
- // zIndex: 99
- },
- '.rbc-row-content > .rbc-row:first-of-type .rbc-date-cell': {
- pointerEvents: isMonthRange ? 'none!important' : 'all!important',
- },
- '.rbc-event-row': {
- position: 'absolute',
- top: 0,
- bottom: 0,
- left: 0,
- right: 0,
- },
- '.rbc-date-cell': {
- ...getFontProductive(theme.fontSizes['1']),
- color: theme.colors.text02,
- padding: 4,
- height: isMonthRange && '100%',
- display: isMonthRange && 'flex',
- justifyContent: isMonthRange && 'center',
- alignItems: isMonthRange && 'center',
- a: {
- ...getPaddings(0, 2),
- fontSize: printMode && 12,
- zIndex: 9999,
- },
- },
- '.rbc-day-bg + .rbc-day-bg': {
- borderColor: theme.colors.ui04,
- borderLeft: isMonthRange && 'none',
- },
- 'rbc-rtl .rbc-day-bg + .rbc-day-bg': {
- borderColor: theme.colors.ui04,
- },
- '.rbc-date-cell.rbc-now': {
- fontWeight: isMonthRange && 400,
- },
- '.rbc-now a': {
- backgroundColor: !isMonthRange && theme.colors.interactive02,
- color: !isMonthRange && theme.colors.text07,
- borderRadius: !isMonthRange && 3,
- },
-});
-
-const getHeaderStyles = (theme, isMonthRange, printMode) => ({
- '.rbc-header': {
- ...getFontProductive(theme.fontSizes[isMonthRange ? '1' : '2'], 500),
- color: isMonthRange ? theme.colors.text06 : theme.colors.text02,
- textTransform: 'capitalize',
- border: 'none',
- borderBottom: !isMonthRange && `1px solid ${theme.colors.ui04}`,
- textAlign: isMonthRange ? 'center' : 'right',
- ...getPaddings(8, 5),
- height: isMonthRange && (printMode ? 28 : 36),
- paddingBottom: isMonthRange && printMode ? 0 : 8,
- paddingTop: isMonthRange && printMode ? 5 : 8,
- },
- '.rbc-header + .rbc-header': {
- border: 'none',
- borderBottom: !isMonthRange && `1px solid ${theme.colors.ui04}`,
- height: isMonthRange && (printMode ? 28 : 36),
- },
- '.rbc-rtl .rbc-header + .rbc-header': {
- borderColor: theme.colors.ui04,
- },
-});
-
-const getRowStyles = (isMonthRange) => ({
- '.rbc-row-segment': {
- padding: isMonthRange ? '0px' : '0 4px 1px 4px',
- },
-});
-
-const getTimeColumnStyles = (theme, { timeslotHeight }) => ({
- '.rbc-timeslot-group': {
- borderColor: theme.colors.ui04,
- minHeight: `${timeslotHeight}px`,
- },
- '.rbc-day-slot': {
- '.rbc-events-container': {
- marginRight: 0,
- },
- '.rbc-event': {
- border: 'none',
- backgroundColor: 'white',
- color: theme.colors.text01,
- '.rbc-event-label': {
- color: theme.colors.text04,
- },
- },
- '.rbc-background-event': {
- borderColor: theme.colors.interactive01h,
- },
- '.rbc-time-slot': {
- borderColor: theme.colors.ui02,
- },
- },
- '.rbc-time-view-resources': {
- '.rbc-time-gutter, .rbc-time-header-gutter': {
- borderColor: theme.colors.ui04,
- },
- },
- '.rbc-time-slot': {
- ...getFontProductive(12),
- color: theme.colors.text04,
- },
- '.rbc-time-gutter.rbc-time-column': {
- '.rbc-timeslot-group': {
- border: 'none',
- },
- '.rbc-label': {
- display: 'flex',
- justifyContent: 'flex-end',
- padding: '0 4px',
- },
- },
-});
-
-const getTimeGridStyles = (theme) => ({
- '.rbc-time-view': {
- border: 'none',
- marginTop: 10,
-
- '.rbc-header': {
- border: 'none',
- paddingTop: 0,
- paddingBottom: pxToRem(12),
- },
-
- '.rbc-allday-cell': {
- border: `1px solid ${theme.colors.ui04}`,
- },
-
- '.rbc-allday-cell + .rbc-allday-cell': {
- borderColor: theme.colors.ui04,
- },
-
- '&.hide-weekends': {
- '.rbc-time-content': {
- '.rbc-day-slot:nth-of-type(7)': {
- display: 'none',
- },
- '.rbc-day-slot:nth-of-type(8)': {
- display: 'none',
- },
- },
- '.rbc-day-bg': {
- '.rbc-day-bg:nth-of-type(6)': {
- display: 'none',
- },
- '.rbc-day-bg:nth-of-type(7)': {
- display: 'none',
- },
- },
- '.rbc-time-header': {
- '.rbc-header:nth-of-type(6)': {
- display: 'none',
- },
- '.rbc-header:nth-of-type(7)': {
- visibility: 'none',
- },
- /*
- '.rbc-day-bg:first-of-type': {
- display: 'none',
- },
- '.rbc-day-bg:last-of-type': {
- display: 'none',
- },
- '.rbc-date-cell:first-of-type': {
- display: 'none',
- },
- '.rbc-date-cell:last-of-type': {
- display: 'none',
- },
- */
- },
- },
-
- '.rbc-day-slot': {
- backgroundColor: theme.colors.ui03,
- },
- },
- '.rbc-time-header': {
- '&.rbc-overflowing': {
- border: 'none',
- },
-
- '> .rbc-row:first-of-type': {
- borderColor: theme.colors.ui04,
- },
- '> .rbc-row.rbc-row-resource': {
- borderColor: theme.colors.ui04,
- },
- },
- '.rbc-time-header-content': {
- border: 'none',
- marginRight: 2,
-
- '>.rbc-row.rbc-row-resource': {
- borderColor: theme.colors.ui04,
- },
-
- '.rbc-time-header-cell-single-day': {
- display: 'block',
- },
- },
- '.rbc-rtl .rbc-time-header-content': {
- borderColor: theme.colors.ui04,
- },
- '.rbc-time-content': {
- border: 'none',
- borderRight: `1px solid ${theme.colors.ui04}`,
-
- '> * + * > *': {
- borderColor: theme.colors.ui04,
- },
- },
- '.rbc-rtl .rbc-time-content > * + * > *': {
- borderColor: theme.colors.ui04,
- },
-});
-
-const getAgendaStyles = (theme) => ({
- '.rbc-agenda-view': {
- 'table.rbc-agenda-table': {
- border: '0px',
-
- 'tbody > tr': {
- border: '0px',
- '&:first-of-type': {
- td: {
- '&:first-of-type': {
- '.rbc-agenda-td-data': {
- borderRadius: '4px 0 0 0',
- },
- '&.rbc-agenda-date-cell': {
- '+.rbc-agenda-time-cell': {
- '+.rbc-agenda-event-cell': {
- '.rbc-agenda-td-data': {
- borderRadius: '0 4px 0 0',
- },
- },
- },
- },
- },
- },
- },
- td: {
- height: '0px',
- padding: '0px',
- border: '0px',
- '.rbc-continues-box': {
- fontSize: theme.fontSizes[1],
- padding: '2px 5px',
- background: theme.colors.uiBackground02,
- borderRadius: '4px',
- display: 'inline-block',
- verticalAlign: 'middle',
- marginLeft: theme.spacing[2],
- },
- '.rbc-agenda-td-data': {
- borderColor: `${theme.colors.ui01}!important`,
- paddingTop: theme.spacing[2],
- paddingBottom: theme.spacing[2],
- paddingLeft: theme.spacing[4],
- paddingRight: theme.spacing[4],
- height: '100%',
- },
- '&.rbc-agenda-date-cell': {
- '.rbc-agenda-td-data': {
- paddingLeft: theme.spacing[4],
- paddingRight: theme.spacing[4],
- },
- },
- '&.rbc-agenda-event-cell': {
- '.rbc-agenda-td-data': {
- borderRight: '1px solid',
- },
- },
- '&:first-of-type': {
- '&.rbc-agenda-date-cell': {
- '.rbc-agenda-td-data': {
- borderTop: '1px solid',
- borderLeft: '1px solid',
- },
- '+.rbc-agenda-time-cell': {
- '.rbc-agenda-td-data': {
- borderTop: '1px solid',
- },
- '+.rbc-agenda-event-cell': {
- '.rbc-agenda-td-data': {
- borderTop: '1px solid',
- },
- },
- },
- },
- },
- },
- },
- 'tbody > tr:first-of-type': {},
- 'tbody > tr:last-child': {
- td: {
- borderBottom: '1px solid',
- borderColor: `${theme.colors.ui01}!important`,
- },
- },
- 'thead > tr > th': {
- border: '0px',
- paddingLeft: theme.spacing[4],
- paddingBottom: theme.spacing[2],
- '&:first-of-type': {
- paddingLeft: 0,
- },
- },
- },
- },
- '.rbc-agenda-time-cell': {
- '.rbc-continues-after:after': {
- content: '""',
- },
- '.rbc-continues-prior:before': {
- content: '""',
- },
- },
-});
-
-export const BigCalendarStyles = createStyles(
- (theme, { timeslotHeight, isMonthRange, printMode }) => ({
- root: {
- '.rbc-off-range': {
- color: theme.colors.text06,
- },
- '.rbc-off-range-bg': {
- background: isMonthRange ? 'transparent' : theme.colors.ui03,
- },
- '.rbc-today': {
- background: 'transparent',
- },
- // Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·
- // HEADER
- ...getHeaderStyles(theme, isMonthRange, printMode),
- // Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·
- // ROW
- ...getRowStyles(isMonthRange),
- // Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·
- // EVENTS
- ...getEventStyles(theme, isMonthRange),
- // Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·
- // MONTH VIEW
- ...getMonthViewStyles(theme, isMonthRange, printMode),
- // Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·
- // TIME GRID
- ...getTimeColumnStyles(theme, { timeslotHeight }),
- ...getTimeGridStyles(theme),
- // Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·
- // AGENDA
- ...getAgendaStyles(theme),
- },
- }),
-);
- |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 -19 -20 -21 -22 -23 -24 -25 -26 -27 -28 -29 -30 -31 -32 -33 -34 -35 -36 -37 -38 -39 -40 -41 -42 -43 -44 -45 -46 -47 -48 -49 -50 -51 -52 -53 -54 -55 -56 -57 -58 -59 -60 -61 -62 -63 -64 -65 -66 -67 -68 -69 -70 -71 -72 -73 -74 -75 -76 -77 -78 -79 -80 -81 -82 -83 -84 -85 -86 -87 -88 -89 -90 -91 -92 -93 -94 -95 -96 -97 -98 -99 -100 -101 -102 -103 -104 -105 -106 -107 -108 -109 -110 -111 -112 -113 -114 -115 -116 -117 -118 -119 -120 -121 -122 -123 -124 -125 -126 -127 -128 -129 -130 -131 -132 -133 -134 -135 -136 -137 -138 -139 -140 -141 -142 -143 -144 -145 -146 -147 -148 -149 -150 -151 -152 -153 -154 -155 -156 -157 -158 -159 -160 -161 -162 -163 -164 -165 -166 -167 -168 -169 -170 -171 -172 -173 -174 -175 -176 -177 -178 -179 -180 -181 -182 -183 -184 -185 -186 -187 -188 -189 -190 -191 -192 -193 -194 -195 -196 -197 -198 -199 -200 -201 -202 -203 -204 -205 -206 -207 -208 -209 -210 -211 -212 -213 -214 -215 -216 -217 -218 -219 -220 -221 -222 -223 -224 -225 -226 -227 -228 -229 -230 -231 -232 -233 -234 -235 -236 -237 -238 -239 -240 -241 -242 -243 -244 -245 -246 -247 -248 -249 -250 -251 -252 -253 -254 -255 -256 -257 -258 -259 -260 -261 -262 -263 -264 -265 -266 -267 -268 -269 -270 -271 -272 -273 -274 -275 -276 -277 -278 -279 -280 -281 -282 -283 -284 -285 -286 -287 -288 -289 -290 -291 -292 -293 -294 -295 -296 -297 -298 -299 -300 -301 -302 -303 -304 -305 -306 -307 -308 -309 -310 -311 -312 -313 -314 -315 -316 -317 -318 -319 -320 -321 -322 -323 -324 -325 -326 -327 -328 -329 -330 -331 -332 -333 -334 -335 -336 -337 -338 -339 -340 -341 -342 -343 -344 -345 -346 -347 -348 -349 -350 -351 -352 -353 -354 -355 -356 -357 -358 -359 -360 -361 -362 -363 -364 -365 -366 -367 -368 -369 -370 -371 -372 -373 -374 -375 -376 -377 -378 -379 -380 -381 -382 -383 -384 -385 -386 -387 -388 -389 -390 -391 -392 -393 -394 -395 -396 -397 -398 -399 -400 -401 -402 -403 -404 -405 -406 -407 -408 -409 -410 -411 -412 -413 -414 -415 -416 | - - - - -6102x - - -1x -2x -2x -2x -2x - - - - -1x -2x - -1x - - -1x - - -1x - -1x - - - - - - - - - - - - - - - - - - - - - - - - -7892x -7892x - -7892x -1790x - -7892x - - - - - - - - - - - -1305x - - - - -3750x -3750x -3750x -3750x - - - - - - - -45x -45x - - -45x -45x - - - - - - -45x -45x -45x - - -45x -45x - - - - - - - -1937x -1937x -1937x -1937x - - - - - -5x - - - - -318x - - - - -78x -78x -78x -78x - - - - - -39x - - - -1682x - -1682x - - - -1622x - - - -168x -168x - - - -39x -39x - - - -31x -31x - - - -1830x -1830x - - - -180x -180x -180x -180x -180x - - - -31x -31x -31x -31x - - - -31x -31x -31x -31x - - - -40x - -40x -40x -40x - - - - - - - - - - -1763x -1763x - - - - - -33x -33x -33x - -33x -277x -277x - - -33x - - - -50x -50x - -50x - - - -101x - -101x -101x -101x - - - - - -39x -39x - - - -39x -39x - - - -37x -37x -37x - -37x -1323x -1323x - - -37x - - - - - - - - - - - - - -980x - - - - - - -20x - - - -20x -20x -20x - - - - - - -31x - - - -31x - - - - - - - - - - - - - - - - - - - - - - - -160x - -160x - -160x -160x - - - -160x - - - - - - -2581x -2581x -2581x - - - - - - - - - - - - - - -10x -10x -10x -10x - -10x -10x - - -10x - -1305x -1305x - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - | /* eslint-disable default-param-last */
-import { DateLocalizer } from 'react-big-calendar/lib/localizer';
-import { capitalize } from 'lodash';
-
-function pluralizeUnit(unit) {
- return /s$/.test(unit) ? unit : `${unit}s`;
-}
-
-const weekRangeFormat = ({ start, end }, culture, local) => {
- const sameMonth = local.eq(start, end, 'month');
- const monthFormat = sameMonth ? 'MMMM' : 'MMM';
- const monthFormatTemplate = `${monthFormat} dd`;
- return `${capitalize(local.format(start, monthFormatTemplate, culture))} - ${capitalize(
- local.format(end, sameMonth ? 'dd' : monthFormatTemplate, culture),
- )}`;
-};
-
-const dateRangeFormat = ({ start, end }, culture, local) =>
- `${local.format(start, 'D', culture)} β ${local.format(end, 'D', culture)}`;
-
-const timeRangeFormat = ({ start, end }, culture, local) =>
- `${local.format(start, 't', culture)} β ${local.format(end, 't', culture)}`;
-
-const timeRangeStartFormat = ({ start }, culture, local) =>
- `${local.format(start, 't', culture)} β `;
-
-const timeRangeEndFormat = ({ end }, culture, local) => ` β ${local.format(end, 't', culture)}`;
-
-export const formats = {
- dateFormat: 'dd',
- dayFormat: 'dd EEE',
- weekdayFormat: 'EEE',
- weekdayFullFormat: 'EEEE',
-
- selectRangeFormat: timeRangeFormat,
- eventTimeRangeFormat: timeRangeFormat,
- eventTimeRangeStartFormat: timeRangeStartFormat,
- eventTimeRangeEndFormat: timeRangeEndFormat,
-
- timeGutterFormat: 't',
-
- monthHeaderFormat: 'MMMM yyyy',
- // dayHeaderFormat: 'EEEE MMM dd',
- dayHeaderFormat: 'MMMM dd',
- dayRangeHeaderFormat: weekRangeFormat,
- agendaHeaderFormat: dateRangeFormat,
-
- agendaDateFormat: 'EEE MMM dd',
- agendaTimeFormat: 't',
- agendaTimeRangeFormat: timeRangeFormat,
-};
-
-function fixUnit(unit) {
- let datePart = unit ? pluralizeUnit(unit.toLowerCase()) : unit;
- Iif (datePart === 'FullYear') {
- datePart = 'year';
- } else if (!datePart) {
- datePart = undefined;
- }
- return datePart;
-}
-
-// Luxon does not currently have weekInfo by culture
-// Luxon uses 1 based values for month and weekday
-// So we default to Sunday (7)
-export default function LuxonLocalizer(DateTime, { firstDayOfWeek = 7 } = {}) {
- function formatDate(value, format) {
- return DateTime.fromJSDate(value).toFormat(format);
- }
-
- function formatDateWithCulture(value, culture, format) {
- return DateTime.fromJSDate(value).setLocale(culture).toFormat(format);
- }
-
- /** * BEGIN localized date arithmetic methods with Luxon ** */
- function defineComparators(a, b, unit) {
- const datePart = fixUnit(unit);
- const dtA = datePart ? DateTime.fromJSDate(a).startOf(datePart) : DateTime.fromJSDate(a);
- const dtB = datePart ? DateTime.fromJSDate(b).startOf(datePart) : DateTime.fromJSDate(b);
- return [dtA, dtB, datePart];
- }
-
- // Since Luxon (and current Intl API) has no support
- // for culture based weekInfo, we need to handle
- // the start of the week differently
- // depending on locale, the firstDayOfWeek could also be Saturday, Sunday or Monday
- function startOfDTWeek(dtObj) {
- const { weekday } = dtObj;
- Iif (weekday === firstDayOfWeek) {
- return dtObj.startOf('day'); // already beginning of week
- }
- Eif (firstDayOfWeek === 1) {
- return dtObj.startOf('week'); // fow is Monday, which is Luxon default
- }
- const diffDays = firstDayOfWeek === 7 ? weekday : weekday + (7 - firstDayOfWeek);
- return dtObj.minus({ day: diffDays }).startOf('day');
- }
-
- function endOfDTWeek(dtObj) {
- const { weekday } = dtObj;
- const eow = firstDayOfWeek === 1 ? 7 : firstDayOfWeek - 1;
- Iif (weekday === eow) {
- return dtObj.endOf('day'); // already last day of the week
- }
- Eif (firstDayOfWeek === 1) {
- return dtObj.endOf('week'); // use Luxon default (Sunday)
- }
- const fromDate = firstDayOfWeek > eow ? dtObj.plus({ day: firstDayOfWeek - eow }) : dtObj;
- return fromDate.set({ weekday: eow }).endOf('day');
- }
-
- // This returns a DateTime instance
- function startOfDT(date = new Date(), unit) {
- const datePart = fixUnit(unit);
- Eif (datePart) {
- const dt = DateTime.fromJSDate(date);
- return datePart.includes('week') ? startOfDTWeek(dt) : dt.startOf(datePart);
- }
- return DateTime.fromJSDate(date);
- }
-
- function firstOfWeek() {
- return firstDayOfWeek;
- }
-
- // This returns a JS Date from a DateTime instance
- function startOf(date = new Date(), unit) {
- return startOfDT(date, unit).toJSDate();
- }
-
- // This returns a DateTime instance
- function endOfDT(date = new Date(), unit) {
- const datePart = fixUnit(unit);
- Eif (datePart) {
- const dt = DateTime.fromJSDate(date);
- return datePart.includes('week') ? endOfDTWeek(dt) : dt.endOf(datePart);
- }
- return DateTime.fromJSDate(date);
- }
-
- function endOf(date = new Date(), unit) {
- return endOfDT(date, unit).toJSDate();
- }
-
- function eq(a, b, unit) {
- const [dtA, dtB] = defineComparators(a, b, unit);
- // eslint-disable-next-line eqeqeq
- return +dtA == +dtB;
- }
-
- function neq(a, b, unit) {
- return !eq(a, b, unit);
- }
-
- function gt(a, b, unit) {
- const [dtA, dtB] = defineComparators(a, b, unit);
- return +dtA > +dtB;
- }
-
- function lt(a, b, unit) {
- const [dtA, dtB] = defineComparators(a, b, unit);
- return +dtA < +dtB;
- }
-
- function gte(a, b, unit) {
- const [dtA, dtB] = defineComparators(a, b, unit);
- return +dtA >= +dtB;
- }
-
- function lte(a, b, unit) {
- const [dtA, dtB] = defineComparators(a, b, unit);
- return +dtA <= +dtB;
- }
-
- function inRange(day, minRange, maxRange, unit = 'day') {
- const datePart = fixUnit(unit);
- const mDay = startOfDT(day, datePart);
- const mMin = startOfDT(minRange, datePart);
- const mMax = startOfDT(maxRange, datePart);
- return +mDay >= +mMin && +mDay <= +mMax;
- }
-
- function min(dateA, dateB) {
- const dtA = DateTime.fromJSDate(dateA);
- const dtB = DateTime.fromJSDate(dateB);
- const minDt = DateTime.min(dtA, dtB);
- return minDt.toJSDate();
- }
-
- function max(dateA, dateB) {
- const dtA = DateTime.fromJSDate(dateA);
- const dtB = DateTime.fromJSDate(dateB);
- const maxDt = DateTime.max(dtA, dtB);
- return maxDt.toJSDate();
- }
-
- function merge(date, time) {
- Iif (!date && !time) return null;
-
- const tm = DateTime.fromJSDate(time);
- const dt = startOfDT(date, 'day');
- return dt
- .set({
- hour: tm.hour,
- minute: tm.minute,
- second: tm.second,
- millisecond: tm.millisecond,
- })
- .toJSDate();
- }
-
- function add(date, adder, unit) {
- const datePart = fixUnit(unit);
- return DateTime.fromJSDate(date)
- .plus({ [datePart]: adder })
- .toJSDate();
- }
-
- function range(start, end, unit = 'day') {
- const datePart = fixUnit(unit);
- let current = DateTime.fromJSDate(start).toJSDate(); // this is to get it to tz
- const days = [];
-
- while (lte(current, end)) {
- days.push(current);
- current = add(current, 1, datePart);
- }
-
- return days;
- }
-
- function ceil(date, unit) {
- const datePart = fixUnit(unit);
- const floor = startOf(date, datePart);
-
- return eq(floor, date) ? floor : add(floor, 1, datePart);
- }
-
- function diff(a, b, unit = 'day') {
- const datePart = fixUnit(unit);
- // don't use 'defineComparators' here, as we don't want to mutate the values
- const dtA = DateTime.fromJSDate(a);
- const dtB = DateTime.fromJSDate(b);
- return Math.round(
- dtB.diff(dtA, datePart, { conversionAccuracy: 'longterm' }).toObject()[datePart],
- );
- }
-
- function firstVisibleDay(date) {
- const startOfMonth = startOfDT(date, 'month');
- return startOfDTWeek(startOfMonth).toJSDate();
- }
-
- function lastVisibleDay(date) {
- const endOfMonth = endOfDT(date, 'month');
- return endOfDTWeek(endOfMonth).toJSDate();
- }
-
- function visibleDays(date) {
- let current = firstVisibleDay(date);
- const last = lastVisibleDay(date);
- const days = [];
-
- while (lte(current, last)) {
- days.push(current);
- current = add(current, 1, 'day');
- }
-
- return days;
- }
-
- /** * END localized date arithmetic methods with moment ** */
-
- /**
- * Moved from TimeSlots.js, this method overrides the method of the same name
- * in the localizer.js, using moment to construct the js Date
- * @param {Date} dt - date to start with
- * @param {Number} minutesFromMidnight
- * @param {Number} offset
- * @returns {Date}
- */
- function getSlotDate(dt, minutesFromMidnight, offset) {
- return startOfDT(dt, 'day')
- .set({ minutes: minutesFromMidnight + offset })
- .toJSDate();
- }
-
- // Luxon will automatically handle DST differences in it's calculations
- function getTotalMin(start, end) {
- return diff(start, end, 'minutes');
- }
-
- function getMinutesFromMidnight(start) {
- const dayStart = startOfDT(start, 'day');
- const day = DateTime.fromJSDate(start);
- return Math.round(
- day.diff(dayStart, 'minutes', { conversionAccuracy: 'longterm' }).toObject().minutes,
- );
- }
-
- // These two are used by DateSlotMetrics
- function continuesPrior(start, first) {
- return lt(start, first);
- }
-
- function continuesAfter(start, end, last) {
- return gte(end, last);
- }
-
- // These two are used by eventLevels
- function sortEvents({
- evtA: { start: aStart, end: aEnd, allDay: aAllDay },
- evtB: { start: bStart, end: bEnd, allDay: bAllDay },
- }) {
- const startSort = +startOf(aStart, 'day') - +startOf(bStart, 'day');
-
- const durA = diff(aStart, ceil(aEnd, 'day'), 'day');
-
- const durB = diff(bStart, ceil(bEnd, 'day'), 'day');
-
- return (
- startSort || // sort by start Day first
- Math.max(durB, 1) - Math.max(durA, 1) || // events spanning multiple days go first
- !!bAllDay - !!aAllDay || // then allDay single day events
- +aStart - +bStart || // then sort by start time *don't need moment conversion here
- +aEnd - +bEnd // then sort by end time *don't need moment conversion here either
- );
- }
-
- function inEventRange({ event: { start, end }, range: { start: rangeStart, end: rangeEnd } }) {
- const eStart = startOf(start, 'day');
-
- const startsBeforeEnd = lte(eStart, rangeEnd, 'day');
- // when the event is zero duration we need to handle a bit differently
- const sameMin = neq(eStart, end, 'minutes');
- const endsAfterStart = sameMin
- ? gt(end, rangeStart, 'minutes')
- : gte(end, rangeStart, 'minutes');
-
- return startsBeforeEnd && endsAfterStart;
- }
-
- // moment treats 'day' and 'date' equality very different
- // moment(date1).isSame(date2, 'day') would test that they were both the same day of the week
- // moment(date1).isSame(date2, 'date') would test that they were both the same date of the month of the year
- function isSameDate(date1, date2) {
- const dt = DateTime.fromJSDate(date1);
- const dt2 = DateTime.fromJSDate(date2);
- return dt.hasSame(dt2, 'day');
- }
-
- /**
- * This method, called once in the localizer constructor, is used by eventLevels
- * 'eventSegments()' to assist in determining the 'span' of the event in the display,
- * specifically when using a timezone that is greater than the browser native timezone.
- * @returns number
- */
- function browserTZOffset() {
- /**
- * Date.prototype.getTimezoneOffset horrifically flips the positive/negative from
- * what you see in it's string, so we have to jump through some hoops to get a value
- * we can actually compare.
- */
- const dt = new Date();
- const neg = /-/.test(dt.toString()) ? '-' : '';
- const dtOffset = dt.getTimezoneOffset();
- const comparator = Number(`${neg}${Math.abs(dtOffset)}`);
- // moment correctly provides positive/negative offset, as expected
- const mtOffset = DateTime.local().offset;
- return mtOffset > comparator ? 1 : 0;
- }
-
- return new DateLocalizer({
- format(value, format, culture) {
- Eif (culture) {
- return formatDateWithCulture(value, culture, format);
- }
- return formatDate(value, format);
- },
-
- formats,
-
- firstOfWeek,
- firstVisibleDay,
- lastVisibleDay,
- visibleDays,
-
- lt,
- lte,
- gt,
- gte,
- eq,
- neq,
- merge,
- inRange,
- startOf,
- endOf,
- range,
- add,
- diff,
- ceil,
- min,
- max,
-
- getSlotDate,
- getTotalMin,
- getMinutesFromMidnight,
- continuesPrior,
- continuesAfter,
- sortEvents,
- inEventRange,
- isSameDate,
- browserTZOffset,
- });
-}
- |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| File | -- | Statements | -- | Branches | -- | Functions | -- | Lines | -- |
|---|---|---|---|---|---|---|---|---|---|
| LuxonLocalizer.js | -
-
- |
- 86.42% | -121/140 | -54.28% | -38/70 | -88.88% | -40/45 | -87.68% | -121/138 | -
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 -19 -20 -21 -22 | - - - - - - - - - - - - - - - - - - - - - | import PropTypes from 'prop-types'; - -export const AGENDA_PROP_TYPES = { - accessors: PropTypes.object.isRequired, - components: PropTypes.object.isRequired, - date: PropTypes.instanceOf(Date), - events: PropTypes.array, - getters: PropTypes.object.isRequired, - length: PropTypes.number.isRequired, - localizer: PropTypes.object.isRequired, - onSelectEvent: PropTypes.func, - onDoubleClickEvent: PropTypes.func, - selected: PropTypes.object, -}; - -export const AGENDA_DEFAULT_PROPS = { - length: 30, -}; - -export const emptyPixel = - 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII='; - |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 -19 -20 -21 -22 -23 -24 -25 -26 -27 -28 -29 -30 -31 -32 -33 -34 -35 -36 -37 -38 -39 -40 -41 -42 -43 -44 -45 -46 -47 -48 -49 -50 -51 -52 -53 -54 -55 -56 -57 -58 -59 -60 -61 -62 -63 -64 -65 -66 -67 -68 -69 -70 -71 -72 -73 -74 -75 -76 -77 -78 -79 -80 -81 -82 -83 -84 -85 -86 -87 -88 -89 -90 -91 -92 -93 -94 -95 -96 -97 -98 -99 -100 -101 -102 -103 -104 -105 -106 -107 -108 -109 -110 -111 -112 -113 -114 -115 -116 -117 -118 -119 -120 -121 -122 -123 -124 -125 -126 -127 -128 -129 -130 -131 -132 -133 -134 -135 -136 -137 -138 -139 -140 -141 -142 -143 -144 -145 -146 -147 -148 -149 -150 -151 -152 -153 -154 -155 -156 -157 -158 -159 -160 -161 -162 -163 -164 -165 -166 -167 -168 -169 -170 -171 -172 -173 -174 -175 -176 -177 -178 -179 -180 -181 -182 -183 -184 -185 -186 -187 -188 -189 -190 -191 -192 -193 -194 -195 -196 -197 -198 -199 -200 -201 -202 -203 -204 -205 -206 -207 -208 -209 -210 -211 -212 -213 -214 -215 -216 -217 -218 -219 -220 -221 -222 -223 -224 -225 -226 -227 -228 -229 -230 -231 -232 -233 -234 -235 -236 -237 -238 -239 -240 -241 -242 -243 -244 -245 -246 -247 -248 -249 -250 -251 -252 -253 -254 -255 -256 -257 -258 -259 -260 -261 -262 -263 -264 -265 -266 -267 -268 -269 -270 -271 -272 -273 -274 -275 -276 -277 -278 -279 -280 -281 -282 -283 -284 -285 -286 -287 -288 -289 -290 -291 -292 -293 -294 -295 -296 -297 -298 -299 -300 -301 -302 -303 -304 -305 -306 -307 -308 -309 -310 -311 -312 -313 -314 -315 -316 -317 -318 -319 -320 -321 -322 -323 -324 -325 -326 -327 -328 -329 -330 -331 -332 -333 -334 -335 -336 -337 -338 -339 -340 -341 -342 -343 -344 -345 -346 -347 -348 -349 -350 -351 -352 -353 -354 -355 -356 -357 | - - - - - - - - - - - - - - - -1x - -1x -93x -93x -93x -93x - - - - - - - - - - - - - - - -2x -2x -2x -2x -2x - -2x -1x -1x -1x - - - - - -2x -2x - - -2x -62x - - - - - - - -93x - -62x -8x -8x -8x - -8x - -8x -8x -8x -8x -8x -8x - - -8x - - - - - - - - - - - - - - - - - - - -8x -8x - -8x - - - - -8x -8x -8x - -8x - - - - - - - - - - - - - - - - - - - - - - - -8x - -8x - - - -8x - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -2x -8x -8x -8x - -8x -8x - -8x -8x - -8x - -8x -2x -6x -2x - - - -8x -8x -8x -6x -6x - -8x -6x -6x - - -8x - - - - -8x - - - - - - - - - - - - - - - - - - - - -2x -2x - -2x -2x - -2x - -2x - -2x -2x - -2x - -2x -2x -2x - - -2x - - - -2x - - - -2x -2x - -2x - -2x -4x - - - - - - - - -2x - -2x - - - - - - - - - - - - - - - - - - -62x - - - - - - - - - - -1x - - - - - - - - - - - - -1x - - - -1x -1x -1x - - -1x - - - - - - - - - - - - -1x -2x -2x - - - - | import PropTypes from 'prop-types';
-import React, { useEffect, useRef } from 'react';
-import addClass from 'dom-helpers/addClass';
-import removeClass from 'dom-helpers/removeClass';
-import getWidth from 'dom-helpers/width';
-import scrollbarSize from 'dom-helpers/scrollbarSize';
-
-import { navigate } from 'react-big-calendar/lib/utils/constants';
-import { inRange } from 'react-big-calendar/lib/utils/eventLevels';
-import { isSelected } from 'react-big-calendar/lib/utils/selection';
-import { Avatar, Box, COLORS, ImageLoader, Text } from '@bubbles-ui/components';
-import { colord } from 'colord';
-import { eventCellStylesIcon, eventCellStylesRoot } from '../Event/EventCell';
-import { omit } from 'lodash';
-
-const emptyPixel =
- 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=';
-
-let customInRange = (event, day, localizer) => {
- const eStart = event.start;
- const eEnd = event.end;
- const dayIsRange = day >= eStart && day <= eEnd;
- return dayIsRange;
-};
-
-function Agenda({
- accessors,
- components,
- date,
- events,
- getters,
- length,
- localizer,
- onDoubleClickEvent,
- onSelectEvent,
- selected,
- ...props
-}) {
- const headerRef = useRef(null);
- const dateColRef = useRef(null);
- const timeColRef = useRef(null);
- const contentRef = useRef(null);
- const tbodyRef = useRef(null);
-
- useEffect(() => {
- const days = localizer.visibleDays(date, localizer);
- days[days.length - 1].setHours(23, 59, 59);
- props.onRangeChange({
- start: days[0],
- end: days[days.length - 1],
- });
- }, []);
-
- useEffect(() => {
- _adjustHeader();
- });
-
- const renderDay = (day, events, dayKey) => {
- const { event: Event, date: AgendaDate } = components;
-
- // Se estaba utilizando esta funcion pero por algun motivo no determinaba bien que el final del evento tambien
- // estaba dentro del rango
- // let newEvents = [...events];
- // events = events.filter((e) =>
- // inRange(e, localizer.startOf(day, 'day'), localizer.endOf(day, 'day'), accessors, localizer)
- // );
- events = events.filter((e) => customInRange(e, day, localizer));
-
- return events.map((event, idx) => {
- let title = accessors.title(event);
- let end = accessors.end(event);
- let start = accessors.start(event);
-
- const userProps = getters.eventProp(event, start, end, isSelected(event, selected));
-
- let dateLabel = idx === 0 && localizer.format(day, 'agendaDateFormat');
- const dates = {};
- Eif (idx === 0) {
- dates.day = localizer.format(day, 'dd');
- dates.dayOfWeek = localizer.format(day, 'ccc');
- dates.month = localizer.format(day, 'LLL');
- }
- let first =
- idx === 0 ? (
- <td rowSpan={events.length} className="rbc-agenda-date-cell">
- <Box className="rbc-agenda-td-data">
- {AgendaDate ? (
- <AgendaDate day={day} label={dateLabel} />
- ) : (
- <>
- <Text strong size="md">
- {dates.day}
- </Text>{' '}
- <Text strong>{dates.month.toUpperCase()}</Text>{' '}
- <Text strong>{dates.dayOfWeek.toUpperCase()}</Text>
- </>
- )}
- </Box>
- </td>
- ) : (
- false
- );
-
- const eventIcon = event.originalEvent.icon || event.originalEvent.calendar.icon;
- const eventImage = event.originalEvent.image;
-
- const styleData = {
- isAllDay: event.allDay,
- bgColor: event.originalEvent.bgColor || event.originalEvent.calendar.bgColor,
- };
-
- let root = eventCellStylesRoot(COLORS, styleData);
- let icon = eventCellStylesIcon(COLORS, styleData);
- icon = omit(icon, 'img');
-
- const avatar = {
- image: eventImage || null,
- icon: eventIcon ? (
- <Box style={icon}>
- <ImageLoader
- height="12px"
- width="12px"
- alt="event icon"
- imageStyles={{
- position: 'absolute',
- left: '50%',
- top: '50%',
- width: 12,
- transform: 'translate(-50%, -50%)',
- filter: 'brightness(0) invert(1)',
- }}
- src={eventIcon}
- forceImage
- />
- </Box>
- ) : null,
- color: event.originalEvent.bgColor || event.originalEvent.calendar.bgColor,
- };
-
- Iif (event.originalEvent.calendar.isUserCalendar) {
- avatar.fullName = event.originalEvent.calendar.fullName;
- } else Iif (!avatar.image && !avatar.icon) {
- avatar.image = emptyPixel;
- }
-
- return (
- <tr key={dayKey + '_' + idx} className={userProps.className} style={userProps.style}>
- {first}
- <td className="rbc-agenda-time-cell">
- <Box className="rbc-agenda-td-data">{timeRangeLabel(day, event)}</Box>
- </td>
- <td
- className="rbc-agenda-event-cell"
- onClick={(e) => onSelectEvent && onSelectEvent(event, e)}
- onDoubleClick={(e) => onDoubleClickEvent && onDoubleClickEvent(event, e)}
- >
- <Box className="rbc-agenda-td-data">
- {Event ? (
- <Event event={event} title={title} />
- ) : (
- <Box
- style={{
- ...root,
- display: 'flex',
- alignItems: 'center',
- paddingLeft: '4px',
- paddingTop: '6px',
- paddingBottom: '6px',
- }}
- >
- <Avatar mx="auto" size="sm" {...avatar} />
- <Text color="primary" role="productive" strong style={{ marginLeft: 4 }}>
- {title}
- </Text>
- </Box>
- )}
- </Box>
- </td>
- </tr>
- );
- }, []);
- };
-
- const timeRangeLabel = (day, event) => {
- let labelClass = '',
- TimeComponent = components.time,
- label = localizer.messages.allDay;
-
- let end = accessors.end(event);
- let start = accessors.start(event);
-
- Eif (!accessors.allDay(event)) {
- Iif (localizer.eq(start, end)) {
- label = localizer.format(start, 'agendaTimeFormat');
- } else Iif (localizer.isSameDate(start, end)) {
- label = localizer.format({ start, end }, 'agendaTimeRangeFormat');
- } else if (localizer.isSameDate(day, start)) {
- label = localizer.format(start, 'agendaTimeFormat');
- } else if (localizer.isSameDate(day, end)) {
- label = localizer.format(end, 'agendaTimeFormat');
- }
- }
-
- let prior = false;
- let after = false;
- if (localizer.gt(day, start, 'day')) {
- labelClass = 'rbc-continues-prior';
- prior = true;
- }
- if (localizer.lt(day, end, 'day')) {
- labelClass += ' rbc-continues-after';
- after = true;
- }
-
- const bgColor = colord(event.originalEvent.bgColor || event.originalEvent.calendar.bgColor)
- .desaturate(0.2)
- .alpha(0.2)
- .toRgbString();
-
- return (
- <span className={labelClass.trim()}>
- {TimeComponent ? (
- <TimeComponent event={event} day={day} label={label} />
- ) : (
- <Text role="productive" strong>
- {label}
- {(prior && !after) || (!prior && after) ? (
- <Box
- className="rbc-continues-box"
- style={event.allDay ? { backgroundColor: bgColor } : null}
- >
- {prior ? localizer.messages.end : localizer.messages.init}
- </Box>
- ) : null}
- </Text>
- )}
- </span>
- );
- };
-
- const _adjustHeader = () => {
- Iif (!tbodyRef.current) return;
-
- let header = headerRef.current;
- let firstRow = tbodyRef.current.firstChild;
-
- Iif (!firstRow) return;
-
- let isOverflowing = contentRef.current.scrollHeight > contentRef.current.clientHeight;
-
- let _widths = [];
- let widths = _widths;
-
- _widths = [getWidth(firstRow.children[0]), getWidth(firstRow.children[1])];
-
- Eif (widths[0] !== _widths[0] || widths[1] !== _widths[1]) {
- dateColRef.current.style.width = _widths[0] + 'px';
- timeColRef.current.style.width = _widths[1] + 'px';
- }
-
- Iif (isOverflowing) {
- addClass(header, 'rbc-header-overflowing');
- header.style.marginRight = scrollbarSize() + 'px';
- } else {
- removeClass(header, 'rbc-header-overflowing');
- }
- };
-
- let { messages } = localizer;
- let end = localizer.add(date, length, 'day');
-
- let range = localizer.range(date, end, 'day');
-
- events = events.filter((event) =>
- inRange(
- event,
- localizer.startOf(date, 'day'),
- localizer.endOf(end, 'day'),
- accessors,
- localizer
- )
- );
-
- events.sort((a, b) => +accessors.start(a) - +accessors.start(b));
-
- return (
- <div className="rbc-agenda-view">
- {events.length !== 0 ? (
- <React.Fragment>
- <table ref={headerRef} className="rbc-agenda-table">
- <thead>
- <tr>
- <th className="rbc-header" ref={dateColRef}>
- {messages.date}
- </th>
- <th className="rbc-header" ref={timeColRef}>
- {messages.time}
- </th>
- <th className="rbc-header">{messages.event}</th>
- </tr>
- </thead>
- </table>
- <div className="rbc-agenda-content" ref={contentRef}>
- <table className="rbc-agenda-table">
- <tbody ref={tbodyRef}>{range.map((day, idx) => renderDay(day, events, idx))}</tbody>
- </table>
- </div>
- </React.Fragment>
- ) : (
- <span className="rbc-agenda-empty">{messages.noEventsInRange}</span>
- )}
- </div>
- );
-}
-
-Agenda.propTypes = {
- accessors: PropTypes.object.isRequired,
- components: PropTypes.object.isRequired,
- date: PropTypes.instanceOf(Date),
- events: PropTypes.array,
- getters: PropTypes.object.isRequired,
- length: PropTypes.number.isRequired,
- localizer: PropTypes.object.isRequired,
- onSelectEvent: PropTypes.func,
- onDoubleClickEvent: PropTypes.func,
- selected: PropTypes.object,
-};
-
-Agenda.defaultProps = {
- length: 30,
-};
-
-Agenda.range = (start, { length = Agenda.defaultProps.length, localizer }) => {
- let end = localizer.add(start, length, 'day');
- return { start, end };
-};
-
-Agenda.navigate = (date, action, { length = Agenda.defaultProps.length, localizer }) => {
- switch (action) {
- case navigate.PREVIOUS:
- return localizer.add(date, -length, 'day');
-
- case navigate.NEXT:
- return localizer.add(date, length, 'day');
-
- default:
- return date;
- }
-};
-
-Agenda.title = (start, { length = Agenda.defaultProps.length, localizer }) => {
- let end = localizer.add(start, length, 'day');
- return localizer.format({ start, end }, 'agendaHeaderFormat');
-};
-
-export default Agenda;
- |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| File | -- | Statements | -- | Branches | -- | Functions | -- | Lines | -- |
|---|---|---|---|---|---|---|---|---|---|
| AgentView.constants.js | -
-
- |
- 0% | -0/3 | -100% | -0/0 | -100% | -0/0 | -0% | -0/3 | -
| AgentView.js | -
-
- |
- 87.5% | -98/112 | -60.25% | -47/78 | -82.35% | -14/17 | -88.88% | -96/108 | -
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 -19 -20 -21 -22 -23 -24 -25 -26 -27 -28 -29 -30 -31 -32 -33 -34 -35 -36 -37 -38 -39 -40 -41 -42 -43 -44 -45 -46 -47 -48 -49 -50 -51 -52 -53 -54 -55 -56 -57 -58 -59 -60 -61 -62 -63 -64 -65 -66 -67 -68 -69 -70 -71 -72 -73 -74 -75 -76 -77 -78 -79 -80 -81 -82 -83 -84 -85 -86 -87 -88 -89 -90 -91 -92 -93 -94 -95 -96 -97 -98 -99 -100 -101 -102 -103 -104 -105 -106 -107 -108 -109 -110 -111 -112 -113 -114 -115 -116 -117 -118 -119 -120 -121 -122 -123 -124 -125 -126 -127 -128 -129 -130 -131 -132 -133 -134 -135 -136 -137 -138 -139 -140 -141 -142 -143 -144 -145 -146 -147 -148 -149 -150 -151 -152 -153 -154 -155 -156 -157 -158 -159 -160 -161 -162 -163 -164 -165 -166 -167 -168 -169 -170 -171 -172 -173 -174 -175 -176 -177 -178 -179 -180 -181 -182 -183 -184 -185 -186 -187 -188 -189 -190 -191 -192 -193 -194 -195 -196 -197 -198 -199 -200 -201 -202 -203 -204 -205 -206 -207 -208 -209 -210 -211 -212 -213 -214 -215 -216 -217 -218 -219 -220 -221 -222 -223 -224 -225 -226 -227 -228 -229 -230 -231 -232 -233 -234 -235 -236 -237 -238 -239 -240 -241 -242 -243 -244 -245 -246 -247 -248 -249 -250 | - - - - - - - - - - - - -64x - -64x - - - - - -64x - - - -64x - - - -12x - -12x - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -76x - -76x -76x - -76x - - - - - - - - - - -76x - -76x - - - - - - - - - -76x - - -510x -510x - -510x -510x - -510x - -510x - -510x - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -64x - - - - - - - - - - - - - - - - - - -1x - - - - - - - - - - - - - - - - - - - - - - - - - | /* eslint-disable */
-import React from 'react';
-import PropTypes from 'prop-types';
-import { DateTime } from 'luxon';
-import _ from 'lodash';
-import { Box } from '@bubbles-ui/components';
-import { findDOMNode } from 'react-dom';
-import { notify } from 'react-big-calendar/lib/utils/helpers';
-import { dateCellSelection, getSlotAtX, pointInBox } from 'react-big-calendar/lib/utils/selection';
-import Selection, { getBoundsForNode, isEvent } from 'react-big-calendar/lib/Selection';
-
-class BackgroundCells extends React.Component {
- constructor(props, context) {
- super(props, context);
-
- this.state = {
- selecting: false,
- };
- }
-
- componentDidMount() {
- this.props.selectable && this._selectable();
- }
-
- componentWillUnmount() {
- this._teardownSelectable();
- }
-
- UNSAFE_componentWillReceiveProps(nextProps) {
- Iif (nextProps.selectable && !this.props.selectable) this._selectable();
-
- Iif (!nextProps.selectable && this.props.selectable) this._teardownSelectable();
- }
-
- onClickDate(date) {
- const hooks = this.props.components?.hooks;
- if (!_.isNil(hooks)) {
- hooks.fireEvent('big-calendar:dayClick', date);
- }
- }
-
- backgroundEventClick(event, e) {
- e.stopPropagation();
- e.preventDefault();
- const hooks = this.props.components?.hooks;
- if (!_.isNil(hooks)) {
- hooks.fireEvent('big-calendar:backgroundEventClick', event);
- }
- }
-
- render() {
- const {
- range,
- getNow,
- getters,
- date: currentDate,
- components: { cx, dateCellWrapper: Wrapper },
- localizer,
- events,
- accessors,
- hideBgTitles,
- } = this.props;
-
- const { selecting, startIdx, endIdx } = this.state;
- const current = getNow();
-
- const getDaysBetweenDates = function (startDate, endDate) {
- let now = DateTime.fromJSDate(startDate);
- const dates = [];
-
- while (now <= DateTime.fromJSDate(endDate)) {
- dates.push(now.toFormat('YYYY/MM/DD'));
- now = now.plus({ days: 1 });
- }
- return dates;
- };
-
- const eventsByDay = {};
-
- _.forEach(events, (event) => {
- const end = accessors.end(event);
- const start = accessors.start(event);
- const days = getDaysBetweenDates(start, end);
- _.forEach(days, (day) => {
- if (!_.isArray(eventsByDay[day])) eventsByDay[day] = [];
- eventsByDay[day].push(event);
- });
- });
-
- return (
- <Box className="rbc-row-bg">
- {range.map((date, index) => {
- const selected = selecting && index >= startIdx && index <= endIdx;
- let { className, style } = getters.dayProp(date);
-
- Eif (!_.isObject(style)) {
- style = {};
- }
- style.position = 'relative';
-
- const eventsForDay = eventsByDay[DateTime.fromJSDate(date).toFormat('YYYY/MM/DD')];
-
- return (
- <Wrapper key={index} value={date} range={range}>
- <Box
- style={style}
- className={cx('rbc-day-bg', className, {
- 'rbc-selected-cell': selected,
- 'rbc-today': localizer.isSameDate(date, current),
- 'rbc-off-range-bg': currentDate && localizer.neq(currentDate, date, 'month'),
- })}
- onClick={() => this.onClickDate(date)}
- >
- {eventsForDay ? (
- <Box
- onClick={(e) => this.backgroundEventClick(eventsForDay[0], e)}
- style={{
- position: 'absolute',
- left: 0,
- top: 0,
- width: '100%',
- height: '100%',
- padding: '4px',
- backgroundColor: eventsForDay[0].backgroundColor,
- }}
- >
- {!hideBgTitles ? eventsForDay[0].title : ''}
- </Box>
- ) : null}
- </Box>
- </Wrapper>
- );
- })}
- </Box>
- );
- }
-
- _selectable() {
- const node = findDOMNode(this);
- const selector = (this._selector = new Selection(this.props.container, {
- longPressThreshold: this.props.longPressThreshold,
- }));
-
- const selectorClicksHandler = (point, actionType) => {
- if (!isEvent(findDOMNode(this), point)) {
- const rowBox = getBoundsForNode(node);
- const { range, rtl } = this.props;
-
- if (pointInBox(rowBox, point)) {
- const currentCell = getSlotAtX(rowBox, point.x, rtl, range.length);
-
- this._selectSlot({
- startIdx: currentCell,
- endIdx: currentCell,
- action: actionType,
- box: point,
- });
- }
- }
-
- this._initial = {};
- this.setState({ selecting: false });
- };
-
- selector.on('selecting', (box) => {
- const { range, rtl } = this.props;
-
- let startIdx = -1;
- let endIdx = -1;
-
- if (!this.state.selecting) {
- notify(this.props.onSelectStart, [box]);
- this._initial = { x: box.x, y: box.y };
- }
- if (selector.isSelected(node)) {
- const nodeBox = getBoundsForNode(node);
- ({ startIdx, endIdx } = dateCellSelection(this._initial, nodeBox, box, range.length, rtl));
- }
-
- this.setState({
- selecting: true,
- startIdx,
- endIdx,
- });
- });
-
- selector.on('beforeSelect', (box) => {
- if (this.props.selectable !== 'ignoreEvents') return;
-
- return !isEvent(findDOMNode(this), box);
- });
-
- selector.on('click', (point) => selectorClicksHandler(point, 'click'));
-
- selector.on('doubleClick', (point) => selectorClicksHandler(point, 'doubleClick'));
-
- selector.on('select', (bounds) => {
- this._selectSlot({ ...this.state, action: 'select', bounds });
- this._initial = {};
- this.setState({ selecting: false });
- notify(this.props.onSelectEnd, [this.state]);
- });
- }
-
- _teardownSelectable() {
- Eif (!this._selector) return;
- this._selector.teardown();
- this._selector = null;
- }
-
- _selectSlot({ endIdx, startIdx, action, bounds, box }) {
- if (endIdx !== -1 && startIdx !== -1)
- this.props.onSelectSlot &&
- this.props.onSelectSlot({
- start: startIdx,
- end: endIdx,
- action,
- bounds,
- box,
- resourceId: this.props.resourceId,
- });
- }
-}
-
-BackgroundCells.propTypes = {
- date: PropTypes.instanceOf(Date),
- getNow: PropTypes.func.isRequired,
-
- getters: PropTypes.object.isRequired,
- components: PropTypes.object.isRequired,
-
- container: PropTypes.func,
- dayPropGetter: PropTypes.func,
- selectable: PropTypes.oneOf([true, false, 'ignoreEvents']),
- longPressThreshold: PropTypes.number,
-
- onSelectSlot: PropTypes.func.isRequired,
- onSelectEnd: PropTypes.func,
- onSelectStart: PropTypes.func,
-
- range: PropTypes.arrayOf(PropTypes.instanceOf(Date)),
- rtl: PropTypes.bool,
- type: PropTypes.string,
- resourceId: PropTypes.any,
-
- localizer: PropTypes.any,
-};
-
-export default BackgroundCells;
- |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 -19 -20 -21 -22 -23 -24 -25 -26 -27 -28 -29 -30 -31 -32 -33 -34 -35 -36 -37 -38 -39 -40 -41 -42 -43 -44 -45 -46 -47 -48 -49 -50 -51 -52 -53 -54 -55 -56 -57 -58 -59 -60 -61 -62 -63 -64 -65 -66 -67 -68 -69 -70 -71 -72 -73 -74 -75 -76 -77 -78 -79 -80 -81 -82 -83 -84 -85 -86 -87 -88 -89 -90 -91 -92 -93 -94 -95 -96 -97 -98 -99 -100 -101 -102 -103 -104 -105 -106 -107 -108 -109 -110 -111 -112 -113 -114 -115 -116 -117 -118 -119 -120 -121 -122 -123 -124 -125 -126 -127 -128 -129 -130 -131 -132 -133 -134 -135 -136 -137 -138 -139 -140 -141 -142 -143 -144 -145 -146 -147 -148 -149 -150 -151 -152 -153 -154 -155 -156 -157 -158 -159 -160 -161 -162 -163 -164 -165 -166 -167 -168 -169 -170 -171 -172 -173 -174 -175 -176 -177 -178 -179 -180 -181 -182 -183 -184 -185 -186 -187 -188 -189 -190 -191 -192 -193 -194 -195 -196 -197 -198 -199 -200 -201 -202 -203 -204 -205 -206 -207 -208 -209 -210 -211 -212 -213 -214 -215 -216 -217 -218 -219 -220 -221 -222 -223 -224 -225 -226 -227 -228 -229 -230 -231 -232 -233 -234 -235 -236 -237 -238 -239 -240 -241 -242 -243 -244 -245 -246 -247 -248 -249 -250 -251 -252 -253 -254 -255 -256 -257 -258 -259 -260 -261 -262 -263 -264 -265 -266 -267 -268 -269 -270 -271 -272 -273 -274 -275 -276 -277 -278 -279 -280 -281 -282 -283 -284 -285 -286 -287 -288 -289 -290 -291 -292 -293 -294 -295 | - - - - - - - - - - - - - - - - -55x - -54x - - -54x - - - - - -54x - - - - - - - - - - - -54x -252x - - -54x -124x - - -54x - - - - - -12x -12x -12x - -12x - - -54x -944x -944x -944x - -944x - - - - - - - -54x -62x -62x -62x - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -138x - -138x - - - - - - - - - - -138x - -76x -76x - -76x -31x - - -31x - - - -76x - - - - -76x - -76x -76x - -76x - - - - - - - - - - - - - - - - - - - - - - - -76x - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -35x - - - - - - - - - - - - - - - - - - - - - - - - - - -1x - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -1x - - - - - - | /* eslint-disable */
-import React from 'react';
-import PropTypes from 'prop-types';
-import { Box } from '@bubbles-ui/components';
-import getHeight from 'dom-helpers/height';
-import qsa from 'dom-helpers/querySelectorAll';
-import { findDOMNode } from 'react-dom';
-import NoopWrapper from 'react-big-calendar/lib/NoopWrapper';
-import ScrollableWeekWrapper from 'react-big-calendar/lib/ScrollableWeekWrapper';
-import * as DateSlotMetrics from 'react-big-calendar/lib/utils/DateSlotMetrics';
-
-import BackgroundCells from './BackgroundCells';
-import EventEndingRow from '../Event/EventEndingRow';
-import EventRow from '../Event/EventRow';
-
-class DateContentRow extends React.Component {
- constructor(...args) {
- super(...args);
-
- this.slotMetrics = DateSlotMetrics.getSlotMetrics();
- }
-
- handleSelectSlot = (slot) => {
- const { range, onSelectSlot } = this.props;
-
- onSelectSlot(range.slice(slot.start, slot.end + 1), slot);
- };
-
- handleShowMore = (slot, target) => {
- const { range, onShowMore } = this.props;
- const metrics = this.slotMetrics(this.props);
- const row = qsa(findDOMNode(this), '.rbc-row-bg')[0];
-
- let cell;
- if (row) cell = row.children[slot - 1];
-
- const events = metrics.getEventsForSlot(slot);
- onShowMore(events, range[slot - 1], cell, slot, target);
- };
-
- createHeadingRef = (r) => {
- this.headingRow = r;
- };
-
- createEventRef = (r) => {
- this.eventRow = r;
- };
-
- getContainer = () => {
- const { container } = this.props;
- return container ? container() : findDOMNode(this);
- };
-
- getRowLimit() {
- const eventHeight = getHeight(this.eventRow);
- const headingHeight = this.headingRow ? getHeight(this.headingRow) : 0;
- const eventSpace = getHeight(findDOMNode(this)) - headingHeight;
-
- return Math.max(Math.floor(eventSpace / eventHeight), 1);
- }
-
- renderHeadingCell = (date, index, range) => {
- let { renderHeader, getNow, localizer } = this.props;
- const { cx } = this.props.components;
- const isWeekend = index >= range.length - 2;
-
- return renderHeader({
- date,
- isWeekend,
- key: `header_${index}`,
- className: cx('rbc-date-cell', { 'rbc-now': localizer.isSameDate(date, getNow()) }),
- });
- };
-
- renderDummy = () => {
- let { className, range, renderHeader, showAllEvents } = this.props;
- const { cx } = this.props.components;
- return (
- <Box className={className}>
- <Box className={cx('rbc-row-content', { 'rbc-row-content-scrollable': showAllEvents })}>
- {renderHeader && (
- <Box className="rbc-row" ref={this.createHeadingRef}>
- {range.map(this.renderHeadingCell)}
- </Box>
- )}
- <Box className="rbc-row" ref={this.createEventRef}>
- <Box className="rbc-row-segment">
- <Box className="rbc-event">
- <Box className="rbc-event-content"> </Box>
- </Box>
- </Box>
- </Box>
- </Box>
- </Box>
- );
- };
-
- render() {
- const {
- date,
- rtl,
- range,
- className,
- selected,
- selectable,
- renderForMeasure,
- accessors,
- getters,
- components,
- events,
- getNow,
- renderHeader,
- onSelect,
- localizer,
- onSelectStart,
- onSelectEnd,
- onDoubleClick,
- onKeyPress,
- resourceId,
- longPressThreshold,
- isAllDay,
- resizable,
- showAllEvents,
- hideBgTitles,
- isMonthView,
- monthNumber,
- printMode,
- } = this.props;
-
- const { showWeekends, cx } = components;
- /*
-
- if (!showWeekends && isAllDay && range.length > 5) {
- // range.pop();
- // range.shift();
- range.pop();
- range.pop();
- }
- */
-
- if (renderForMeasure) return this.renderDummy();
-
- const normalEvents = [];
- const backgroundEvents = [];
-
- events.forEach((event) => {
- Iif (event.display === 'background') {
- backgroundEvents.push(event);
- } else {
- normalEvents.push(event);
- }
- });
-
- let metrics = this.slotMetrics({
- ...this.props,
- maxRows: isMonthView ? 20 : this.props.maxRows || undefined,
- events: normalEvents,
- });
- let { levels, extra } = metrics;
-
- let ScrollableWeekComponent = showAllEvents ? ScrollableWeekWrapper : NoopWrapper;
- let WeekWrapper = components.weekWrapper;
-
- const eventRowProps = {
- selected,
- accessors,
- getters,
- localizer,
- components,
- onSelect,
- onDoubleClick,
- onKeyPress,
- resourceId,
- slotMetrics: metrics,
- resizable,
- events,
- };
-
- /*
- if (isMonthView) {
- levels = _.flattenDeep(levels);
- levels = _.map(levels, (level) => [level]);
- }
- console.log('levels', levels);
-
- */
-
- return (
- <Box className={className} style={{ background: !isMonthView && '#F7F8FA' }} role="rowgroup">
- {/* BACKGROUND Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β· */}
- <BackgroundCells
- localizer={localizer}
- date={date}
- getNow={getNow}
- rtl={rtl}
- range={range}
- events={backgroundEvents}
- selectable={selectable}
- container={this.getContainer}
- getters={getters}
- accessors={accessors}
- onSelectStart={onSelectStart}
- onSelectEnd={onSelectEnd}
- onSelectSlot={this.handleSelectSlot}
- components={components}
- longPressThreshold={longPressThreshold}
- resourceId={resourceId}
- hideBgTitles={hideBgTitles}
- />
-
- {/* ROW CONTENT Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β· */}
- <Box
- className={cx('rbc-row-content', { 'rbc-row-content-scrollable': showAllEvents })}
- style={{ pointerEvents: isMonthView ? 'all' : 'none' }}
- role="presentation"
- >
- {/* DATE NUMBER Β·Β·Β·Β·Β·Β· */}
- {renderHeader ? (
- <Box className="rbc-row" style={{ pointerEvents: 'none' }} ref={this.createHeadingRef}>
- {range.map(this.renderHeadingCell)}
- </Box>
- ) : (
- <div>No renderHeader to show</div>
- )}
-
- {/* EVENTS Β·Β·Β·Β·Β·Β·Β·Β·Β·Β·Β· */}
- <ScrollableWeekComponent>
- <WeekWrapper isAllDay={isAllDay} {...eventRowProps}>
- {levels.map((segs, idx) => {
- return (
- <EventRow
- key={idx}
- segments={segs}
- monthNumber={monthNumber}
- isMonthView={isMonthView}
- range={range}
- printMode={printMode}
- {...eventRowProps}
- />
- );
- })}
- {!!extra.length && (
- <EventEndingRow
- segments={extra}
- onShowMore={this.handleShowMore}
- {...eventRowProps}
- />
- )}
- </WeekWrapper>
- </ScrollableWeekComponent>
- </Box>
- </Box>
- );
- }
-}
-
-DateContentRow.propTypes = {
- date: PropTypes.instanceOf(Date),
- events: PropTypes.array.isRequired,
- range: PropTypes.array.isRequired,
- rtl: PropTypes.bool,
- resizable: PropTypes.bool,
- resourceId: PropTypes.any,
- renderForMeasure: PropTypes.bool,
- renderHeader: PropTypes.func,
- container: PropTypes.func,
- selected: PropTypes.object,
- selectable: PropTypes.oneOf([true, false, 'ignoreEvents']),
- longPressThreshold: PropTypes.number,
- onShowMore: PropTypes.func,
- showAllEvents: PropTypes.bool,
- onSelectSlot: PropTypes.func,
- onSelect: PropTypes.func,
- onSelectEnd: PropTypes.func,
- onSelectStart: PropTypes.func,
- onDoubleClick: PropTypes.func,
- onKeyPress: PropTypes.func,
- dayPropGetter: PropTypes.func,
- getNow: PropTypes.func.isRequired,
- isAllDay: PropTypes.bool,
- accessors: PropTypes.object.isRequired,
- components: PropTypes.object.isRequired,
- getters: PropTypes.object.isRequired,
- localizer: PropTypes.object.isRequired,
- minRows: PropTypes.number.isRequired,
- maxRows: PropTypes.number.isRequired,
-};
-
-DateContentRow.defaultProps = {
- minRows: 0,
- maxRows: Infinity,
-};
-
-export default DateContentRow;
- |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| File | -- | Statements | -- | Branches | -- | Functions | -- | Lines | -- |
|---|---|---|---|---|---|---|---|---|---|
| BackgroundCells.js | -
-
- |
- 26.43% | -23/87 | -26.66% | -12/45 | -31.81% | -7/22 | -27.5% | -22/80 | -
| DateContentRow.js | -
-
- |
- 76.92% | -40/52 | -57.69% | -15/26 | -75% | -9/12 | -78% | -39/50 | -
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 -19 -20 -21 -22 -23 -24 -25 -26 -27 -28 -29 -30 -31 -32 -33 -34 -35 -36 -37 -38 -39 -40 -41 -42 -43 -44 -45 -46 -47 -48 -49 -50 -51 -52 -53 -54 -55 -56 -57 -58 -59 -60 -61 -62 -63 -64 -65 -66 -67 -68 -69 -70 -71 -72 -73 -74 -75 -76 -77 -78 -79 -80 -81 -82 -83 -84 -85 -86 -87 -88 -89 -90 -91 -92 -93 -94 -95 -96 -97 -98 -99 -100 -101 -102 -103 -104 -105 -106 -107 -108 -109 -110 -111 -112 -113 -114 -115 -116 -117 -118 -119 -120 -121 -122 -123 -124 -125 -126 -127 -128 -129 -130 -131 -132 -133 -134 -135 -136 -137 -138 -139 -140 -141 -142 -143 -144 -145 -146 -147 -148 -149 -150 -151 -152 -153 -154 -155 -156 -157 -158 -159 -160 -161 -162 -163 -164 -165 -166 -167 -168 -169 -170 -171 -172 -173 -174 -175 -176 -177 -178 -179 -180 -181 -182 -183 -184 -185 -186 -187 -188 -189 -190 -191 -192 -193 -194 -195 -196 -197 -198 -199 -200 -201 -202 -203 -204 -205 -206 -207 -208 -209 -210 -211 -212 -213 -214 -215 -216 -217 -218 -219 -220 -221 -222 -223 -224 -225 -226 -227 -228 -229 -230 -231 -232 -233 -234 -235 -236 -237 -238 -239 -240 -241 -242 -243 -244 -245 -246 -247 -248 -249 -250 -251 -252 -253 -254 -255 -256 -257 -258 -259 -260 -261 -262 -263 -264 -265 -266 -267 -268 -269 -270 -271 -272 -273 -274 -275 -276 -277 -278 -279 -280 -281 -282 -283 -284 -285 -286 -287 -288 -289 -290 -291 -292 -293 -294 -295 -296 -297 -298 -299 -300 -301 -302 -303 -304 -305 -306 -307 -308 -309 -310 -311 -312 -313 -314 -315 -316 -317 -318 -319 -320 -321 -322 -323 -324 -325 -326 -327 -328 -329 -330 -331 -332 -333 -334 -335 -336 -337 -338 -339 -340 -341 -342 -343 -344 -345 -346 -347 -348 -349 -350 -351 -352 -353 -354 -355 -356 -357 -358 -359 -360 -361 -362 -363 -364 -365 -366 -367 -368 -369 -370 -371 -372 -373 -374 -375 -376 -377 -378 -379 -380 -381 -382 -383 -384 -385 -386 -387 -388 -389 -390 -391 -392 -393 -394 -395 -396 -397 -398 -399 -400 -401 -402 -403 -404 -405 -406 -407 -408 -409 -410 -411 -412 -413 -414 -415 -416 -417 -418 -419 -420 -421 -422 -423 -424 -425 -426 -427 -428 -429 -430 -431 -432 -433 -434 -435 -436 -437 | - - - - - - - - - - - - - - - - - - - -8x - -8x - - -8x - -8x - - - -8x - -8x - - - - - -8x -8x - - - -8x -8x - -8x - - - -8x -8x - -8x - - - - - - - - - - -8x - - - - - - - - - - - - - - - - - - - - - - - - -8x -8x - - - - - - - - - - - - - - - - - - - - - - - - - - -16x - -16x -16x - -16x - -16x - -16x - -16x - - - - - - - - - - - - - - -384x - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -8x - - - - - - - - - - - -32x - -32x -32x - -32x - - - - - - - - - -32x - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -8x - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -8x -8x - - - - -8x - - - - - - - - - - - - - - - - - - - -8x - - - -8x - - - -8x - - - - -1x - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -1x - - - - - - | /* eslint-disable */
-import PropTypes from 'prop-types';
-import React from 'react';
-import { findDOMNode } from 'react-dom';
-import clsx from 'clsx';
-import _ from 'lodash';
-
-import Selection, { getBoundsForNode, isEvent } from 'react-big-calendar/lib/Selection';
-import * as TimeSlotUtils from 'react-big-calendar/lib/utils/TimeSlots';
-import { isSelected } from 'react-big-calendar/lib/utils/selection';
-
-import { notify } from 'react-big-calendar/lib/utils/helpers';
-import TimeSlotGroup from 'react-big-calendar/lib/TimeSlotGroup';
-import TimeGridEvent from 'react-big-calendar/lib/TimeGridEvent';
-import { DayLayoutAlgorithmPropType } from 'react-big-calendar/lib/utils/propTypes';
-
-import DayColumnWrapper from 'react-big-calendar/lib/DayColumnWrapper';
-import * as DayEventLayout from './DayEventLayout';
-
-class DayColumn extends React.Component {
- state = { selecting: false, timeIndicatorPosition: null };
-
- intervalTriggered = false;
-
- constructor(...args) {
- super(...args);
-
- this.slotMetrics = TimeSlotUtils.getSlotMetrics(this.props);
- }
-
- componentDidMount() {
- this.props.selectable && this._selectable();
-
- Iif (this.props.isNow) {
- this.setTimeIndicatorPositionUpdateInterval();
- }
- }
-
- componentWillUnmount() {
- this._teardownSelectable();
- this.clearTimeIndicatorInterval();
- }
-
- UNSAFE_componentWillReceiveProps(nextProps) {
- Iif (nextProps.selectable && !this.props.selectable) this._selectable();
- Iif (!nextProps.selectable && this.props.selectable) this._teardownSelectable();
-
- this.slotMetrics = this.slotMetrics.update(nextProps);
- }
-
- componentDidUpdate(prevProps, prevState) {
- const { getNow, isNow, localizer, date, min, max } = this.props;
- const getNowChanged = localizer.neq(prevProps.getNow(), getNow(), 'minutes');
-
- Iif (prevProps.isNow !== isNow || getNowChanged) {
- this.clearTimeIndicatorInterval();
-
- if (isNow) {
- const tail =
- !getNowChanged &&
- localizer.eq(prevProps.date, date, 'minutes') &&
- prevState.timeIndicatorPosition === this.state.timeIndicatorPosition;
-
- this.setTimeIndicatorPositionUpdateInterval(tail);
- }
- } else Iif (
- isNow &&
- (localizer.neq(prevProps.min, min, 'minutes') || localizer.neq(prevProps.max, max, 'minutes'))
- ) {
- this.positionTimeIndicator();
- }
- }
-
- /**
- * @param tail {Boolean} - whether `positionTimeIndicator` call should be
- * deferred or called upon setting interval (`true` - if deferred);
- */
- setTimeIndicatorPositionUpdateInterval(tail = false) {
- if (!this.intervalTriggered && !tail) {
- this.positionTimeIndicator();
- }
-
- this._timeIndicatorTimeout = window.setTimeout(() => {
- this.intervalTriggered = true;
- this.positionTimeIndicator();
- this.setTimeIndicatorPositionUpdateInterval();
- }, 60000);
- }
-
- clearTimeIndicatorInterval() {
- this.intervalTriggered = false;
- window.clearTimeout(this._timeIndicatorTimeout);
- }
-
- positionTimeIndicator() {
- const { min, max, getNow } = this.props;
- const current = getNow();
-
- if (current >= min && current <= max) {
- const top = this.slotMetrics.getCurrentTimePosition(current);
- this.intervalTriggered = true;
- this.setState({ timeIndicatorPosition: top });
- } else {
- this.clearTimeIndicatorInterval();
- }
- }
-
- render() {
- const {
- date,
- max,
- rtl,
- isNow,
- resource,
- accessors,
- localizer,
- getters: { dayProp, ...getters },
- components: { eventContainerWrapper: EventContainer, ...components },
- } = this.props;
-
- const { slotMetrics } = this;
- const { selecting, top, height, startDate, endDate } = this.state;
-
- const selectDates = { start: startDate, end: endDate };
-
- const { className, style } = dayProp(max);
-
- const DayColumnWrapperComponent = components.dayColumnWrapper || DayColumnWrapper;
-
- return (
- <DayColumnWrapperComponent
- date={date}
- style={style}
- className={clsx(
- className,
- 'rbc-day-slot',
- 'rbc-time-column',
- isNow && 'rbc-now',
- isNow && 'rbc-today', // WHY
- selecting && 'rbc-slot-selecting',
- )}
- slotMetrics={slotMetrics}
- >
- {slotMetrics.groups.map((grp, idx) => (
- <TimeSlotGroup
- key={idx}
- group={grp}
- resource={resource}
- getters={getters}
- components={components}
- />
- ))}
- <EventContainer
- localizer={localizer}
- resource={resource}
- accessors={accessors}
- getters={getters}
- components={components}
- slotMetrics={slotMetrics}
- >
- <div className={clsx('rbc-events-container', rtl && 'rtl')}>
- {this.renderEvents({
- events: this.props.backgroundEvents,
- isBackgroundEvent: true,
- })}
- {this.renderEvents({ events: this.props.events })}
- </div>
- </EventContainer>
-
- {selecting && (
- <div className="rbc-slot-selection" style={{ top, height }}>
- <span>{localizer.format(selectDates, 'selectRangeFormat')}</span>
- </div>
- )}
- {isNow && this.intervalTriggered && (
- <div
- className="rbc-current-time-indicator"
- style={{ top: `${this.state.timeIndicatorPosition}%` }}
- />
- )}
- </DayColumnWrapperComponent>
- );
- }
-
- renderEvents = ({ events, isBackgroundEvent }) => {
- const {
- rtl,
- selected,
- accessors,
- localizer,
- getters,
- components,
- step,
- timeslots,
- dayLayoutAlgorithm,
- resizable,
- } = this.props;
-
- const { slotMetrics } = this;
- const { messages } = localizer;
-
- const styledEvents = DayEventLayout.getStyledEvents({
- events,
- accessors,
- slotMetrics,
- minimumStartDifference: _.isNumber(components.minimumStartDifference)
- ? components.minimumStartDifference
- : Math.ceil((step * timeslots) / 2),
- dayLayoutAlgorithm,
- });
-
- return styledEvents.map(({ event, style }, idx) => {
- const end = accessors.end(event);
- const start = accessors.start(event);
- let format = 'eventTimeRangeFormat';
- let label;
-
- const startsBeforeDay = slotMetrics.startsBeforeDay(start);
- const startsAfterDay = slotMetrics.startsAfterDay(end);
-
- if (startsBeforeDay) format = 'eventTimeRangeEndFormat';
- else if (startsAfterDay) format = 'eventTimeRangeStartFormat';
-
- if (startsBeforeDay && startsAfterDay) label = messages.allDay;
- else label = localizer.format({ start, end }, format);
-
- const continuesPrior = startsBeforeDay || slotMetrics.startsBefore(start);
- const continuesAfter = startsAfterDay || slotMetrics.startsAfter(end);
-
- return (
- <TimeGridEvent
- style={style}
- event={event}
- label={label}
- key={`evt_${idx}`}
- getters={getters}
- rtl={rtl}
- components={components}
- continuesPrior={continuesPrior}
- continuesAfter={continuesAfter}
- accessors={accessors}
- selected={isSelected(event, selected)}
- onClick={(e) => this._select(event, e)}
- onDoubleClick={(e) => this._doubleClick(event, e)}
- isBackgroundEvent={isBackgroundEvent}
- onKeyPress={(e) => this._keyPress(event, e)}
- resizable={resizable}
- />
- );
- });
- };
-
- _selectable = () => {
- const node = findDOMNode(this);
- const { longPressThreshold, localizer } = this.props;
- const selector = (this._selector = new Selection(() => findDOMNode(this), {
- longPressThreshold,
- }));
-
- const maybeSelect = (box) => {
- const { onSelecting } = this.props;
- const current = this.state || {};
- const state = selectionState(box);
- const { startDate: start, endDate: end } = state;
-
- if (onSelecting) {
- if (
- (localizer.eq(current.startDate, start, 'minutes') &&
- localizer.eq(current.endDate, end, 'minutes')) ||
- onSelecting({ start, end, resourceId: this.props.resource }) === false
- )
- return;
- }
-
- if (
- this.state.start !== state.start ||
- this.state.end !== state.end ||
- this.state.selecting !== state.selecting
- ) {
- this.setState(state);
- }
- };
-
- let selectionState = (point) => {
- let currentSlot = this.slotMetrics.closestSlotFromPoint(point, getBoundsForNode(node));
-
- if (!this.state.selecting) {
- this._initialSlot = currentSlot;
- }
-
- let initialSlot = this._initialSlot;
- if (localizer.lte(initialSlot, currentSlot)) {
- currentSlot = this.slotMetrics.nextSlot(currentSlot);
- } else if (localizer.gt(initialSlot, currentSlot)) {
- initialSlot = this.slotMetrics.nextSlot(initialSlot);
- }
-
- const selectRange = this.slotMetrics.getRange(
- localizer.min(initialSlot, currentSlot),
- localizer.max(initialSlot, currentSlot),
- );
-
- return {
- ...selectRange,
- selecting: true,
-
- top: `${selectRange.top}%`,
- height: `${selectRange.height}%`,
- };
- };
-
- const selectorClicksHandler = (box, actionType) => {
- if (!isEvent(findDOMNode(this), box)) {
- const { startDate, endDate } = selectionState(box);
- this._selectSlot({
- startDate,
- endDate,
- action: actionType,
- box,
- });
- }
- this.setState({ selecting: false });
- };
-
- selector.on('selecting', maybeSelect);
- selector.on('selectStart', maybeSelect);
-
- selector.on('beforeSelect', (box) => {
- if (this.props.selectable !== 'ignoreEvents') return;
-
- return !isEvent(findDOMNode(this), box);
- });
-
- selector.on('click', (box) => selectorClicksHandler(box, 'click'));
-
- selector.on('doubleClick', (box) => selectorClicksHandler(box, 'doubleClick'));
-
- selector.on('select', (bounds) => {
- if (this.state.selecting) {
- this._selectSlot({ ...this.state, action: 'select', bounds });
- this.setState({ selecting: false });
- }
- });
-
- selector.on('reset', () => {
- if (this.state.selecting) {
- this.setState({ selecting: false });
- }
- });
- };
-
- _teardownSelectable = () => {
- Eif (!this._selector) return;
- this._selector.teardown();
- this._selector = null;
- };
-
- _selectSlot = ({ startDate, endDate, action, bounds, box }) => {
- let current = startDate;
- const slots = [];
-
- while (this.props.localizer.lte(current, endDate)) {
- slots.push(current);
- current = new Date(+current + this.props.step * 60 * 1000); // using Date ensures not to create an endless loop the day DST begins
- }
-
- notify(this.props.onSelectSlot, {
- slots,
- start: startDate,
- end: endDate,
- resourceId: this.props.resource,
- action,
- bounds,
- box,
- });
- };
-
- _select = (...args) => {
- notify(this.props.onSelectEvent, args);
- };
-
- _doubleClick = (...args) => {
- notify(this.props.onDoubleClickEvent, args);
- };
-
- _keyPress = (...args) => {
- notify(this.props.onKeyPressEvent, args);
- };
-}
-
-DayColumn.propTypes = {
- events: PropTypes.array.isRequired,
- backgroundEvents: PropTypes.array.isRequired,
- step: PropTypes.number.isRequired,
- date: PropTypes.instanceOf(Date).isRequired,
- min: PropTypes.instanceOf(Date).isRequired,
- max: PropTypes.instanceOf(Date).isRequired,
- getNow: PropTypes.func.isRequired,
- isNow: PropTypes.bool,
-
- rtl: PropTypes.bool,
- resizable: PropTypes.bool,
-
- accessors: PropTypes.object.isRequired,
- components: PropTypes.object.isRequired,
- getters: PropTypes.object.isRequired,
- localizer: PropTypes.object.isRequired,
-
- showMultiDayTimes: PropTypes.bool,
- culture: PropTypes.string,
- timeslots: PropTypes.number,
-
- selected: PropTypes.object,
- selectable: PropTypes.oneOf([true, false, 'ignoreEvents']),
- eventOffset: PropTypes.number,
- longPressThreshold: PropTypes.number,
-
- onSelecting: PropTypes.func,
- onSelectSlot: PropTypes.func.isRequired,
- onSelectEvent: PropTypes.func.isRequired,
- onDoubleClickEvent: PropTypes.func.isRequired,
- onKeyPressEvent: PropTypes.func,
-
- className: PropTypes.string,
- dragThroughEvents: PropTypes.bool,
- resource: PropTypes.any,
-
- dayLayoutAlgorithm: DayLayoutAlgorithmPropType,
-};
-
-DayColumn.defaultProps = {
- dragThroughEvents: true,
- timeslots: 2,
-};
-
-export default DayColumn;
- |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 -19 -20 -21 -22 -23 -24 -25 -26 -27 -28 -29 -30 -31 | - - - - -1x - - - - - -32x - - - - - - - -32x - -32x - -32x - - - - -32x - - | /* eslint no-unused-vars: "off" */
-/* eslint-disable */
-import overlap from './layout-algorithms/overlap';
-import noOverlap from './layout-algorithms/no-overlap';
-
-const DefaultAlgorithms = {
- overlap,
- 'no-overlap': noOverlap,
-};
-
-function isFunction(a) {
- return !!(a && a.constructor && a.call && a.apply);
-}
-
-//
-export function getStyledEvents({
- dayLayoutAlgorithm, // one of DefaultAlgorithms keys
- // or custom function
-}) {
- let algorithm = dayLayoutAlgorithm;
-
- Eif (dayLayoutAlgorithm in DefaultAlgorithms) algorithm = DefaultAlgorithms[dayLayoutAlgorithm];
-
- Iif (!isFunction(algorithm)) {
- // invalid algorithm
- return [];
- }
-
- return algorithm.apply(this, arguments);
-}
- |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 -19 -20 -21 -22 -23 -24 -25 -26 -27 -28 -29 -30 -31 -32 -33 -34 -35 -36 -37 -38 -39 -40 -41 -42 -43 -44 -45 -46 -47 -48 -49 -50 -51 -52 -53 -54 -55 -56 -57 -58 -59 -60 -61 -62 -63 -64 -65 -66 -67 | - - - - - - - - - - - - - - - - - - - - -1x -1x - -1x - - - - - - - - - - - - - -1x - - - - - - - -1x -2x - - -1x - - - - - - - - - - - - -1x - - - | /* eslint-disable */
-import React from 'react';
-import PropTypes from 'prop-types';
-import { navigate } from 'react-big-calendar/lib/utils/constants';
-
-import TimeGrid from '../TimeGrid/TimeGrid';
-
-class DayView extends React.Component {
- render() {
- /**
- * This allows us to default min, max, and scrollToTime
- * using our localizer. This is necessary until such time
- * as TimeGrid is converted to a functional component.
- */
- let {
- date,
- localizer,
- min = localizer.startOf(new Date(), 'day'),
- max = localizer.endOf(new Date(), 'day'),
- scrollToTime = localizer.startOf(new Date(), 'day'),
- ...props
- } = this.props;
- let range = DayView.range(date, { localizer: localizer });
-
- return (
- <TimeGrid
- {...props}
- range={range}
- eventOffset={10}
- localizer={localizer}
- min={min}
- max={max}
- scrollToTime={scrollToTime}
- />
- );
- }
-}
-
-DayView.propTypes = {
- date: PropTypes.instanceOf(Date).isRequired,
- localizer: PropTypes.any,
- min: PropTypes.instanceOf(Date),
- max: PropTypes.instanceOf(Date),
- scrollToTime: PropTypes.instanceOf(Date),
-};
-
-DayView.range = (date, { localizer }) => {
- return [localizer.startOf(date, 'day')];
-};
-
-DayView.navigate = (date, action, { localizer }) => {
- switch (action) {
- case navigate.PREVIOUS:
- return localizer.add(date, -1, 'day');
-
- case navigate.NEXT:
- return localizer.add(date, 1, 'day');
-
- default:
- return date;
- }
-};
-
-DayView.title = (date, { localizer }) => localizer.format(date, 'dayHeaderFormat');
-
-export { DayView };
- |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| File | -- | Statements | -- | Branches | -- | Functions | -- | Lines | -- |
|---|---|---|---|---|---|---|---|---|---|
| DayColumn.js | -
-
- |
- 29.71% | -41/138 | -23.4% | -22/94 | -32.25% | -10/31 | -31.25% | -40/128 | -
| DayEventLayout.js | -
-
- |
- 87.5% | -7/8 | -75% | -6/8 | -100% | -2/2 | -85.71% | -6/7 | -
| DayView.js | -
-
- |
- 69.23% | -9/13 | -33.33% | -2/6 | -75% | -3/4 | -66.66% | -8/12 | -
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| File | -- | Statements | -- | Branches | -- | Functions | -- | Lines | -- |
|---|---|---|---|---|---|---|---|---|---|
| no-overlap.js | -
-
- |
- 0% | -0/76 | -0% | -0/28 | -0% | -0/3 | -0% | -0/58 | -
| overlap.js | -
-
- |
- 13.33% | -10/75 | -0% | -0/33 | -16.66% | -2/12 | -13.63% | -9/66 | -
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 -19 -20 -21 -22 -23 -24 -25 -26 -27 -28 -29 -30 -31 -32 -33 -34 -35 -36 -37 -38 -39 -40 -41 -42 -43 -44 -45 -46 -47 -48 -49 -50 -51 -52 -53 -54 -55 -56 -57 -58 -59 -60 -61 -62 -63 -64 -65 -66 -67 -68 -69 -70 -71 -72 -73 -74 -75 -76 -77 -78 -79 -80 -81 -82 -83 -84 -85 -86 -87 -88 -89 -90 -91 -92 -93 -94 -95 -96 -97 -98 -99 -100 -101 -102 -103 -104 -105 | - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - | /* eslint-disable */ -import overlap from './overlap'; - -function getMaxIdxDFS(node, maxIdx, visited) { - for (let i = 0; i < node.friends.length; ++i) { - if (visited.indexOf(node.friends[i]) > -1) continue; - maxIdx = maxIdx > node.friends[i].idx ? maxIdx : node.friends[i].idx; - // TODO : trace it by not object but kinda index or something for performance - visited.push(node.friends[i]); - const newIdx = getMaxIdxDFS(node.friends[i], maxIdx, visited); - maxIdx = maxIdx > newIdx ? maxIdx : newIdx; - } - return maxIdx; -} - -export default function ({ events, minimumStartDifference, slotMetrics, accessors }) { - const styledEvents = overlap({ - events, - minimumStartDifference, - slotMetrics, - accessors, - }); - - styledEvents.sort((a, b) => { - a = a.style; - b = b.style; - if (a.top !== b.top) return a.top > b.top ? 1 : -1; - return a.top + a.height < b.top + b.height ? 1 : -1; - }); - - for (let i = 0; i < styledEvents.length; ++i) { - styledEvents[i].friends = []; - delete styledEvents[i].style.left; - delete styledEvents[i].style.left; - delete styledEvents[i].idx; - delete styledEvents[i].size; - } - - for (let i = 0; i < styledEvents.length - 1; ++i) { - const se1 = styledEvents[i]; - const y1 = se1.style.top; - const y2 = se1.style.top + se1.style.height; - - for (let j = i + 1; j < styledEvents.length; ++j) { - const se2 = styledEvents[j]; - const y3 = se2.style.top; - const y4 = se2.style.top + se2.style.height; - - // be friends when overlapped - if ((y3 <= y1 && y1 < y4) || (y1 <= y3 && y3 < y2)) { - // TODO : hashmap would be effective for performance - se1.friends.push(se2); - se2.friends.push(se1); - } - } - } - - for (let i = 0; i < styledEvents.length; ++i) { - const se = styledEvents[i]; - const bitmap = []; - for (let j = 0; j < 100; ++j) bitmap.push(1); // 1 means available - - for (let j = 0; j < se.friends.length; ++j) - if (se.friends[j].idx !== undefined) bitmap[se.friends[j].idx] = 0; // 0 means reserved - - se.idx = bitmap.indexOf(1); - } - - for (let i = 0; i < styledEvents.length; ++i) { - let size = 0; - - if (styledEvents[i].size) continue; - - const allFriends = []; - const maxIdx = getMaxIdxDFS(styledEvents[i], 0, allFriends); - size = 100 / (maxIdx + 1); - styledEvents[i].size = size; - - for (let j = 0; j < allFriends.length; ++j) allFriends[j].size = size; - } - - for (let i = 0; i < styledEvents.length; ++i) { - const e = styledEvents[i]; - e.style.left = e.idx * e.size; - - // stretch to maximum - let maxIdx = 0; - for (let j = 0; j < e.friends.length; ++j) { - const { idx } = e.friends[j]; - maxIdx = maxIdx > idx ? maxIdx : idx; - } - if (maxIdx <= e.idx) e.size = 100 - e.idx * e.size; - - // padding between events - // for this feature, `width` is not percentage based unit anymore - // it will be used with calc() - const padding = e.idx === 0 ? 0 : 3; - e.style.width = `calc(${e.size}% - ${padding}px)`; - e.style.height = `calc(${e.style.height}% - 2px)`; - e.style.xOffset = `calc(${e.style.left}% + ${padding}px)`; - } - - return styledEvents; -} - |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 -19 -20 -21 -22 -23 -24 -25 -26 -27 -28 -29 -30 -31 -32 -33 -34 -35 -36 -37 -38 -39 -40 -41 -42 -43 -44 -45 -46 -47 -48 -49 -50 -51 -52 -53 -54 -55 -56 -57 -58 -59 -60 -61 -62 -63 -64 -65 -66 -67 -68 -69 -70 -71 -72 -73 -74 -75 -76 -77 -78 -79 -80 -81 -82 -83 -84 -85 -86 -87 -88 -89 -90 -91 -92 -93 -94 -95 -96 -97 -98 -99 -100 -101 -102 -103 -104 -105 -106 -107 -108 -109 -110 -111 -112 -113 -114 -115 -116 -117 -118 -119 -120 -121 -122 -123 -124 -125 -126 -127 -128 -129 -130 -131 -132 -133 -134 -135 -136 -137 -138 -139 -140 -141 -142 -143 -144 -145 -146 -147 -148 -149 -150 -151 -152 -153 -154 -155 -156 -157 -158 -159 -160 -161 -162 -163 -164 -165 -166 -167 -168 -169 -170 -171 -172 -173 -174 -175 -176 -177 -178 -179 -180 -181 -182 -183 -184 -185 -186 -187 -188 -189 -190 -191 -192 | - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -32x - -32x -32x - - - - - - - - - - - - - - - - - - - - - - -32x - - - - - - - - - - - -32x -32x - - - - -32x -32x - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -32x - - - - - - - - - - | import { sortBy } from 'lodash';
-
-class Event {
- constructor(data, { accessors, slotMetrics }) {
- const { start, startDate, end, endDate, top, height } = slotMetrics.getRange(
- accessors.start(data),
- accessors.end(data)
- );
-
- this.start = start;
- this.end = end;
- this.startMs = +startDate;
- this.endMs = +endDate;
- this.top = top;
- this.height = height;
- this.data = data;
- }
-
- /**
- * The event's width without any overlap.
- */
- get _width() {
- // The container event's width is determined by the maximum number of
- // events in any of its rows.
- if (this.rows) {
- const columns =
- this.rows.reduce(
- (max, row) => Math.max(max, row.leaves.length + 1), // add itself
- 0
- ) + 1; // add the container
-
- return 100 / columns;
- }
-
- const availableWidth = 100 - this.container._width;
-
- // The row event's width is the space left by the container, divided
- // among itself and its leaves.
- if (this.leaves) {
- return availableWidth / (this.leaves.length + 1);
- }
-
- // The leaf event's width is determined by its row's width
- return this.row._width;
- }
-
- /**
- * The event's calculated width, possibly with extra width added for
- * overlapping effect.
- */
- get width() {
- const noOverlap = this._width;
- const overlap = Math.min(100, this._width * 1.7);
-
- // Containers can always grow.
- if (this.rows) {
- return overlap;
- }
-
- // Rows can grow if they have leaves.
- if (this.leaves) {
- return this.leaves.length > 0 ? overlap : noOverlap;
- }
-
- // Leaves can grow unless they're the last item in a row.
- const { leaves } = this.row;
- const index = leaves.indexOf(this);
- return index === leaves.length - 1 ? noOverlap : overlap;
- }
-
- get xOffset() {
- // Containers have no offset.
- if (this.rows) return 0;
-
- // Rows always start where their container ends.
- if (this.leaves) return this.container._width;
-
- // Leaves are spread out evenly on the space left by its row.
- const { leaves, xOffset, _width } = this.row;
- const index = leaves.indexOf(this) + 1;
- return xOffset + index * _width;
- }
-}
-
-/**
- * Return true if event a and b is considered to be on the same row.
- */
-function onSameRow(a, b, minimumStartDifference) {
- return (
- // Occupies the same start slot.
- Math.abs(b.start - a.start) < minimumStartDifference ||
- // A's start slot overlaps with b's end slot.
- (b.start > a.start && b.start < a.end)
- );
-}
-
-function sortByRender(events) {
- const sortedByTime = sortBy(events, ['startMs', (e) => -e.endMs]);
-
- const sorted = [];
- while (sortedByTime.length > 0) {
- const event = sortedByTime.shift();
- sorted.push(event);
-
- for (let i = 0; i < sortedByTime.length; i++) {
- const test = sortedByTime[i];
-
- // Still inside this event, look for next.
- if (event.endMs > test.startMs) continue;
-
- // We've found the first event of the next event group.
- // If that event is not right next to our current event, we have to
- // move it here.
- if (i > 0) {
- const event = sortedByTime.splice(i, 1)[0];
- sorted.push(event);
- }
-
- // We've already found the next event group, so stop looking.
- break;
- }
- }
-
- return sorted;
-}
-
-export default function getStyledEvents({
- events,
- minimumStartDifference,
- slotMetrics,
- accessors
- }) {
-
- // Create proxy events and order them so that we don't have
- // to fiddle with z-indexes.
- const proxies = events.map((event) => new Event(event, { slotMetrics, accessors }));
- const eventsInRenderOrder = sortByRender(proxies);
-
- // Group overlapping events, while keeping order.
- // Every event is always one of: container, row or leaf.
- // Containers can contain rows, and rows can contain leaves.
- const containerEvents = [];
- for (let i = 0; i < eventsInRenderOrder.length; i++) {
- const event = eventsInRenderOrder[i];
-
- // Check if this event can go into a container event.
- let container = containerEvents.find(
- (c) => c.end > event.start || Math.abs(event.start - c.start) < minimumStartDifference
- );
-
- // Couldn't find a container β that means this event is a container.
- if (!container) {
- event.rows = [];
- containerEvents.push(event);
- continue;
- }
-
- // Found a container for the event.
- event.container = container;
-
- // Check if the event can be placed in an existing row.
- // Start looking from behind.
- let row = null;
- for (let j = container.rows.length - 1; !row && j >= 0; j--) {
- if (onSameRow(container.rows[j], event, minimumStartDifference)) {
- row = container.rows[j];
- }
- }
-
- if (row) {
- // Found a row, so add it.
- row.leaves.push(event);
- event.row = row;
- } else {
- // Couldn't find a row β that means this event is a row.
- event.leaves = [];
- container.rows.push(event);
- }
- }
-
- // Return the original events, along with their styles.
- return eventsInRenderOrder.map((event) => ({
- event: event.data,
- style: {
- top: event.top,
- height: event.height,
- width: event.width,
- xOffset: Math.max(0, event.xOffset)
- }
- }));
-}
- |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 -19 -20 -21 -22 -23 -24 -25 -26 -27 -28 -29 -30 -31 -32 -33 -34 -35 -36 -37 -38 -39 -40 -41 -42 -43 -44 -45 -46 -47 -48 -49 -50 -51 -52 -53 -54 -55 -56 -57 -58 -59 -60 -61 -62 -63 -64 -65 -66 -67 -68 -69 -70 -71 -72 -73 -74 -75 -76 -77 -78 -79 -80 -81 -82 -83 -84 -85 -86 -87 -88 -89 -90 -91 -92 -93 -94 -95 -96 -97 -98 -99 -100 -101 -102 -103 -104 -105 -106 -107 -108 -109 -110 -111 -112 -113 -114 -115 -116 -117 -118 -119 -120 -121 -122 -123 -124 -125 -126 -127 -128 -129 -130 -131 -132 -133 -134 -135 -136 -137 -138 -139 -140 -141 -142 -143 -144 -145 -146 -147 -148 -149 -150 -151 -152 -153 -154 -155 -156 -157 -158 -159 -160 -161 -162 -163 -164 -165 -166 -167 -168 -169 -170 -171 -172 -173 -174 -175 -176 -177 -178 -179 -180 -181 -182 -183 -184 -185 -186 -187 -188 -189 -190 -191 -192 -193 -194 -195 -196 -197 -198 -199 -200 -201 -202 -203 -204 -205 -206 -207 -208 -209 -210 -211 -212 -213 -214 -215 -216 -217 -218 -219 -220 -221 -222 -223 -224 -225 -226 -227 -228 -229 -230 -231 -232 -233 -234 -235 -236 -237 -238 -239 -240 -241 -242 -243 -244 -245 -246 -247 -248 -249 -250 -251 -252 -253 -254 -255 -256 -257 -258 -259 -260 -261 -262 -263 -264 -265 -266 -267 -268 -269 -270 -271 -272 -273 -274 -275 -276 -277 -278 -279 -280 -281 -282 -283 -284 -285 -286 -287 -288 -289 -290 -291 -292 -293 -294 -295 -296 -297 -298 -299 -300 -301 -302 -303 -304 -305 -306 -307 -308 -309 -310 -311 -312 -313 -314 -315 -316 -317 -318 -319 -320 -321 -322 -323 -324 -325 -326 -327 -328 -329 -330 -331 -332 -333 -334 -335 -336 -337 -338 -339 -340 -341 -342 -343 -344 -345 -346 -347 -348 -349 -350 -351 -352 -353 -354 -355 -356 -357 -358 -359 -360 -361 -362 -363 -364 -365 -366 -367 -368 -369 -370 -371 -372 -373 -374 -375 -376 -377 -378 -379 -380 -381 -382 -383 -384 -385 -386 -387 -388 -389 -390 -391 -392 -393 -394 -395 -396 -397 -398 -399 -400 -401 -402 -403 -404 -405 -406 -407 -408 -409 -410 -411 -412 -413 -414 -415 -416 -417 -418 -419 -420 -421 -422 -423 -424 -425 -426 -427 -428 -429 -430 -431 -432 -433 -434 -435 -436 -437 -438 -439 -440 -441 -442 -443 -444 -445 -446 -447 -448 -449 -450 -451 -452 -453 -454 -455 -456 -457 -458 -459 -460 -461 -462 -463 -464 -465 -466 -467 -468 -469 -470 -471 -472 -473 -474 -475 -476 -477 -478 -479 -480 -481 -482 -483 -484 -485 -486 -487 -488 -489 -490 -491 -492 -493 -494 -495 -496 -497 -498 -499 -500 -501 -502 -503 -504 -505 -506 -507 -508 -509 -510 -511 -512 -513 -514 -515 -516 -517 -518 -519 -520 -521 -522 -523 -524 -525 -526 -527 -528 -529 -530 -531 -532 -533 -534 -535 -536 -537 -538 -539 -540 -541 -542 -543 -544 -545 -546 -547 -548 -549 -550 -551 -552 -553 -554 -555 -556 -557 -558 -559 -560 -561 -562 -563 -564 -565 -566 -567 -568 -569 -570 -571 -572 -573 -574 -575 -576 -577 -578 -579 -580 -581 -582 -583 -584 -585 -586 | - - - - - - - - -1x - - - - - - - - - - - - - - - - - - - -39x - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -39x - - - - -39x - - - - - - - - - - - - -39x - - - -39x - - - - - - - - - - - - - - - -1x -62x - -62x - - - - - - - - - -62x - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -1x - - - - - - - - - - - - - - - - - - - -31x - - - - - - - - - - - - - - - - - -31x -31x -31x - - - - - - - - -31x -31x -31x - - -31x - - - - -31x - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -31x - - - - - - - - - - - - - - - - - - - - - - - - - - - - -32x -31x - -31x - -31x -31x -31x -31x -31x -31x -31x -31x - - -31x - -31x - -31x - - - -31x -31x - -31x -31x - -31x -31x - -31x - - - - - - - - - - - - - - - - - - -31x - - - - - - - - - - - - - - - - - - - - - - - - - -31x - -31x - - - -31x -31x - -31x -28x -26x - - - - - -28x -25x - - - - - - -3x - - - -31x - - - - - -31x - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -31x -31x - - -31x - - - - - - - - - - -1x -1x - - - - - - - - - - - - - - - - - - - -31x - - - - - - - -31x -31x - - - - - - - - - - - - - - - -31x - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -1x - - - - - - - - - - - - - - - - - - - - - - - | /* eslint-disable */
-import PropTypes from 'prop-types';
-import React from 'react';
-import { Avatar, Box, createStyles, ImageLoader, Tooltip } from '@bubbles-ui/components';
-import { colord } from 'colord';
-import _ from 'lodash';
-import { DateTime } from 'luxon';
-
-const emptyPixel =
- 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=';
-
-function eventCellStylesRoot(
- colors,
- {
- zIndex = -1,
- desaturateColor = true,
- rotate = 0,
- isAllDay,
- bgColor,
- borderStyle,
- borderColor,
- oneDay,
- isMonthView,
- rightArrow,
- leftArrow,
- printMode,
- },
- imp
-) {
- const data = {
- position: 'relative',
- padding: '0px!important',
- backgroundColor: `${
- isAllDay
- ? _.isArray(bgColor)
- ? bgColor[0]
- : desaturateColor
- ? colord(bgColor).desaturate(0.2).alpha(0.2).toRgbString()
- : bgColor
- : colors.uiBackground01
- }${imp ? '!important' : ''}`,
- color: `${colors.text01}${imp ? '!important' : ''}`,
-
- border:
- isMonthView && !oneDay
- ? `2px ${borderStyle || 'dashed'} ${borderColor || colors.mainBlack}${
- imp ? '!important' : ''
- }`
- : `2px ${borderStyle || 'dashed'} transparent${imp ? '!important' : ''}`,
- borderRadius:
- !rightArrow && !leftArrow && isMonthView && oneDay
- ? `50%${imp ? '!important' : ''}`
- : `4px${imp ? '!important' : ''}`,
- fontWeight: 500,
- borderTopRightRadius: isMonthView && rightArrow && `0px${imp ? '!important' : ''}`,
- borderBottomRightRadius: isMonthView && rightArrow && `0px${imp ? '!important' : ''}`,
- borderTopLeftRadius: isMonthView && leftArrow && `0px${imp ? '!important' : ''}`,
- borderBottomLeftRadius: isMonthView && leftArrow && `0px${imp ? '!important' : ''}`,
- width:
- isMonthView &&
- (rightArrow || leftArrow) &&
- `${printMode ? '24px' : '32px'}${imp ? '!important' : ''}`,
- transform: isMonthView && `rotate(${rotate}deg)`,
- overflow: !leftArrow && !rightArrow && 'hidden',
- zIndex,
- borderRight: isMonthView && rightArrow && 'none!important',
- borderLeft: isMonthView && leftArrow && 'none!important',
- };
-
- Iif (isMonthView && borderColor) {
- data.border = `2px ${borderStyle || 'dashed'} ${borderColor || colors.mainBlack}${
- imp ? '!important' : ''
- }`;
- }
- Iif (isMonthView && _.isArray(bgColor)) {
- data.border = 'none';
- data['&:before'] = {
- content: '""',
- position: 'absolute',
- top: '50%',
- left: 0,
- width: '100%',
- height: '100%',
- zIndex: zIndex + 1,
- backgroundColor: bgColor[1],
- };
- }
- return data;
-}
-
-function eventCellStylesIcon(colors, { bgColor }, imp) {
- return {
- borderRadius: '50%',
- color: `${colors.text07}${imp ? '!important' : ''}`,
- backgroundColor: `${bgColor}${imp ? '!important' : ''}`,
- minWidth: '20px',
- minHeight: '20px',
- position: 'relative',
- alignItems: 'center',
- justifyContent: 'center',
- verticalAlign: 'middle',
- img: {
- filter: 'brightness(0) invert(1)',
- },
- };
-}
-
-const getArrowStyles = (rightArrow, leftArrow, bgColor, borderColor, printMode) => {
- const transparentBgColor = bgColor === 'transparent';
-
- const arrowBorder = {
- content: "''",
- position: 'absolute',
- left: rightArrow && -5,
- right: leftArrow && -5,
- width: 1.5,
- height: printMode ? 15 : 19,
- backgroundColor: borderColor,
- };
-
- return {
- position: 'absolute',
- top: printMode ? -2 : 0,
- bottom: 0,
- right: rightArrow && -4,
- left: leftArrow && -3.5,
- width: 0,
- height: 0,
- borderStyle: 'solid',
- borderWidth: rightArrow
- ? printMode
- ? '14px 0px 14px 4px'
- : '16px 0 16px 4px'
- : leftArrow
- ? printMode
- ? '14px 4px 14px 0px'
- : '16px 4px 16px 0px'
- : undefined,
- borderColor: transparentBgColor
- ? 'transparent transparent transparent transparent'
- : `transparent ${leftArrow ? colord(bgColor).toRgbString() : 'transparent'} transparent ${
- rightArrow ? colord(bgColor).toRgbString() : 'transparent'
- }`,
- '&:before': {
- ...arrowBorder,
- top: -1,
- transform: `rotate(${rightArrow ? '' : leftArrow ? '-' : ''}15deg)`,
- transformOrigin: 'bottom',
- },
- '&:after': {
- ...arrowBorder,
- bottom: -1,
- transform: `rotate(${rightArrow ? '-' : leftArrow ? '' : ''}15deg)`,
- transformOrigin: 'top',
- },
- };
-};
-
-const eventCellStyles = createStyles(
- (
- theme,
- {
- zIndex,
- desaturateColor,
- rotate,
- isAllDay,
- bgColor,
- borderStyle,
- borderColor,
- isMonthView,
- oneDay,
- rightArrow,
- leftArrow,
- printMode,
- bgStartGradient,
- bgEndGradient,
- }
- ) => {
- const root = eventCellStylesRoot(
- theme.colors,
- {
- zIndex,
- desaturateColor,
- rotate,
- isAllDay,
- bgColor,
- borderStyle,
- borderColor,
- isMonthView,
- oneDay,
- rightArrow,
- leftArrow,
- printMode,
- },
- true
- );
- let item = {};
- Eif (!isMonthView) {
- item = {
- borderRadius: root.borderRadius,
- backgroundColor: root.backgroundColor.replace('!important', ''),
- padding: theme.spacing[1],
- height: 34,
- display: 'flex!important',
- alignItems: 'center',
- justifyContent: 'space-between',
- };
- root.border = 'none';
- root.backgroundColor = 'transparent!important';
- Iif (bgStartGradient) {
- item.background = `linear-gradient(90deg, rgba(0,0,0,0) 0%, ${item.backgroundColor} 25%, ${item.backgroundColor} 100%)`;
- }
- Iif (bgEndGradient) {
- item.background = `linear-gradient(90deg,${item.backgroundColor} 0%, ${item.backgroundColor} 75%, rgba(0,0,0,0) 100%)`;
- }
- }
-
- return {
- root,
- icon: eventCellStylesIcon(theme.colors, { isAllDay, bgColor }, true),
- item,
- fRightArrow: {
- width: 26,
- height: 26,
- borderRadius: '4px 4px 4px 4px',
- backgroundColor: bgColor,
- display: 'flex',
- alignItems: 'center',
- justifyContent: 'center',
- position: 'relative',
- marginRight: 14,
- '&:after': {
- borderRadius: '4px',
- transform: 'rotate(45deg)',
- left: '50%',
- content: '""',
- display: 'block',
- position: 'absolute',
- width: 20,
- height: 20,
- backgroundColor: bgColor,
- },
- },
- fLeftArrow: {
- width: 26,
- height: 26,
- borderRadius: '4px 4px 4px 4px',
- backgroundColor: bgColor,
- display: 'flex',
- alignItems: 'center',
- justifyContent: 'center',
- position: 'relative',
- marginLeft: 14,
- '&:after': {
- borderRadius: '4px',
- transform: 'rotate(45deg)',
- right: '50%',
- content: '""',
- display: 'block',
- position: 'absolute',
- width: 20,
- height: 20,
- backgroundColor: bgColor,
- },
- },
- rightArrow: {
- ...getArrowStyles(rightArrow, leftArrow, bgColor, borderColor, printMode),
- },
- leftArrow: {
- ...getArrowStyles(rightArrow, leftArrow, bgColor, borderColor, printMode),
- },
- };
- }
-);
-
-export function sameDay(d1, d2) {
- return (
- d1.getFullYear() === d2.getFullYear() &&
- d1.getMonth() === d2.getMonth() &&
- d1.getDate() === d2.getDate()
- );
-}
-
-function EventCell(thisprops) {
- const {
- style,
- className,
- event,
- selected,
- isAllDay,
- onSelect,
- onDoubleClick,
- onKeyPress,
- localizer,
- continuesPrior,
- continuesAfter,
- accessors,
- getters,
- children,
- components: { cx, event: Event, eventWrapper: EventWrapper },
- slotStart,
- slotEnd,
- isMonthView,
- printMode,
- ...props
- } = thisprops;
- delete props.resizable;
-
- const { originalEvent } = event;
-
- const title = accessors.title(event);
- const tooltip = accessors.tooltip(event);
- const end = accessors.end(event);
- const start = accessors.start(event);
- const allDay = accessors.allDay(event);
- const isOnStartWeek = start >= slotStart && start <= slotEnd;
- const isOnEndWeek = end >= slotStart && end <= slotEnd;
- const isSameDay = sameDay(start, end);
-
- const showAsAllDay =
- isAllDay || allDay || localizer.diff(start, localizer.ceil(end, 'day'), 'day') > 1;
-
- const userProps = getters.eventProp(event, start, end, selected);
-
- userProps.style = {
- ...userProps.style,
- };
-
- const eventIcon = originalEvent.icon || originalEvent.calendar.icon;
- const eventImage = originalEvent.image;
-
- const { rightArrow } = event.originalEvent.calendar;
- const { leftArrow } = event.originalEvent.calendar;
-
- const eventBgColor = originalEvent.bgColor || originalEvent.calendar.bgColor;
- const eventzIndex = originalEvent.zIndex || originalEvent.calendar.zIndex;
-
- const { classes } = eventCellStyles({
- zIndex: eventzIndex,
- desaturateColor: originalEvent.desaturateColor || originalEvent.calendar.desaturateColor,
- rotate: originalEvent.rotate || originalEvent.calendar.rotate,
- isAllDay: showAsAllDay, // event.allDay,
- bgColor: eventBgColor,
- borderStyle: originalEvent.borderStyle || originalEvent.calendar.borderStyle,
- borderColor: originalEvent.borderColor || originalEvent.calendar.borderColor,
- oneDay:
- (localizer.isSameDate(start, end) && !event.realEnd) ||
- _.isArray(originalEvent.calendar.bgColor),
- isMonthView,
- rightArrow,
- leftArrow,
- printMode,
- bgStartGradient: (event.showType === 'onlyEnd' || event.endSide) && !isSameDay,
- bgEndGradient: event.startSide,
- });
-
- const avatar = {
- image: eventImage || null,
- icon:
- eventIcon && _.isString(eventIcon) ? (
- <Box className={classes.icon}>
- <ImageLoader
- width="12px"
- alt="event icon"
- height="12px"
- imageStyles={{
- position: 'absolute',
- left: '50%',
- top: '50%',
- width: 12,
- transform: 'translate(-50%, -50%)',
- }}
- src={eventIcon}
- forceImage
- />
- </Box>
- ) : (
- eventIcon
- ),
- color: originalEvent.bgColor || originalEvent.calendar.bgColor,
- };
-
- Iif (originalEvent.calendar.isUserCalendar) {
- avatar.fullName = originalEvent.calendar.fullName;
- } else Iif (!avatar.image && !avatar.icon) {
- avatar.image = emptyPixel;
- }
-
- let lAvatar = null;
- let rAvatar = null;
-
- if (!isSameDay) {
- if (isOnStartWeek && event.showType !== 'onlyEnd' && !event.endSide) {
- lAvatar = (
- <Box className={classes.fRightArrow}>
- <Avatar style={{ zIndex: 2 }} mx="auto" size="sm" {...avatar} />
- </Box>
- );
- }
- if (isOnEndWeek && !event.startSide) {
- rAvatar = (
- <Box className={classes.fLeftArrow}>
- <Avatar style={{ zIndex: 2 }} mx="auto" size="sm" {...avatar} />
- </Box>
- );
- }
- } else {
- lAvatar = <Avatar mx="auto" size="sm" {...avatar} />;
- }
-
- const content = (
- <Box
- style={{ pointerEvents: 'all' }}
- className={cx('rbc-event-content', classes.item)}
- title={tooltip || undefined}
- >
- <Box
- sx={() => ({
- display: 'flex',
- alignItems: 'center',
- whiteSpace: 'nowrap',
- width: '100%',
- maxWidth: rAvatar ? 'calc(100% - 30px)' : '100%',
- overflow: 'hidden',
- textOverflow: 'ellipsis',
- })}
- >
- {Event ? (
- <Event
- event={event}
- continuesPrior={continuesPrior}
- continuesAfter={continuesAfter}
- title={title}
- isAllDay={allDay}
- localizer={localizer}
- slotStart={slotStart}
- slotEnd={slotEnd}
- />
- ) : (
- <>
- {event.component ? (
- event.component
- ) : (
- <>
- {eventIcon && !_.isString(eventIcon) ? eventIcon : lAvatar}
-
- <Box
- style={{
- marginLeft: 4,
- whiteSpace: 'nowrap',
- maxWidth: lAvatar ? 'calc(100% - 30px)' : '100%',
- overflow: 'hidden',
- textOverflow: 'ellipsis',
- }}
- >
- {title}
- </Box>
- </>
- )}
- </>
- )}
- </Box>
- {rAvatar}
- </Box>
- );
-
- const oneDayStyle = isMonthView && originalEvent.calendar.oneDayStyle;
- const withTooltip = !!(isMonthView && title);
-
- const eventElement = (
- <Box
- {...props}
- tabIndex={0}
- style={{ ...userProps.style, ...style }}
- className={cx(classes.root, 'rbc-event', className, userProps.className, {
- 'rbc-selected': selected,
- 'rbc-event-allday': showAsAllDay,
- 'rbc-event-continues-prior': continuesPrior,
- 'rbc-event-continues-after': continuesAfter,
- })}
- onClick={(e) => {
- Eif (!isMonthView) {
- onSelect && onSelect(event, e);
- }
- }}
- onDoubleClick={(e) => {
- if (!isMonthView) {
- onDoubleClick && onDoubleClick(event, e);
- }
- }}
- onKeyPress={(e) => {
- if (!isMonthView) {
- onKeyPress && onKeyPress(event, e);
- }
- }}
- >
- {isMonthView ? null : typeof children === 'function' ? children(content) : content}
- {isMonthView && rightArrow && <Box className={classes.rightArrow} />}
- {isMonthView && leftArrow && <Box className={classes.leftArrow} />}
- </Box>
- );
-
- const finalContent = withTooltip ? (
- <Tooltip label={title} color="secondary">
- {eventElement}
- </Tooltip>
- ) : (
- eventElement
- );
-
- let arr = [];
- Iif (oneDayStyle) {
- const goodStart = DateTime.fromJSDate(event.start < slotStart ? slotStart : event.start);
- const goodEnd = DateTime.fromJSDate(event.end > slotEnd ? slotEnd : event.end);
- let sum = 1;
- if (event.end > slotEnd) {
- sum = 0;
- }
-
- const diff = goodEnd.diff(goodStart, ['days']);
- let finalDays = diff.days + sum;
- if (finalDays > 7) {
- finalDays = 7;
- }
- arr = [...Array(Math.ceil(finalDays)).keys()];
- }
-
- return (
- <EventWrapper {...thisprops} type="date">
- {oneDayStyle ? (
- <Box style={{ width: '100%', height: '100%', overflow: 'hidden', whiteSpace: 'nowrap' }}>
- {arr.map((i, index) => (
- <Box
- key={index}
- style={{
- position: 'relative',
- height: '100%',
- width: `${100 / arr.length}%`,
- display: 'inline-block',
- }}
- >
- <Box
- style={{
- position: 'absolute',
- left: 0,
- top: 0,
- width: '100%',
- height: '100%',
- }}
- >
- {finalContent}
- </Box>
- </Box>
- ))}
- </Box>
- ) : (
- finalContent
- )}
- </EventWrapper>
- );
-}
-
-EventCell.propTypes = {
- event: PropTypes.object.isRequired,
- slotStart: PropTypes.instanceOf(Date),
- slotEnd: PropTypes.instanceOf(Date),
-
- resizable: PropTypes.bool,
- selected: PropTypes.bool,
- isAllDay: PropTypes.bool,
- continuesPrior: PropTypes.bool,
- continuesAfter: PropTypes.bool,
-
- accessors: PropTypes.object.isRequired,
- components: PropTypes.object.isRequired,
- getters: PropTypes.object.isRequired,
- localizer: PropTypes.object,
-
- onSelect: PropTypes.func,
- onDoubleClick: PropTypes.func,
- onKeyPress: PropTypes.func,
-};
-
-export default EventCell;
-export { eventCellStyles, eventCellStylesRoot, eventCellStylesIcon };
- |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 -19 -20 -21 -22 -23 -24 -25 -26 -27 -28 -29 -30 -31 -32 -33 -34 -35 -36 -37 -38 -39 -40 -41 -42 -43 -44 -45 -46 -47 -48 -49 -50 -51 -52 -53 -54 -55 -56 -57 -58 -59 -60 -61 -62 -63 -64 -65 -66 -67 -68 -69 -70 -71 -72 -73 -74 -75 -76 -77 -78 -79 -80 -81 -82 -83 -84 -85 -86 -87 -88 -89 -90 -91 -92 -93 -94 -95 -96 -97 -98 -99 -100 -101 -102 -103 -104 -105 -106 -107 -108 -109 -110 -111 -112 -113 -114 -115 | - - - - - - - -1x -1x - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -1x - - - - - - -1x - - - - - | import React from 'react';
-import PropTypes from 'prop-types';
-import { range } from 'lodash';
-import { eventLevels } from 'react-big-calendar/lib/utils/eventLevels';
-import { Box, Anchor } from '@bubbles-ui/components';
-
-import EventRowMixin from './EventRowMixin';
-
-const isSegmentInSlot = (seg, slot) => seg.left <= slot && seg.right >= slot;
-const eventsInSlot = (segments, slot) =>
- segments.filter((seg) => isSegmentInSlot(seg, slot)).length;
-
-class EventEndingRow extends React.Component {
- render() {
- const {
- segments,
- slotMetrics: { slots },
- } = this.props;
- const rowSegments = eventLevels(segments).levels[0];
-
- let current = 1;
- let lastEnd = 1;
- const row = [];
-
- while (current <= slots) {
- const key = `_lvl_${current}`;
-
- const { event, left, right, span } =
- rowSegments.filter((seg) => isSegmentInSlot(seg, current))[0] || {}; //eslint-disable-line
-
- if (!event) {
- current++;
- // eslint-disable-next-line no-continue
- continue;
- }
-
- const gap = Math.max(0, left - lastEnd);
-
- if (this.canRenderSlotEvent(left, span)) {
- const content = EventRowMixin.renderEvent(this.props, event);
-
- if (gap) {
- row.push(EventRowMixin.renderSpan(slots, gap, `${key}_gap`));
- }
-
- row.push(EventRowMixin.renderSpan(slots, span, key, content));
-
- // eslint-disable-next-line no-multi-assign
- lastEnd = current = right + 1;
- } else {
- if (gap) {
- row.push(EventRowMixin.renderSpan(slots, gap, `${key}_gap`));
- }
-
- row.push(EventRowMixin.renderSpan(slots, 1, key, this.renderShowMore(segments, current)));
- // eslint-disable-next-line no-multi-assign
- lastEnd = current += 1;
- }
- }
-
- return (
- <Box className="rbc-row" style={{ pointerEvents: 'all' }}>
- {row}
- </Box>
- );
- }
-
- canRenderSlotEvent(slot, span) {
- const { segments } = this.props;
-
- return range(slot, slot + span).every((s) => {
- const count = eventsInSlot(segments, s);
-
- return count === 1;
- });
- }
-
- renderShowMore(segments, slot) {
- const { localizer } = this.props;
- const count = eventsInSlot(segments, slot);
-
- return count ? (
- <Anchor
- key={`sm_${slot}`}
- href="#"
- className={'rbc-show-more'}
- onClick={(e) => this.showMore(slot, e)}
- >
- {localizer.messages.showMore(count)}
- </Anchor>
- ) : (
- false
- );
- }
-
- showMore(slot, e) {
- e.preventDefault();
- e.stopPropagation();
- this.props.onShowMore(slot, e.target);
- }
-}
-
-EventEndingRow.propTypes = {
- segments: PropTypes.array,
- slots: PropTypes.number,
- onShowMore: PropTypes.func,
- ...EventRowMixin.propTypes,
-};
-
-EventEndingRow.defaultProps = {
- ...EventRowMixin.defaultProps,
-};
-
-export default EventEndingRow;
- |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 -19 -20 -21 -22 -23 -24 -25 -26 -27 -28 -29 -30 -31 -32 -33 -34 -35 -36 -37 -38 -39 -40 -41 -42 -43 -44 -45 -46 -47 -48 -49 -50 -51 -52 -53 -54 -55 -56 -57 -58 -59 -60 -61 -62 -63 -64 -65 -66 -67 -68 -69 -70 -71 -72 -73 -74 -75 -76 -77 -78 -79 -80 -81 -82 -83 -84 -85 -86 -87 -88 -89 -90 | - - - - - - - - - - - - - - -36x - -35x - -35x -31x -31x -31x - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -31x -31x -31x - - - - - - -31x - -31x - - -35x - - - - -1x - - - - -1x - - - - - | import React from 'react';
-import PropTypes from 'prop-types';
-import { Box } from '@bubbles-ui/components';
-import { DateTime } from 'luxon';
-import EventRowMixin from './EventRowMixin';
-
-function EventRow(props) {
- const {
- segments,
- components: { showType, cx },
- slotMetrics: { slots },
- className,
- isMonthView,
- slotMetrics,
- printMode,
- } = props;
-
- let lastEnd = 1;
-
- const customRow = segments.reduce((row, { event, left, right, span }, li) => {
- const key = `_lvl_${li}`;
- const gap = left - lastEnd;
- Iif (isMonthView) {
- const content = EventRowMixin.renderEvent(props, event, isMonthView, printMode);
-
- const goodFirst = DateTime.fromJSDate(slotMetrics.first);
- const goodStart = DateTime.fromJSDate(
- event.start < slotMetrics.first ? slotMetrics.first : event.start,
- );
- const goodEnd = DateTime.fromJSDate(
- event.end > slotMetrics.last ? slotMetrics.last : event.end,
- );
- const diff = goodEnd.diff(goodStart, ['days']);
- let sum = 1;
- if (event.end > slotMetrics.last) {
- sum = 0;
- }
- // eslint-disable-next-line no-param-reassign
- span = diff.days + sum;
-
- const diffDaysStart = goodStart.diff(goodFirst, ['days']);
- // eslint-disable-next-line no-shadow
- const left = `${(Math.abs(diffDaysStart.days) / slots) * 100}%`;
-
- lastEnd = right + 1;
- row.push(
- EventRowMixin.renderSpan(
- slots,
- span,
- key,
- content,
- isMonthView,
- {
- showType,
- event,
- },
- left,
- ),
- );
- } else {
- const content = EventRowMixin.renderEvent(props, event);
- if (gap) row.push(EventRowMixin.renderSpan(slots, gap, `${key}_gap`));
- row.push(
- EventRowMixin.renderSpan(slots, span, key, content, false, {
- showType,
- props,
- event,
- }),
- );
- lastEnd = right + 1;
- }
- return row;
- }, []);
-
- return (
- <Box className={cx(className, 'rbc-row', { 'rbc-event-row': isMonthView })}>{customRow}</Box>
- );
-}
-
-EventRow.propTypes = {
- segments: PropTypes.array,
- ...EventRowMixin.propTypes,
-};
-
-EventRow.defaultProps = {
- ...EventRowMixin.defaultProps,
-};
-
-export default EventRow;
- |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 -19 -20 -21 -22 -23 -24 -25 -26 -27 -28 -29 -30 -31 -32 -33 -34 -35 -36 -37 -38 -39 -40 -41 -42 -43 -44 -45 -46 -47 -48 -49 -50 -51 -52 -53 -54 -55 -56 -57 -58 -59 -60 -61 -62 -63 -64 -65 -66 -67 -68 -69 -70 -71 -72 -73 -74 -75 -76 -77 -78 -79 -80 -81 -82 -83 -84 -85 -86 -87 -88 -89 -90 -91 -92 -93 -94 -95 -96 -97 -98 -99 -100 -101 -102 -103 -104 -105 -106 -107 -108 -109 -110 -111 -112 -113 -114 -115 -116 -117 -118 -119 -120 -121 -122 -123 -124 -125 -126 -127 -128 -129 -130 -131 -132 -133 -134 -135 -136 -137 -138 -139 -140 -141 -142 -143 -144 -145 -146 -147 -148 -149 -150 -151 -152 -153 -154 -155 -156 -157 -158 -159 -160 -161 -162 -163 -164 -165 -166 -167 -168 -169 -170 -171 -172 -173 -174 -175 -176 -177 -178 -179 -180 -181 -182 -183 -184 -185 -186 -187 -188 -189 -190 -191 -192 -193 -194 -195 -196 -197 -198 -199 -200 -201 -202 -203 -204 -205 -206 -207 -208 -209 -210 -211 -212 -213 -214 -215 -216 -217 -218 -219 -220 -221 -222 -223 -224 | - - - - - - - -1x - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -31x - -31x -31x - -31x - - - - - - - - - - - - - - - - - - - - - - - - -47x - -47x -47x - -47x - - - - - - - -47x - - - - - - - -47x -31x -31x -31x - - - - - - - - - - - - - - - - - - - - - - - - - - - - -31x - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -47x - - - - - - - - - - - - | /* eslint-disable */
-import React from 'react';
-import dayjs from 'dayjs';
-import PropTypes from 'prop-types';
-import { isSelected } from 'react-big-calendar/lib/utils/selection';
-import { Box } from '@bubbles-ui/components';
-import EventCell, { sameDay } from './EventCell';
-
-const rowReverse = 'row-reverse';
-
-export default {
- propTypes: {
- slotMetrics: PropTypes.object.isRequired,
-
- selected: PropTypes.object,
- isAllDay: PropTypes.bool,
-
- accessors: PropTypes.object.isRequired,
- localizer: PropTypes.object.isRequired,
- components: PropTypes.object.isRequired,
- getters: PropTypes.object.isRequired,
-
- onSelect: PropTypes.func,
- onDoubleClick: PropTypes.func,
- onKeyPress: PropTypes.func,
- },
-
- defaultProps: {
- segments: [],
- selected: {},
- },
-
- renderEvent(props, event, isMonthView, printMode) {
- const {
- selected,
- isAllDay: _,
- accessors,
- getters,
- onSelect,
- onDoubleClick,
- onKeyPress,
- localizer,
- slotMetrics,
- components,
- resizable,
- } = props;
-
- const continuesPrior = slotMetrics.continuesPrior(event);
- const continuesAfter = slotMetrics.continuesAfter(event);
-
- return (
- <>
- <EventCell
- event={event}
- getters={getters}
- localizer={localizer}
- accessors={accessors}
- components={components}
- onSelect={onSelect}
- onDoubleClick={onDoubleClick}
- onKeyPress={onKeyPress}
- continuesPrior={continuesPrior}
- continuesAfter={continuesAfter}
- slotStart={slotMetrics.first}
- slotEnd={slotMetrics.last}
- selected={isSelected(event, selected)}
- resizable={resizable}
- isMonthView={isMonthView}
- printMode={printMode}
- />
- </>
- );
- },
-
- renderSpan(slots, len, key, content = ' ', isMonthView, { showType, props, event } = {}, left) {
- const per = `${(Math.abs(len) / slots) * 100}%`;
-
- const rightArrow = isMonthView && event && event.originalEvent.calendar.rightArrow;
- const leftArrow = isMonthView && event && event.originalEvent.calendar.leftArrow;
-
- const style = {
- WebkitFlexBasis: per,
- flexBasis: per,
- maxWidth: per,
- display: (rightArrow || leftArrow) && 'flex',
- flexDirection: leftArrow && rowReverse,
- };
-
- Iif (left && isMonthView) {
- style.left = left;
- style.height = '100%';
- style.width = '100%';
- style.position = 'absolute';
- style.zIndex = 199 + event.originalEvent.calendar.zIndex;
- }
-
- if (event && props) {
- const gap = `${(Math.abs(len - 1) / slots) * 100}%`;
- const oneSlot = `${(Math.abs(1) / slots) * 100}%`;
- Iif (showType === 'onlyEnd') {
- if (dayjs(props.slotMetrics.first).isSame(props.accessors.end(event), 'week')) {
- return [
- <Box
- key={'flexBasisGap'}
- style={{
- WebkitFlexBasis: gap,
- flexBasis: gap,
- maxWidth: gap,
- display: 'flex',
- }}
- />,
- <Box
- key={'flexBasisOneSlot'}
- style={{
- WebkitFlexBasis: oneSlot,
- flexBasis: oneSlot,
- maxWidth: oneSlot,
- display: (rightArrow || leftArrow) && 'flex',
- flexDirection: leftArrow && rowReverse,
- }}
- >
- {this.renderEvent(props, { ...event, showType })}
- </Box>,
- ];
- }
- return null;
- }
-
- Iif (showType === 'startEnd') {
- const start = new Date(props.accessors.start(event));
- const end = new Date(props.accessors.end(event));
- const isSameDay = sameDay(start, end);
- if (!isSameDay) {
- const isStart = dayjs(new Date(props.slotMetrics.first)).isSame(start, 'week');
- const isEnd = dayjs(new Date(props.slotMetrics.first)).isSame(end, 'week');
- const result = [];
- if (isStart) {
- result.push(
- <Box
- style={{
- WebkitFlexBasis: oneSlot,
- flexBasis: oneSlot,
- maxWidth: oneSlot,
- display: (rightArrow || leftArrow) && 'flex',
- flexDirection: leftArrow && rowReverse,
- }}
- >
- {this.renderEvent(props, { ...event, showType, startSide: true })}
- </Box>,
- );
- }
- if (isEnd) {
- if (isStart) {
- const start = new Date(props.accessors.start(event));
- let i = 0;
- for (; i < 8; i++) {
- start.setHours(start.getHours() + 24);
- if (sameDay(start, end)) break;
- }
- const gap2 = `${(Math.abs(i) / slots) * 100}%`;
- result.push(
- <Box
- style={{
- WebkitFlexBasis: gap2,
- flexBasis: gap2,
- maxWidth: gap2,
- display: 'flex',
- }}
- />,
- );
- } else {
- result.push(
- <Box
- style={{
- WebkitFlexBasis: gap,
- flexBasis: gap,
- maxWidth: gap,
- display: 'flex',
- }}
- />,
- );
- }
- result.push(
- <Box
- style={{
- WebkitFlexBasis: oneSlot,
- flexBasis: oneSlot,
- maxWidth: oneSlot,
- display: (rightArrow || leftArrow) && 'flex',
- flexDirection: leftArrow && rowReverse,
- }}
- >
- {this.renderEvent(props, { ...event, showType, endSide: true })}
- </Box>,
- );
- }
- return result;
- }
- return (
- <Box
- key={key}
- className="rbc-row-segment"
- // IE10/11 need max-width. flex-basis doesn't respect box-sizing
- style={style}
- >
- {content}
- </Box>
- );
- }
- }
-
- return (
- <Box
- key={key}
- className="rbc-row-segment"
- // IE10/11 need max-width. flex-basis doesn't respect box-sizing
- style={style}
- >
- {content}
- </Box>
- );
- },
-};
- |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| File | -- | Statements | -- | Branches | -- | Functions | -- | Lines | -- |
|---|---|---|---|---|---|---|---|---|---|
| EventCell.js | -
-
- |
- 74.71% | -65/87 | -53.49% | -130/243 | -72.72% | -8/11 | -74.71% | -65/87 | -
| EventEndingRow.js | -
-
- |
- 9.52% | -4/42 | -0% | -0/14 | -0% | -0/10 | -10.25% | -4/39 | -
| EventRow.js | -
-
- |
- 53.57% | -15/28 | -30% | -3/10 | -100% | -2/2 | -51.85% | -14/27 | -
| EventRowMixin.js | -
-
- |
- 34.04% | -16/47 | -28.84% | -15/52 | -100% | -2/2 | -34.78% | -16/46 | -
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 -19 -20 -21 -22 -23 -24 | - - -1x - -1x - -1x - - - - - - - - - - - - - - - - | import PropTypes from 'prop-types'; - -export const emptyPixel = - 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII='; - -export const stringifyPercent = (v) => (typeof v === 'string' ? v : `${v}%`); - -export const EVENTWRAPPER_PROPTYPES = { - event: PropTypes.object.isRequired, - localizer: PropTypes.object.isRequired, - accessors: PropTypes.object.isRequired, - components: PropTypes.object.isRequired, - getters: PropTypes.object.isRequired, - selected: PropTypes.object, - selectable: PropTypes.oneOf([true, false, 'ignoreEvents']), - longPressThreshold: PropTypes.number, - onDoubleClickEvent: PropTypes.func, - onKeyPressEvent: PropTypes.func, - rtl: PropTypes.bool, - resizable: PropTypes.bool, - type: PropTypes.string, - children: PropTypes.func, -}; - |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 -19 -20 -21 -22 -23 -24 -25 -26 -27 -28 -29 -30 -31 -32 -33 -34 -35 -36 -37 -38 -39 -40 -41 -42 -43 -44 -45 -46 -47 -48 -49 -50 -51 -52 -53 -54 -55 -56 -57 -58 -59 -60 -61 -62 -63 -64 -65 -66 -67 -68 -69 -70 -71 -72 -73 -74 -75 -76 -77 -78 -79 -80 -81 -82 -83 -84 -85 -86 -87 -88 -89 -90 -91 -92 -93 -94 -95 -96 -97 -98 -99 -100 -101 -102 -103 -104 -105 -106 -107 -108 -109 -110 -111 -112 -113 -114 -115 -116 -117 -118 -119 -120 -121 -122 -123 -124 -125 -126 -127 -128 -129 -130 -131 -132 -133 -134 -135 -136 -137 -138 -139 -140 -141 -142 | - - - - - - -1x - - - - - - - - - - - - - - - - - - - -31x -31x - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -1x - - - - | import React from 'react';
-import clsx from 'clsx';
-import { Avatar, Box, ImageLoader, Stack, Text } from '@bubbles-ui/components';
-import { colord } from 'colord';
-import { eventWrapperStyles } from './EventWrapper.styles';
-import { emptyPixel, stringifyPercent, EVENTWRAPPER_PROPTYPES } from './EventWrapper.constants';
-
-const EventWrapper = ({
- style,
- className,
- event,
- accessors,
- rtl,
- type,
- children,
- selected,
- label,
- continuesPrior,
- continuesAfter,
- getters,
- onClick,
- onDoubleClick,
- isBackgroundEvent,
- onKeyPress,
- components: { forceBgColorToEvents },
- // eslint-disable-next-line sonarjs/cognitive-complexity
-}) => {
- Eif (type === 'date') {
- return children;
- }
-
- const { classes } = eventWrapperStyles({});
-
- const title = accessors.title(event);
- const tooltip = accessors.tooltip(event);
- const end = accessors.end(event);
- const start = accessors.start(event);
-
- const userProps = getters.eventProp(event, start, end, selected);
-
- const { height, top, width, xOffset } = style;
-
- const { originalEvent } = event;
- const bgColor = originalEvent.bgColor || originalEvent.calendar.bgColor;
-
- const eventStyle = isBackgroundEvent
- ? {
- ...userProps.style,
- top: stringifyPercent(top),
- height: stringifyPercent(height),
- minHeight: '35px',
- // Adding 10px to take events container right margin into account
- width: `calc(${width} + 10px)`,
- [rtl ? 'right' : 'left']: stringifyPercent(Math.max(0, xOffset)),
- }
- : {
- ...userProps.style,
- top: stringifyPercent(top),
- width: stringifyPercent(width),
- height: stringifyPercent(height),
- backgroundColor: forceBgColorToEvents
- ? colord(bgColor).desaturate(0.2).alpha(0.2).toRgbString()
- : null,
- minHeight: '35px',
- [rtl ? 'right' : 'left']: stringifyPercent(xOffset),
- };
-
- const eventIcon = originalEvent.icon || originalEvent.calendar.icon;
- const eventImage = originalEvent.image;
- const avatar = {
- image: eventImage || null,
- icon: eventIcon ? (
- <Box className={classes.icon}>
- <ImageLoader
- height="12px"
- width="12px"
- alt="event icon"
- imageStyles={{
- position: 'absolute',
- left: '50%',
- top: '50%',
- width: 12,
- transform: 'translate(-50%, -50%)',
- }}
- src={eventIcon}
- forceImage
- />
- </Box>
- ) : null,
- color: bgColor,
- };
-
- if (originalEvent.calendar.isUserCalendar) {
- avatar.fullName = originalEvent.calendar.fullName;
- } else if (!avatar.image && !avatar.icon) {
- avatar.image = emptyPixel;
- }
-
- return (
- <Box
- onClick={onClick}
- onDoubleClick={onDoubleClick}
- style={eventStyle}
- onKeyPress={onKeyPress}
- title={tooltip ? (typeof label === 'string' ? `${label}: ` : '') + tooltip : undefined}
- className={clsx(
- isBackgroundEvent ? 'rbc-background-event' : 'rbc-event',
- className,
- userProps.className,
- {
- 'rbc-selected': selected,
- 'rbc-event-continues-earlier': continuesPrior,
- 'rbc-event-continues-later': continuesAfter,
- }
- )}
- >
- {event.component ? (
- event.component
- ) : (
- <Stack spacing={1}>
- <Box>
- <Avatar mx="auto" size="sm" {...avatar} />
- </Box>
- <Box className={classes.texts}>
- <Box>
- <Text role="productive" color="primary" size="xs">
- {title}
- </Text>
- </Box>
- <Box className={classes.date}>{label}</Box>
- </Box>
- </Stack>
- )}
- </Box>
- );
-};
-
-EventWrapper.propTypes = EVENTWRAPPER_PROPTYPES;
-
-export default EventWrapper;
-export { EventWrapper };
- |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 -19 -20 -21 -22 -23 -24 -25 -26 -27 -28 -29 | - - -1x - - - - - - - - - - - - - - - - - - - - - - - - - | /* eslint-disable import/prefer-default-export */
-import { createStyles, getFontProductive } from '@bubbles-ui/components';
-
-export const eventWrapperStyles = createStyles((theme, { bgColor }) => ({
- date: {
- ...getFontProductive('10px', '500'),
- color: theme.colors.text05,
- marginTop: theme.spacing[1],
- },
- texts: {
- marginTop: 0, // theme.spacing[1]
- lineHeight: '1em',
- },
- icon: {
- borderRadius: '50%',
- color: `${theme.colors.text07}!important`,
- backgroundColor: `${bgColor}!important`,
- minWidth: '20px',
- minHeight: '20px',
- position: 'relative',
- alignItems: 'center',
- justifyContent: 'center',
- verticalAlign: 'middle',
- img: {
- filter: 'brightness(0) invert(1)',
- },
- },
-}));
- |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 -19 | - -1x - - - - -1x - - - - - - - - - - - | import PropTypes from 'prop-types';
-
-export const MONTHRANGEVIEW_DEFAULT_PROPS = {
- events: [],
- onRangeChange: () => {},
-};
-
-export const MONTHRANGEVIEW_PROPTYPES = {
- events: PropTypes.arrayOf(PropTypes.object),
- dateMonthRange: PropTypes.shape({
- startYear: PropTypes.number,
- startMonth: PropTypes.number,
- endYear: PropTypes.number,
- endMonth: PropTypes.number,
- }),
- printMode: PropTypes.bool,
- onRangeChange: PropTypes.func,
-};
- |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 -19 -20 -21 -22 -23 -24 -25 -26 -27 -28 -29 -30 -31 -32 -33 -34 -35 -36 -37 -38 -39 -40 -41 -42 -43 -44 -45 -46 -47 -48 -49 -50 -51 -52 -53 -54 -55 -56 -57 -58 -59 -60 -61 -62 -63 -64 -65 -66 -67 -68 -69 -70 -71 -72 -73 -74 -75 -76 -77 -78 -79 -80 -81 -82 -83 -84 -85 -86 | - - - - - - - - - -1x - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -1x - - - - - -1x - -1x - -1x -1x - - - - | import React, { useEffect } from 'react';
-import { Box, Text } from '@bubbles-ui/components';
-import { capitalize } from 'lodash';
-import { MonthRangeViewStyles } from './MonthRangeView.styles';
-import { MonthView } from '../MonthView/MonthView';
-import { MONTHRANGEVIEW_DEFAULT_PROPS, MONTHRANGEVIEW_PROPTYPES } from './MonthRangeView.constants';
-
-// const eventsForWeek = (evts, start, end, accessors, localizer) =>
-// evts.filter((e) => inRange(e, start, end, accessors, localizer));
-
-const MonthRangeView = ({ ...props }) => {
- const { dateMonthRange, localizer, onRangeChange, printMode } = props;
-
- const years = [];
- if (dateMonthRange) {
- for (let i = dateMonthRange.startYear; i <= dateMonthRange.endYear; i++) {
- years.push(i);
- }
- }
-
- const { classes } = MonthRangeViewStyles({ printMode });
-
- useEffect(() => {
- onRangeChange({
- start: new Date(dateMonthRange.startYear, dateMonthRange.startMonth, 1, 0, 0, 0),
- end: new Date(dateMonthRange.endYear, dateMonthRange.endMonth + 1, 0, 23, 59, 59),
- });
- }, []);
-
- return (
- <Box className={classes.monthRangeView}>
- {years.map((year) => {
- const isStartYear = dateMonthRange.startYear === year;
- const isEndYear = dateMonthRange.endYear === year;
- let startMonth = 1;
- let endMonth = 12;
- if (isStartYear) startMonth = dateMonthRange.startMonth;
- if (isEndYear) endMonth = dateMonthRange.endMonth;
- const months = [];
- for (let i = startMonth; i <= endMonth; i++) {
- months.push(i);
- }
- return months.map((month) => {
- const date = new Date(year, month, 1);
- return (
- <Box className={classes.month} key={`${year}${month}`}>
- <Box style={{ paddingTop: 4, marginBottom: 4, textAlign: 'center' }}>
- <Text className={classes.monthHeader}>
- {capitalize(localizer.format(date, 'monthHeaderFormat'))}
- </Text>
- </Box>
- <Box style={{ paddingBottom: printMode ? '196px' : '100%', position: 'relative' }}>
- <Box style={{ position: 'absolute', width: '100%', height: '100%' }}>
- <MonthView
- {...props}
- date={date}
- isMonthView={true}
- monthNumber={month}
- onRangeChange={() => {}}
- />
- </Box>
- </Box>
- </Box>
- );
- });
- })}
- </Box>
- );
-};
-
-MonthRangeView.range = (date, { localizer }) => {
- const start = localizer.firstVisibleDay(date, localizer);
- const end = localizer.lastVisibleDay(date, localizer);
- return { start, end };
-};
-
-MonthRangeView.navigate = (date) => date;
-
-MonthRangeView.title = (date, { localizer }) => localizer.format(date, 'monthHeaderFormat');
-
-MonthRangeView.defaultProps = MONTHRANGEVIEW_DEFAULT_PROPS;
-MonthRangeView.propTypes = MONTHRANGEVIEW_PROPTYPES;
-
-export default MonthRangeView;
-export { MonthRangeView };
- |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 -19 -20 | - - -1x - - - - - - - - - - - - - - - - | /* eslint-disable import/prefer-default-export */
-import { createStyles } from '@bubbles-ui/components';
-
-export const MonthRangeViewStyles = createStyles((theme, { printMode }) => ({
- root: {},
- monthRangeView: {
- display: 'flex',
- flexWrap: 'wrap',
- rowGap: printMode ? 4 : 16,
- columnGap: printMode ? 0 : 76,
- justifyContent: printMode && 'space-between',
- paddingInline: printMode && 40,
- },
- month: {
- width: printMode ? 196 : 252,
- minWidth: printMode ? 196 : 252,
- maxWidth: printMode ? 196 : 252,
- },
-}));
- |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| File | -- | Statements | -- | Branches | -- | Functions | -- | Lines | -- |
|---|---|---|---|---|---|---|---|---|---|
| MonthRangeView.constants.js | -
-
- |
- 100% | -2/2 | -100% | -0/0 | -0% | -0/1 | -100% | -2/2 | -
| MonthRangeView.js | -
-
- |
- 16.66% | -6/36 | -0% | -0/8 | -0% | -0/8 | -20% | -6/30 | -
| MonthRangeView.styles.js | -
-
- |
- 50% | -1/2 | -0% | -0/14 | -0% | -0/1 | -100% | -1/1 | -
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 -19 -20 -21 -22 -23 -24 -25 -26 -27 -28 -29 -30 -31 -32 -33 -34 -35 -36 -37 -38 -39 -40 -41 -42 -43 -44 -45 -46 -47 -48 -49 -50 -51 -52 -53 -54 -55 -56 -57 -58 -59 -60 -61 -62 -63 -64 -65 -66 -67 -68 -69 -70 -71 -72 -73 -74 -75 -76 -77 -78 -79 -80 -81 -82 -83 -84 -85 -86 -87 -88 -89 -90 -91 -92 -93 -94 -95 -96 -97 -98 -99 -100 -101 -102 -103 -104 -105 -106 -107 -108 -109 -110 -111 -112 -113 -114 -115 -116 -117 -118 -119 -120 -121 -122 -123 -124 -125 -126 -127 -128 -129 -130 -131 -132 -133 -134 -135 -136 -137 -138 -139 -140 -141 -142 -143 -144 -145 -146 -147 -148 -149 -150 -151 -152 -153 -154 -155 -156 -157 -158 -159 -160 -161 -162 -163 -164 -165 -166 -167 -168 -169 -170 -171 -172 -173 -174 -175 -176 -177 -178 -179 -180 -181 -182 -183 -184 -185 -186 -187 -188 -189 -190 -191 -192 -193 -194 -195 -196 -197 -198 -199 -200 -201 -202 -203 -204 -205 -206 -207 -208 -209 -210 -211 -212 -213 -214 -215 -216 -217 -218 -219 -220 -221 -222 -223 -224 -225 -226 -227 -228 -229 -230 -231 -232 -233 -234 -235 -236 -237 -238 -239 -240 -241 -242 -243 -244 -245 -246 -247 -248 -249 -250 -251 -252 -253 -254 -255 -256 -257 -258 -259 -260 -261 -262 -263 -264 -265 -266 -267 -268 -269 -270 -271 -272 -273 -274 -275 -276 -277 -278 -279 -280 -281 -282 -283 -284 -285 -286 -287 -288 -289 -290 -291 -292 -293 -294 -295 -296 -297 -298 -299 -300 -301 -302 -303 -304 -305 -306 -307 -308 -309 -310 -311 -312 -313 -314 -315 -316 -317 -318 -319 -320 -321 -322 -323 -324 -325 -326 -327 -328 -329 -330 -331 -332 -333 -334 -335 -336 -337 -338 -339 -340 -341 -342 -343 -344 -345 -346 -347 -348 -349 -350 -351 -352 -353 -354 -355 -356 -357 -358 -359 -360 -361 -362 -363 -364 -365 -366 -367 -368 -369 -370 -371 -372 -373 -374 -375 -376 -377 -378 -379 -380 -381 -382 -383 -384 -385 -386 -387 -388 -389 -390 -391 -392 -393 -394 -395 -396 -397 -398 -399 -400 -401 -402 -403 -404 -405 -406 -407 -408 -409 -410 -411 -412 -413 -414 -415 -416 -417 -418 -419 -420 -421 -422 -423 -424 -425 -426 -427 -428 -429 -430 -431 -432 -433 -434 -435 -436 -437 -438 -439 -440 -441 -442 -443 -444 -445 -446 -447 -448 -449 -450 -451 -452 -453 -454 -455 -456 -457 -458 -459 -460 -461 -462 -463 -464 -465 -466 -467 -468 -469 -470 -471 -472 -473 -474 -475 -476 -477 -478 -479 -480 -481 -482 -483 -484 -485 -486 -487 -488 -489 -490 -491 -492 -493 -494 -495 | - - - - - - - - - - - - - - - - - -1x - - - - - - - - - - - - - - - - - - - - - - - - - -1x -156x -134x -30x -30x -30x -24x -24x -24x - - - - - -11x - -10x -10x -10x -10x - - - - - - -14x -14x - - - - - - - -10x -10x -10x - - - - -10x - -10x - - - - - - - - - - - - - - -16x - - - -10x - - -10x - - -26x -26x -26x - -26x - -26x - - - - - - - - - - -10x - - - - - - - - - - - - - - - - -134x - -134x -134x - -134x -35x - - -134x -134x - -134x -134x -134x -134x -26x -116x - -134x -134x - - -134x - - - -134x - -134x - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -10x -928x -928x -928x -928x -928x -928x -928x - -928x -928x -494x -1072x -1070x -1070x -1070x - - -1070x - - - - - -1070x -1070x - - - - -928x - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -26x -26x -26x -26x -26x -7x - - -26x -26x - -26x -180x - - -180x - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -12x - - - - - -10x - - - - - - -10x - - - - - -10x -1x -1x - - -10x - - - - -10x - - - - -10x - - - - - - - - - - - - - - - - - -10x - - - - - - - - - - - - - - - - - - - - - - - - - - - -1x -1x - - - -1x - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -1x -2x -2x -2x - - -1x -1x - - - - -1x - - - - - - -24x - - - | /* eslint-disable */
-import React from 'react';
-import PropTypes from 'prop-types';
-import _, { capitalize, chunk } from 'lodash';
-import { findDOMNode } from 'react-dom';
-import getPosition from 'dom-helpers/position';
-import * as animationFrame from 'dom-helpers/animationFrame';
-import { navigate, views } from 'react-big-calendar/lib/utils/constants';
-import { notify } from 'react-big-calendar/lib/utils/helpers';
-import { inRange, sortEvents } from 'react-big-calendar/lib/utils/eventLevels';
-import Popup from 'react-big-calendar/lib/Popup';
-import Header from 'react-big-calendar/lib/Header';
-import DateHeader from 'react-big-calendar/lib/DateHeader';
-import { Box, COLORS, Popper } from '@bubbles-ui/components';
-import { colord } from 'colord';
-
-import DateContentRow from '../Date/DateContentRow';
-
-const eventsForWeek = (events, start, end, localizer, isFirstWeek, isLastWeek) => {
- const range = { start, end };
- const filteredEvents = events.filter((event) =>
- localizer.inEventRange({
- event: { ...event },
- range,
- })
- );
- filteredEvents.sort((eventA, eventB) => {
- const eventAzIndex = eventA.originalEvent.zIndex || eventA.originalEvent.calendar.zIndex;
- const eventBzIndex = eventB.originalEvent.zIndex || eventB.originalEvent.calendar.zIndex;
- return eventAzIndex - eventBzIndex;
- });
- return filteredEvents.map((event) => {
- if (isLastWeek) {
- if (event.end.getYear() > end.getYear() || event.end.getMonth() > end.getMonth())
- return { ...event, end, realEnd: event.end };
- }
- if (isFirstWeek) {
- if (event.start.getYear() < start.getYear() || event.start.getMonth() < start.getMonth())
- return { ...event, start };
- }
- return event;
- });
-};
-
-const eventsForWeekNormal = (evts, start, end, accessors, localizer) => {
- const filteredEvents = evts.filter((e) => inRange(e, start, end, accessors, localizer));
- return filteredEvents.map((event) => {
- const eStart = event.start;
- const eEnd = event.end;
- if (localizer.isSameDate(eStart, eEnd)) return event;
- event.realEnd = eEnd;
- event.end = new Date(new Date(eEnd).setHours(2, 0, 0));
- return event;
- });
-};
-
-class MonthView extends React.Component {
- constructor(...args) {
- super(...args);
-
- this._bgRows = [];
- this._pendingSelection = [];
- this.slotRowRef = React.createRef();
- this.state = {
- rowLimit: 5,
- needLimitMeasure: true,
- };
- }
-
- UNSAFE_componentWillReceiveProps({ date }) {
- const { date: propsDate, localizer } = this.props;
- this.setState({
- needLimitMeasure: localizer.neq(date, propsDate, 'month'),
- });
- }
-
- componentDidMount() {
- let running;
-
- const days = this.props.localizer.visibleDays(this.props.date, this.props.localizer);
- days[days.length - 1].setHours(23, 59, 59);
- this.props.onRangeChange({
- start: days[0],
- end: days[days.length - 1],
- });
-
- Eif (this.state.needLimitMeasure) this.measureRowLimit(this.props);
-
- window.addEventListener(
- 'resize',
- (this._resizeListener = () => {
- if (!running) {
- animationFrame.request(() => {
- running = false;
- this.setState({ needLimitMeasure: true }); //eslint-disable-line
- });
- }
- }),
- false
- );
- }
-
- componentDidUpdate() {
- if (this.state.needLimitMeasure) this.measureRowLimit(this.props);
- }
-
- componentWillUnmount() {
- window.removeEventListener('resize', this._resizeListener, false);
- }
-
- getContainer = () => findDOMNode(this);
-
- render() {
- const { date, localizer, style } = this.props;
- const month = localizer.visibleDays(date, localizer);
- const weeks = chunk(month, 7);
-
- this._weekCount = weeks.length;
-
- return (
- <Box style={style} className={'rbc-month-view'} role="table" aria-label="Month View">
- <Box className="rbc-row rbc-month-header" role="presentation">
- {this.renderHeaders(weeks[0])}
- </Box>
- {weeks.map(this.renderWeek)}
- {this.props.popup && this.renderOverlay()}
- </Box>
- );
- }
-
- renderWeek = (week, weekIdx, monthWeeks) => {
- const {
- events,
- components,
- selectable,
- getNow,
- selected,
- date,
- localizer,
- longPressThreshold,
- accessors,
- getters,
- showAllEvents,
- hideBgTitles,
- isMonthView,
- monthNumber,
- printMode,
- } = this.props;
-
- const { needLimitMeasure, rowLimit } = this.state;
- const { showWeekends } = components;
-
- if (!showWeekends) {
- week = _.filter(week, (date) => date.getDay() !== 0 && date.getDay() !== 6);
- }
-
- const isFirstWeek = weekIdx === 0;
- const isLastWeek = weekIdx === monthWeeks.length - 1;
-
- let firstDayPosition = 0;
- let lastDayPosition = 0;
- if (isFirstWeek) firstDayPosition = week.findIndex((day) => day.getDate() === 1);
- if (isLastWeek) {
- const endOfMonth = localizer.endOf(week[0], 'months').getDate();
- lastDayPosition = week.findIndex((day) => day.getDate() === endOfMonth);
- }
- const startOfWeek = isMonthView && isFirstWeek ? week[firstDayPosition] : week[0];
- const endOfWeeek = isMonthView && isLastWeek ? week[lastDayPosition] : week[week.length - 1];
-
- // let's not mutate props
- const weeksEvents = isMonthView
- ? eventsForWeek([...events], startOfWeek, endOfWeeek, localizer, isFirstWeek, isLastWeek)
- : eventsForWeekNormal([...events], week[0], week[week.length - 1], accessors, localizer);
-
- weeksEvents.sort((a, b) => sortEvents(a, b, accessors, localizer));
-
- return (
- <DateContentRow
- key={weekIdx}
- ref={weekIdx === 0 ? this.slotRowRef : undefined}
- container={this.getContainer}
- className="rbc-month-row"
- getNow={getNow}
- date={date}
- range={week}
- events={weeksEvents}
- maxRows={showAllEvents ? Infinity : rowLimit}
- selected={selected}
- selectable={selectable}
- components={components}
- accessors={accessors}
- getters={getters}
- localizer={localizer}
- renderHeader={this.readerDateHeading}
- renderForMeasure={needLimitMeasure}
- onShowMore={this.handleShowMore}
- onSelect={this.handleSelectEvent}
- onDoubleClick={this.handleDoubleClickEvent}
- onKeyPress={this.handleKeyPressEvent}
- onSelectSlot={this.handleSelectSlot}
- longPressThreshold={longPressThreshold}
- hideBgTitles={hideBgTitles}
- rtl={this.props.rtl}
- resizable={this.props.resizable}
- showAllEvents={showAllEvents}
- isMonthView={isMonthView}
- monthNumber={monthNumber}
- printMode={printMode}
- />
- );
- };
-
- readerDateHeading = ({ date, isWeekend, className, ...props }) => {
- const { date: currentDate, getDrilldownView, localizer, isMonthView, events } = this.props;
- const isOffRange = localizer.neq(date, currentDate, 'month');
- const isCurrent = localizer.isSameDate(date, currentDate);
- const drilldownView = getDrilldownView(date);
- const label = localizer.format(date, 'dateFormat').replace(/^0/, '');
- const DateHeaderComponent = this.props.components.dateHeader || DateHeader;
- const { cx } = this.props.components;
-
- let dateIsInRangeOfTextColor = false;
- if (_.isArray(events) && events.length > 0) {
- events.forEach((event) => {
- if (dateIsInRangeOfTextColor) return;
- const { originalEvent } = event;
- const eventBgColor = originalEvent.bgColor || originalEvent.calendar.bgColor;
- const eventBgRGBColor = colord(
- _.isArray(eventBgColor) ? eventBgColor[0] : eventBgColor
- ).toRgb();
- const brightness = Math.round(
- (parseInt(eventBgRGBColor.r) * 299 +
- parseInt(eventBgRGBColor.g) * 587 +
- parseInt(eventBgRGBColor.b) * 114) /
- 1000
- );
- const eventTextColor = !(brightness > 125 || eventBgColor === 'transparent');
- dateIsInRangeOfTextColor =
- eventTextColor && localizer.inRange(date, event.start, event.end);
- });
- }
-
- return (
- <Box
- {...props}
- className={cx(className, { 'rbc-off-range': isOffRange, 'rbc-current': isCurrent })}
- role="presentation"
- style={{
- pointerEvents: 'all',
- visibility: isMonthView && isOffRange && 'hidden',
- position: 'relative',
- color: isMonthView && dateIsInRangeOfTextColor && `${COLORS.mainWhite}`,
- }}
- >
- {isMonthView && isWeekend && COLORS.ui02 ? (
- <Box
- style={{
- backgroundColor: COLORS.ui02,
- position: 'absolute',
- left: 0,
- top: 0,
- width: '100%',
- height: '100%',
- zIndex: -99999,
- }}
- />
- ) : null}
- <DateHeaderComponent
- label={label}
- date={date}
- drilldownView={drilldownView}
- isOffRange={isOffRange}
- onDrillDown={(e) => this.handleHeadingClick(date, drilldownView, e)}
- />
- </Box>
- );
- };
-
- renderHeaders(row) {
- const { localizer, components, isMonthView } = this.props;
- const HeaderComponent = components.header || Header;
- const { showWeekends } = components;
- let weekRow = [...row];
- if (!showWeekends) {
- weekRow = _.filter(weekRow, (date) => date.getDay() !== 0 && date.getDay() !== 6);
- }
-
- const first = weekRow[0];
- const last = weekRow[weekRow.length - 1];
-
- return localizer.range(first, last, 'day').map((day, idx) => {
- const dayName = isMonthView
- ? localizer.format(day, 'weekdayFormat')[0]
- : localizer.format(day, 'weekdayFormat');
- return (
- <Box key={`header_${idx}`} className="rbc-header">
- <HeaderComponent date={day} localizer={localizer} label={capitalize(dayName)} />
- </Box>
- );
- });
- }
-
- renderOverlay() {
- const overlay = (this.state && this.state.overlay) || {};
- const { accessors, localizer, components, getters, selected, popupOffset } = this.props;
-
- return (
- <Popper
- position="bottom"
- placement="center"
- transition="fade"
- mounted={!!overlay.position}
- onHide={() => this.setState({ overlay: null })}
- referenceElement={overlay.target}
- >
- {({ props }) => (
- <Popup
- {...props}
- popupOffset={popupOffset}
- accessors={accessors}
- getters={getters}
- selected={selected}
- components={components}
- localizer={localizer}
- position={overlay.position}
- show={this.overlayDisplay}
- events={overlay.events}
- slotStart={overlay.date}
- slotEnd={overlay.end}
- onSelect={this.handleSelectEvent}
- onDoubleClick={this.handleDoubleClickEvent}
- onKeyPress={this.handleKeyPressEvent}
- handleDragStart={this.props.handleDragStart}
- />
- )}
- </Popper>
- );
- }
-
- measureRowLimit() {
- this.setState({
- needLimitMeasure: false,
- rowLimit: this.slotRowRef.current.getRowLimit(),
- });
- }
-
- handleSelectSlot = (range, slotInfo) => {
- this._pendingSelection = this._pendingSelection.concat(range);
-
- clearTimeout(this._selectTimer);
- this._selectTimer = setTimeout(() => this.selectDates(slotInfo));
- };
-
- handleHeadingClick = (date, view, e) => {
- e.preventDefault();
- this.clearSelection();
- notify(this.props.onDrillDown, [date, view]);
- };
-
- handleSelectEvent = (...args) => {
- this.clearSelection();
- notify(this.props.onSelectEvent, args);
- };
-
- handleDoubleClickEvent = (...args) => {
- this.clearSelection();
- notify(this.props.onDoubleClickEvent, args);
- };
-
- handleKeyPressEvent = (...args) => {
- this.clearSelection();
- notify(this.props.onKeyPressEvent, args);
- };
-
- handleShowMore = (events, date, cell, slot, target) => {
- const { popup, onDrillDown, onShowMore, getDrilldownView, doShowMoreDrillDown } = this.props;
- // cancel any pending selections so only the event click goes through.
- this.clearSelection();
-
- if (popup) {
- const position = getPosition(cell, findDOMNode(this));
-
- this.setState({
- overlay: { date, events, position, target },
- });
- } else if (doShowMoreDrillDown) {
- notify(onDrillDown, [date, getDrilldownView(date) || views.DAY]);
- }
-
- notify(onShowMore, [events, date, slot]);
- };
-
- overlayDisplay = () => {
- this.setState({
- overlay: null,
- });
- };
-
- selectDates(slotInfo) {
- const slots = this._pendingSelection.slice();
-
- this._pendingSelection = [];
-
- slots.sort((a, b) => +a - +b);
-
- const start = new Date(slots[0]);
- const end = new Date(slots[slots.length - 1]);
- end.setDate(slots[slots.length - 1].getDate() + 1);
-
- notify(this.props.onSelectSlot, {
- slots,
- start,
- end,
- action: slotInfo.action,
- bounds: slotInfo.bounds,
- box: slotInfo.box,
- });
- }
-
- clearSelection() {
- clearTimeout(this._selectTimer);
- this._pendingSelection = [];
- }
-}
-
-MonthView.propTypes = {
- events: PropTypes.array.isRequired,
- date: PropTypes.instanceOf(Date),
-
- min: PropTypes.instanceOf(Date),
- max: PropTypes.instanceOf(Date),
-
- step: PropTypes.number,
- getNow: PropTypes.func.isRequired,
-
- scrollToTime: PropTypes.instanceOf(Date),
- rtl: PropTypes.bool,
- resizable: PropTypes.bool,
- width: PropTypes.number,
-
- accessors: PropTypes.object.isRequired,
- components: PropTypes.object.isRequired,
- getters: PropTypes.object.isRequired,
- localizer: PropTypes.object.isRequired,
-
- selected: PropTypes.object,
- selectable: PropTypes.oneOf([true, false, 'ignoreEvents']),
- longPressThreshold: PropTypes.number,
-
- onNavigate: PropTypes.func,
- onSelectSlot: PropTypes.func,
- onSelectEvent: PropTypes.func,
- onDoubleClickEvent: PropTypes.func,
- onKeyPressEvent: PropTypes.func,
- onShowMore: PropTypes.func,
- showAllEvents: PropTypes.bool,
- doShowMoreDrillDown: PropTypes.bool,
- onDrillDown: PropTypes.func,
- getDrilldownView: PropTypes.func.isRequired,
-
- popup: PropTypes.bool,
- handleDragStart: PropTypes.func,
-
- popupOffset: PropTypes.oneOfType([
- PropTypes.number,
- PropTypes.shape({
- x: PropTypes.number,
- y: PropTypes.number,
- }),
- ]),
-};
-
-MonthView.range = (date, { localizer }) => {
- const start = localizer.firstVisibleDay(date, localizer);
- const end = localizer.lastVisibleDay(date, localizer);
- return { start, end };
-};
-
-MonthView.navigate = (date, action, { localizer }) => {
- switch (action) {
- case navigate.PREVIOUS:
- return localizer.add(date, -1, 'month');
-
- case navigate.NEXT:
- return localizer.add(date, 1, 'month');
-
- default:
- return date;
- }
-};
-
-MonthView.title = (date, { localizer }) => localizer.format(date, 'monthHeaderFormat');
-
-export { MonthView };
- |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| File | -- | Statements | -- | Branches | -- | Functions | -- | Lines | -- |
|---|---|---|---|---|---|---|---|---|---|
| MonthView.js | -
-
- |
- 66.07% | -111/168 | -50.52% | -48/95 | -53.33% | -24/45 | -65.35% | -100/153 | -
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 -19 -20 -21 -22 -23 -24 -25 -26 -27 -28 -29 -30 -31 -32 -33 -34 -35 -36 -37 -38 -39 -40 -41 -42 -43 -44 -45 -46 -47 -48 -49 -50 -51 -52 -53 -54 -55 -56 -57 -58 -59 -60 -61 -62 -63 -64 -65 -66 -67 -68 -69 -70 -71 -72 -73 -74 -75 -76 -77 -78 -79 -80 -81 -82 -83 -84 -85 -86 -87 -88 -89 -90 -91 -92 -93 -94 -95 -96 -97 -98 -99 -100 -101 -102 -103 -104 -105 -106 -107 -108 -109 -110 -111 -112 -113 -114 -115 -116 -117 -118 -119 -120 -121 -122 -123 -124 -125 -126 -127 -128 -129 -130 -131 -132 -133 -134 -135 -136 -137 -138 -139 -140 -141 -142 -143 -144 -145 -146 -147 -148 -149 -150 -151 -152 -153 -154 -155 -156 -157 -158 -159 -160 -161 -162 -163 -164 -165 -166 -167 -168 -169 -170 -171 -172 -173 -174 -175 -176 -177 -178 -179 -180 -181 -182 -183 -184 -185 -186 -187 -188 -189 -190 -191 -192 -193 -194 -195 -196 -197 -198 -199 -200 -201 -202 -203 -204 -205 -206 -207 -208 -209 -210 -211 -212 -213 -214 -215 -216 -217 -218 -219 -220 -221 -222 -223 -224 -225 -226 -227 -228 -229 -230 -231 -232 -233 -234 -235 -236 -237 -238 -239 -240 -241 -242 -243 -244 -245 -246 -247 -248 -249 -250 -251 -252 -253 -254 -255 -256 -257 -258 -259 -260 -261 -262 -263 -264 -265 -266 -267 -268 -269 -270 -271 -272 -273 -274 -275 -276 -277 -278 -279 -280 -281 -282 -283 -284 -285 -286 -287 -288 -289 -290 -291 -292 -293 -294 -295 -296 -297 -298 -299 -300 -301 -302 -303 -304 -305 -306 -307 -308 -309 -310 -311 -312 -313 -314 -315 -316 -317 -318 -319 -320 -321 -322 -323 -324 -325 -326 -327 -328 -329 -330 -331 -332 -333 -334 -335 -336 -337 -338 -339 -340 -341 -342 -343 -344 -345 -346 -347 -348 -349 -350 -351 -352 -353 -354 -355 -356 -357 -358 -359 -360 -361 -362 -363 -364 -365 -366 -367 -368 -369 -370 | - - - - - - - - - - - - - - - - -1x -4x -4x - -4x -4x - -4x - - - - -2x - -2x - -2x -2x -2x - - - -2x - - - -2x - -2x -2x - - -2x - -2x - - -2x - - - - - -2x - - - - - -2x - -2x - -2x -2x - - - - -2x -2x - - -2x - - - - -1x - -1x - - - - - - - -2x -4x - - -2x - - - - - -2x - - - - - - - - - - - - - - - - -4x - -4x -4x -4x - -4x -4x -16x - - - -16x - - - -16x - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -4x - -4x - -4x - -4x -4x - -4x - -4x -4x -4x - -4x - - -4x -4x -4x -4x - -4x - - - - -4x - - - - - - -4x - - - - - -4x - -4x - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -4x -2x - -4x -2x - -2x - - - - - - -4x -2x -2x - -2x - - - - -2x - -2x -2x - -2x - - -2x -2x - -2x -2x - -2x -2x -2x -2x - - - - -3x - - -1x - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -1x - - - - | /* eslint-disable */
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import { findDOMNode } from 'react-dom';
-import * as animationFrame from 'dom-helpers/animationFrame';
-import memoize from 'memoize-one';
-import getWidth from 'dom-helpers/width';
-import TimeGutter from 'react-big-calendar/lib/TimeGutter';
-import { notify } from 'react-big-calendar/lib/utils/helpers';
-import { inRange, sortEvents } from 'react-big-calendar/lib/utils/eventLevels';
-import Resources from 'react-big-calendar/lib/utils/Resources';
-import { DayLayoutAlgorithmPropType } from 'react-big-calendar/lib/utils/propTypes';
-import { Box } from '@bubbles-ui/components';
-
-import TimeGridHeader from './TimeGridHeader';
-import DayColumn from '../DayView/DayColumn';
-
-const customInRange = (event, rangeStart, rangeEnd, localizer) => {
- const eStart = event.start;
- const eEnd = event.end;
-
- const startsBeforeEnd = eStart <= rangeEnd;
- const endsAfterStart = eEnd >= 0;
-
- return startsBeforeEnd && endsAfterStart;
-};
-
-export default class TimeGrid extends Component {
- constructor(props) {
- super(props);
-
- this.state = { gutterWidth: undefined, isOverflowing: null };
-
- this.scrollRef = React.createRef();
- this.contentRef = React.createRef();
- this._scrollRatio = null;
- }
-
- UNSAFE_componentWillMount() {
- this.calculateScroll();
- }
-
- componentDidMount() {
- this.checkOverflow();
-
- Eif (this.props.width == null) {
- this.measureGutter();
- }
-
- this.applyScroll();
-
- window.addEventListener('resize', this.handleResize);
- }
-
- handleScroll = (e) => {
- if (this.scrollRef.current) {
- this.scrollRef.current.scrollLeft = e.target.scrollLeft;
- }
- };
-
- handleResize = () => {
- animationFrame.cancel(this.rafHandle);
- this.rafHandle = animationFrame.request(this.checkOverflow);
- };
-
- componentWillUnmount() {
- window.removeEventListener('resize', this.handleResize);
-
- animationFrame.cancel(this.rafHandle);
-
- Eif (this.measureGutterAnimationFrameRequest) {
- window.cancelAnimationFrame(this.measureGutterAnimationFrameRequest);
- }
- }
-
- componentDidUpdate() {
- Eif (this.props.width == null) {
- this.measureGutter();
- }
-
- this.applyScroll();
- // this.checkOverflow()
- }
-
- UNSAFE_componentWillReceiveProps(nextProps) {
- const { range, scrollToTime, localizer } = this.props;
- // When paginating, reset scroll
- Iif (
- localizer.neq(nextProps.range[0], range[0], 'minutes') ||
- localizer.neq(nextProps.scrollToTime, scrollToTime, 'minutes')
- ) {
- this.calculateScroll(nextProps);
- }
- }
-
- gutterRef = (ref) => {
- this.gutter = ref && findDOMNode(ref);
- };
-
- handleSelectAlldayEvent = (...args) => {
- // cancel any pending selections so only the event click goes through.
- this.clearSelection();
- notify(this.props.onSelectEvent, args);
- };
-
- handleSelectAllDaySlot = (slots, slotInfo) => {
- const { onSelectSlot } = this.props;
-
- const start = new Date(slots[0]);
- const end = new Date(slots[slots.length - 1]);
- end.setDate(slots[slots.length - 1].getDate() + 1);
-
- notify(onSelectSlot, {
- slots,
- start,
- end,
- action: slotInfo.action,
- resourceId: slotInfo.resourceId,
- });
- };
-
- renderEvents(range, events, backgroundEvents, now) {
- const { min, max, components, accessors, localizer, dayLayoutAlgorithm } = this.props;
-
- const resources = this.memoizedResources(this.props.resources, accessors);
- const groupedEvents = resources.groupEvents(events);
- const groupedBackgroundEvents = resources.groupEvents(backgroundEvents);
-
- return resources.map(([id, resource], i) =>
- range.map((date, jj) => {
- const daysEvents = (groupedEvents.get(id) || []).filter((event) =>
- localizer.inRange(date, accessors.start(event), accessors.end(event), 'day'),
- );
-
- const daysBackgroundEvents = (groupedBackgroundEvents.get(id) || []).filter((event) =>
- localizer.inRange(date, accessors.start(event), accessors.end(event), 'day'),
- );
-
- return (
- <DayColumn
- {...this.props}
- localizer={localizer}
- min={localizer.merge(date, min)}
- max={localizer.merge(date, max)}
- resource={resource && id}
- components={components}
- isNow={localizer.isSameDate(date, now)}
- key={`${i}-${jj}`}
- date={date}
- events={daysEvents}
- backgroundEvents={daysBackgroundEvents}
- dayLayoutAlgorithm={dayLayoutAlgorithm}
- />
- );
- }),
- );
- }
-
- render() {
- let {
- events,
- backgroundEvents,
- range,
- width,
- rtl,
- selected,
- getNow,
- resources,
- components,
- accessors,
- getters,
- localizer,
- min,
- max,
- showMultiDayTimes,
- longPressThreshold,
- resizable,
- } = this.props;
-
- const { cx, noAllDayEvents } = components;
-
- width = width || this.state.gutterWidth;
-
- const start = range[0];
- const end = range[range.length - 1];
-
- this.slots = range.length;
-
- const allDayEvents = [];
- const rangeEvents = [];
- const rangeBackgroundEvents = [];
-
- events.forEach((event) => {
- // Aqui se estaba usando esta funciΓ³n inRange(event, start, end, accessors, localizer)
- // Pero por algΓΊn motivo no estaba determinando bien si el evento estaba dentro del rango o no
- end.setHours(23, 59, 59, 59);
- Eif (customInRange(event, start, end, localizer)) {
- const eStart = accessors.start(event);
- const eEnd = accessors.end(event);
-
- if (
- accessors.allDay(event) ||
- // localizer.startAndEndAreDateOnly(eStart, eEnd) ||
- (!showMultiDayTimes && !localizer.isSameDate(eStart, eEnd))
- ) {
- allDayEvents.push(event);
- } else E{
- rangeEvents.push(event);
- }
- }
- });
-
- backgroundEvents.forEach((event) => {
- if (inRange(event, start, end, accessors, localizer)) {
- rangeBackgroundEvents.push(event);
- }
- });
-
- allDayEvents.sort((a, b) => sortEvents(a, b, accessors, localizer));
-
- return (
- <Box
- className={cx('rbc-time-view', {
- 'rbc-time-view-resources': resources,
- // 'hide-weekends': !showWeekends,
- })}
- >
- <TimeGridHeader
- range={range}
- events={allDayEvents}
- width={width}
- rtl={rtl}
- getNow={getNow}
- localizer={localizer}
- selected={selected}
- resources={this.memoizedResources(resources, accessors)}
- selectable={this.props.selectable}
- accessors={accessors}
- getters={getters}
- components={components}
- scrollRef={this.scrollRef}
- isOverflowing={this.state.isOverflowing}
- longPressThreshold={longPressThreshold}
- onSelectSlot={this.handleSelectAllDaySlot}
- onSelectEvent={this.handleSelectAlldayEvent}
- onDoubleClickEvent={this.props.onDoubleClickEvent}
- onKeyPressEvent={this.props.onKeyPressEvent}
- onDrillDown={this.props.onDrillDown}
- getDrilldownView={this.props.getDrilldownView}
- resizable={resizable}
- />
- <Box ref={this.contentRef} className="rbc-time-content" onScroll={this.handleScroll}>
- <TimeGutter
- date={start}
- ref={this.gutterRef}
- localizer={localizer}
- min={localizer.merge(start, min)}
- max={localizer.merge(start, max)}
- step={this.props.step}
- getNow={this.props.getNow}
- timeslots={this.props.timeslots}
- components={components}
- className="rbc-time-gutter"
- getters={getters}
- />
- {this.renderEvents(range, rangeEvents, rangeBackgroundEvents, getNow())}
- </Box>
- </Box>
- );
- }
-
- clearSelection() {
- clearTimeout(this._selectTimer);
- this._pendingSelection = [];
- }
-
- measureGutter() {
- if (this.measureGutterAnimationFrameRequest) {
- window.cancelAnimationFrame(this.measureGutterAnimationFrameRequest);
- }
- this.measureGutterAnimationFrameRequest = window.requestAnimationFrame(() => {
- const width = getWidth(this.gutter);
-
- Iif (width && this.state.gutterWidth !== width) {
- this.setState({ gutterWidth: width });
- }
- });
- }
-
- applyScroll() {
- if (this._scrollRatio != null) {
- const content = this.contentRef.current;
- content.scrollTop = content.scrollHeight * this._scrollRatio;
- // Only do this once
- this._scrollRatio = null;
- }
- }
-
- calculateScroll(props = this.props) {
- const { min, max, scrollToTime, localizer } = props;
-
- const diffMillis = scrollToTime - localizer.startOf(scrollToTime, 'day');
- const totalMillis = max - min;
-
- this._scrollRatio = diffMillis / totalMillis;
- }
-
- checkOverflow = () => {
- Iif (this._updatingOverflow) return;
-
- const content = this.contentRef.current;
- const isOverflowing = content.scrollHeight > content.clientHeight;
-
- Eif (this.state.isOverflowing !== isOverflowing) {
- this._updatingOverflow = true;
- this.setState({ isOverflowing }, () => {
- this._updatingOverflow = false;
- });
- }
- };
-
- memoizedResources = memoize((resources, accessors) => Resources(resources, accessors));
-}
-
-TimeGrid.propTypes = {
- events: PropTypes.array.isRequired,
- backgroundEvents: PropTypes.array.isRequired,
- resources: PropTypes.array,
-
- step: PropTypes.number,
- timeslots: PropTypes.number,
- range: PropTypes.arrayOf(PropTypes.instanceOf(Date)),
- min: PropTypes.instanceOf(Date).isRequired,
- max: PropTypes.instanceOf(Date).isRequired,
- getNow: PropTypes.func.isRequired,
-
- scrollToTime: PropTypes.instanceOf(Date).isRequired,
- showMultiDayTimes: PropTypes.bool,
-
- rtl: PropTypes.bool,
- resizable: PropTypes.bool,
- width: PropTypes.number,
-
- accessors: PropTypes.object.isRequired,
- components: PropTypes.object.isRequired,
- getters: PropTypes.object.isRequired,
- localizer: PropTypes.object.isRequired,
-
- selected: PropTypes.object,
- selectable: PropTypes.oneOf([true, false, 'ignoreEvents']),
- longPressThreshold: PropTypes.number,
-
- onNavigate: PropTypes.func,
- onSelectSlot: PropTypes.func,
- onSelectEnd: PropTypes.func,
- onSelectStart: PropTypes.func,
- onSelectEvent: PropTypes.func,
- onDoubleClickEvent: PropTypes.func,
- onKeyPressEvent: PropTypes.func,
- onDrillDown: PropTypes.func,
- getDrilldownView: PropTypes.func.isRequired,
-
- dayLayoutAlgorithm: DayLayoutAlgorithmPropType,
-};
-
-TimeGrid.defaultProps = {
- step: 30,
- timeslots: 2,
-};
- |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 -19 -20 -21 -22 -23 -24 -25 -26 -27 -28 -29 -30 -31 -32 -33 -34 | - -1x - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -1x - | import PropTypes from 'prop-types';
-
-export const TIMEGRIDHEADER_PROPTYPES = {
- range: PropTypes.array.isRequired,
- events: PropTypes.array.isRequired,
- resources: PropTypes.object,
- getNow: PropTypes.func.isRequired,
- isOverflowing: PropTypes.bool,
-
- rtl: PropTypes.bool,
- resizable: PropTypes.bool,
- width: PropTypes.number,
-
- localizer: PropTypes.object.isRequired,
- accessors: PropTypes.object.isRequired,
- components: PropTypes.object.isRequired,
- getters: PropTypes.object.isRequired,
-
- selected: PropTypes.object,
- selectable: PropTypes.oneOf([true, false, 'ignoreEvents']),
- longPressThreshold: PropTypes.number,
-
- onSelectSlot: PropTypes.func,
- onSelectEvent: PropTypes.func,
- onDoubleClickEvent: PropTypes.func,
- onKeyPressEvent: PropTypes.func,
- onDrillDown: PropTypes.func,
- getDrilldownView: PropTypes.func.isRequired,
- date: PropTypes.instanceOf(Date),
- scrollRef: PropTypes.any,
-};
-
-export const TIMEGRIDHEADER_DEFAULT_PROPS = {};
- |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 -19 -20 -21 -22 -23 -24 -25 -26 -27 -28 -29 -30 -31 -32 -33 -34 -35 -36 -37 -38 -39 -40 -41 -42 -43 -44 -45 -46 -47 -48 -49 -50 -51 -52 -53 -54 -55 -56 -57 -58 -59 -60 -61 -62 -63 -64 -65 -66 -67 -68 -69 -70 -71 -72 -73 -74 -75 -76 -77 -78 -79 -80 -81 -82 -83 -84 -85 -86 -87 -88 -89 -90 -91 -92 -93 -94 -95 -96 -97 -98 -99 -100 -101 -102 -103 -104 -105 -106 -107 -108 -109 -110 -111 -112 -113 -114 -115 -116 -117 -118 -119 -120 -121 -122 -123 -124 -125 -126 -127 -128 -129 -130 -131 -132 -133 -134 -135 -136 -137 -138 -139 -140 -141 -142 -143 -144 -145 -146 -147 -148 -149 -150 -151 -152 -153 -154 -155 -156 -157 -158 -159 -160 -161 -162 -163 -164 -165 -166 -167 -168 -169 -170 -171 -172 -173 -174 -175 -176 -177 -178 -179 -180 -181 -182 -183 -184 -185 -186 -187 -188 -189 -190 -191 -192 -193 -194 -195 -196 -197 -198 -199 -200 -201 -202 -203 -204 -205 -206 -207 -208 -209 -210 -211 -212 -213 -214 -215 -216 -217 -218 -219 -220 -221 -222 -223 -224 -225 -226 -227 -228 -229 -230 -231 -232 -233 -234 | - - - - - - - - - - - -2x - - - - - - - - - - - -4x - -4x - -4x -16x -16x - - - - -16x - -16x - -16x - -16x - - - - - - - - - - - - - - - - - - - -2x -16x -16x -16x -16x -16x -16x -16x - -16x - - - - - - - - - - - - - - - - - -2x - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -4x - -4x -4x - - - -4x - -4x - - - - - - - - - - - - - -4x - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -1x - - - | import React from 'react';
-import { capitalize } from 'lodash';
-import scrollbarSize from 'dom-helpers/scrollbarSize';
-import Header from 'react-big-calendar/lib/Header';
-import ResourceHeader from 'react-big-calendar/lib/ResourceHeader';
-import { notify } from 'react-big-calendar/lib/utils/helpers';
-import DateHeader from 'react-big-calendar/lib/DateHeader';
-import { Box } from '@bubbles-ui/components';
-import { TIMEGRIDHEADER_PROPTYPES } from './TimeGridHeader.constants';
-import DateContentRow from '../Date/DateContentRow';
-
-class TimeGridHeader extends React.Component {
- handleHeaderClick = (date, view, e) => {
- e.preventDefault();
- notify(this.props.onDrillDown, [date, view]);
- };
-
- renderHeaderCells(range) {
- const {
- localizer,
- getDrilldownView,
- getNow,
- getters: { dayProp },
- components: { cx, header: HeaderComponent = Header },
- } = this.props;
-
- const today = getNow();
-
- return range.map((date, i) => {
- const drilldownView = getDrilldownView(date);
- let label = localizer.format(
- date,
- range.length === 1 ? 'weekdayFullFormat' : 'weekdayFormat'
- );
-
- label = range.length === 1 ? capitalize(label) : label;
-
- const { className, style } = dayProp(date);
-
- const header = <HeaderComponent date={date} label={label} localizer={localizer} />;
-
- return (
- <Box
- key={i}
- style={style}
- className={cx('rbc-header', className, {
- 'rbc-today': localizer.isSameDate(date, today),
- })}
- >
- {drilldownView ? (
- <a href="#" onClick={(e) => this.handleHeaderClick(date, drilldownView, e)}>
- {header}
- </a>
- ) : (
- <span>{header}</span>
- )}
- </Box>
- );
- });
- }
-
- readerDateHeading = ({ date, className, isWeekend, ...props }) => {
- const { date: currentDate, getDrilldownView, localizer } = this.props;
- const isOffRange = localizer.neq(date, currentDate, 'month');
- const isCurrent = localizer.isSameDate(date, currentDate);
- const drilldownView = getDrilldownView(date);
- const label = localizer.format(date, 'dateFormat').replace(/^0/, '');
- const DateHeaderComponent = this.props.components.dateHeader || DateHeader;
- const { cx } = this.props.components;
-
- return (
- <Box
- {...props}
- className={cx(className, { 'rbc-off-range': isOffRange, 'rbc-current': isCurrent })}
- role="presentation"
- style={{ pointerEvents: 'all' }}
- >
- <DateHeaderComponent
- label={label}
- date={date}
- drilldownView={drilldownView}
- isOffRange={isOffRange}
- onDrillDown={(e) => this.handleHeadingClick(date, drilldownView, e)}
- />
- </Box>
- );
- };
-
- renderRow = (resource) => {
- const {
- events,
- rtl,
- selectable,
- getNow,
- range,
- getters,
- localizer,
- accessors,
- components,
- resizable,
- } = this.props;
-
- const resourceId = accessors.resourceId(resource);
- const eventsToDisplay = resource
- ? events.filter((event) => accessors.resource(event) === resourceId)
- : events;
-
- return (
- <DateContentRow
- isAllDay
- rtl={rtl}
- getNow={getNow}
- minRows={2}
- range={range}
- events={eventsToDisplay}
- resourceId={resourceId}
- className="rbc-allday-cell"
- selectable={selectable}
- selected={this.props.selected}
- components={components}
- accessors={accessors}
- getters={getters}
- localizer={localizer}
- onSelect={this.props.onSelectEvent}
- onDoubleClick={this.props.onDoubleClickEvent}
- onKeyPress={this.props.onKeyPressEvent}
- onSelectSlot={this.props.onSelectSlot}
- longPressThreshold={this.props.longPressThreshold}
- resizable={resizable}
- />
- );
- };
-
- render() {
- const {
- width,
- rtl,
- resources,
- range,
- events,
- getNow,
- accessors,
- selectable,
- components,
- getters,
- scrollRef,
- localizer,
- isOverflowing,
- components: {
- cx,
- timeGutterHeader: TimeGutterHeader,
- resourceHeader: ResourceHeaderComponent = ResourceHeader,
- hideAllDayCells,
- },
- resizable,
- } = this.props;
-
- const style = {};
- Iif (isOverflowing) {
- style[rtl ? 'marginLeft' : 'marginRight'] = `${scrollbarSize()}px`;
- }
-
- const groupedEvents = resources.groupEvents(events);
-
- return (
- <Box
- style={style}
- ref={scrollRef}
- className={cx('rbc-time-header', { 'rbc-overflowing': isOverflowing })}
- >
- <Box
- className="rbc-label rbc-time-header-gutter"
- style={{ width, minWidth: width, maxWidth: width }}
- >
- {TimeGutterHeader && <TimeGutterHeader />}
- </Box>
-
- {resources.map(([id, resource], idx) => (
- <Box className="rbc-time-header-content" key={id || idx}>
- {resource && (
- <Box className="rbc-row rbc-row-resource" key={`resource_${idx}`}>
- <Box className="rbc-header">
- <ResourceHeaderComponent
- index={idx}
- label={accessors.resourceTitle(resource)}
- resource={resource}
- />
- </Box>
- </Box>
- )}
- <Box
- className={cx('rbc-row', 'rbc-time-header-cell', {
- 'rbc-time-header-cell-single-day': range.length <= 1,
- })}
- >
- {this.renderHeaderCells(range)}
- </Box>
-
- {!hideAllDayCells ? (
- <DateContentRow
- isAllDay
- rtl={rtl}
- getNow={getNow}
- minRows={2}
- range={range}
- events={groupedEvents.get(id) || []}
- resourceId={resource && id}
- className="rbc-allday-cell"
- selectable={selectable}
- selected={this.props.selected}
- components={components}
- accessors={accessors}
- getters={getters}
- localizer={localizer}
- renderHeader={this.readerDateHeading}
- onSelect={this.props.onSelectEvent}
- onDoubleClick={this.props.onDoubleClickEvent}
- onKeyPress={this.props.onKeyPressEvent}
- onSelectSlot={this.props.onSelectSlot}
- longPressThreshold={this.props.longPressThreshold}
- resizable={resizable}
- />
- ) : null}
- </Box>
- ))}
- </Box>
- );
- }
-}
-
-TimeGridHeader.propTypes = TIMEGRIDHEADER_PROPTYPES;
-
-export default TimeGridHeader;
- |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| File | -- | Statements | -- | Branches | -- | Functions | -- | Lines | -- |
|---|---|---|---|---|---|---|---|---|---|
| TimeGrid.js | -
-
- |
- 79.43% | -85/107 | -63.04% | -29/46 | -68.96% | -20/29 | -80.76% | -84/104 | -
| TimeGridHeader.constants.js | -
-
- |
- 100% | -2/2 | -100% | -0/0 | -100% | -0/0 | -100% | -2/2 | -
| TimeGridHeader.js | -
-
- |
- 72.97% | -27/37 | -57.14% | -16/28 | -50% | -5/10 | -72.97% | -27/37 | -
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 -19 -20 -21 -22 | - -1x - - - - - - - - - - - - - - - - - -1x - | import PropTypes from 'prop-types';
-
-export const TOOLBAR_PROPTYPES = {
- label: PropTypes.string,
- localizer: PropTypes.object,
- onNavigate: PropTypes.func,
- onView: PropTypes.func,
- showType: PropTypes.string,
- setShowType: PropTypes.func,
- showWeekends: PropTypes.bool,
- setShowWeekends: PropTypes.func,
- toolbarRightNode: PropTypes.node,
- showToolbarAddButton: PropTypes.bool,
- showToolbarToggleWeekend: PropTypes.bool,
- showToolbarViewSwitcher: PropTypes.bool,
- addEventClick: PropTypes.func,
- view: PropTypes.string,
- views: PropTypes.arrayOf(PropTypes.string),
-};
-
-export const TOOLBAR_DEFAULT_PROPS = {};
- |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 -19 -20 -21 -22 -23 -24 -25 -26 -27 -28 -29 -30 -31 -32 -33 -34 -35 -36 -37 -38 -39 -40 -41 -42 -43 -44 -45 -46 -47 -48 -49 -50 -51 -52 -53 -54 -55 -56 -57 -58 -59 -60 -61 -62 -63 -64 -65 -66 -67 -68 -69 -70 -71 -72 -73 -74 -75 -76 -77 -78 -79 -80 -81 -82 -83 -84 -85 -86 -87 -88 -89 -90 -91 -92 -93 -94 -95 -96 -97 -98 -99 -100 -101 -102 -103 -104 -105 -106 -107 -108 -109 -110 -111 -112 -113 -114 -115 -116 -117 -118 -119 -120 -121 -122 -123 -124 -125 -126 -127 -128 -129 -130 -131 -132 -133 | - - - - - - - - - - - - - - - - - - - - - - -1x - - - - - - - - - - - - - - - - -29x -29x - - - - - - - - -1x - - - - - - - - - - - - -1x - - - - - - - - - - -29x -29x - - - - - - - - - - - - - - - - - - - - -1x - - - - - - - - - -3x - - - - - - - - - - - - - - - - - - - - - -1x - - - - | import React from 'react';
-import { capitalize } from 'lodash';
-import {
- ActionButton,
- Box,
- Button,
- Group,
- IconButton,
- InputWrapper,
- Select,
- Switch,
- Text,
-} from '@bubbles-ui/components';
-import { navigate, views as RCBViews } from 'react-big-calendar/lib/utils/constants';
-import {
- AddIcon as PlusIcon,
- ChevLeftIcon as ChevronLeftIcon,
- ChevRightIcon as ChevronRightIcon,
-} from '@bubbles-ui/icons/outline';
-import { ToolbarStyles } from './Toolbar.styles';
-import { ViewNamesGroup } from './ViewNamesGroup';
-import { TOOLBAR_PROPTYPES } from './Toolbar.constants';
-
-const ToolBar = ({
- localizer: { messages },
- label,
- view,
- views,
- onNavigate,
- onView,
- showType,
- setShowType,
- showWeekends,
- setShowWeekends,
- toolbarRightNode,
- showToolbarAddButton,
- showToolbarToggleWeekend,
- showToolbarViewSwitcher,
- addEventClick,
-}) => {
- const { classes } = ToolbarStyles({});
- return (
- <Group position="apart" mb={10}>
- <Group>
- <Group spacing={0}>
- <Box mr={10}>
- <Button
- size="sm"
- variant="outline"
- color="terciary"
- onClick={() => onNavigate(navigate.TODAY)}
- >
- {messages.today}
- </Button>
- </Box>
- <ActionButton
- data-testid="chevron-left"
- onClick={() => onNavigate(navigate.PREVIOUS)}
- tooltip={messages.previous}
- icon={<ChevronLeftIcon className={classes.navIcon} />}
- />
- <ActionButton
- data-testid="chevron-right"
- onClick={() => onNavigate(navigate.NEXT)}
- tooltip={messages.next}
- icon={<ChevronRightIcon className={classes.navIcon} />}
- />
- </Group>
- <Box>
- <Text size="xl">{capitalize(label)}</Text>
- </Box>
- </Group>
-
- <Group style={{ gap: 12 }}>
- <Box sx={() => ({ display: 'flex', alignItems: 'center' })}>
- <Box sx={(theme) => ({ paddingTop: theme.spacing[2], paddingRight: theme.spacing[2] })}>
- <InputWrapper label={messages.display} />
- </Box>
- <Select
- value={showType}
- ariaLabelledby="display"
- ariaLabel="display"
- onChange={setShowType}
- data={[
- { label: messages.entirePeriod, value: 'full' },
- { label: messages.onlyInitAndEnd, value: 'startEnd' },
- { label: messages.onlyEnd, value: 'onlyEnd' },
- ]}
- />
- </Box>
- {view !== RCBViews.DAY && showToolbarToggleWeekend ? (
- <Switch
- label={messages.showWeekends}
- labelPosition="end"
- checked={showWeekends}
- onChange={(event) =>
- typeof setShowWeekends === 'function' ? setShowWeekends(event) : null
- }
- />
- ) : null}
- {showToolbarViewSwitcher ? (
- <ViewNamesGroup
- views={views}
- messages={messages}
- current={view}
- classes={classes}
- onChange={(val) => onView(val)}
- />
- ) : null}
-
- {showToolbarAddButton ? (
- <IconButton
- color="primary"
- size="lg"
- rounded
- onClick={addEventClick}
- data-testid="add-event"
- aria-label="add-event"
- >
- <PlusIcon />
- </IconButton>
- ) : null}
- {toolbarRightNode}
- </Group>
- </Group>
- );
-};
-
-ToolBar.propTypes = TOOLBAR_PROPTYPES;
-
-export default ToolBar;
-export { ToolBar };
- |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 -19 -20 -21 -22 -23 | - - -29x - - - - - - - - - - - - - - - - - - - | /* eslint-disable import/prefer-default-export */
-import { createStyles, getFontExpressive } from '@bubbles-ui/components';
-
-export const ToolbarStyles = createStyles((theme) => ({
- root: {},
- viewItemLabel: {
- ...getFontExpressive(theme.fontSizes['2'], 400),
- color: theme.colors.text03,
- },
- viewItemActive: {
- top: 4,
- left: 4,
- },
- viewItemGroup: {
- marginLeft: 2,
- padding: 2,
- },
- navIcon: {
- width: 20,
- height: 20,
- },
-}));
- |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 | - -1x - - - - - - - -1x - | import PropTypes from 'prop-types';
-
-export const VIEWNAMESGROUP_PROPTYPES = {
- messages: PropTypes.object,
- views: PropTypes.arrayOf(PropTypes.string),
- current: PropTypes.string,
- onChange: PropTypes.func,
- classes: PropTypes.object,
-};
-
-export const VIEWNAMESGROUP_DEFAULT_PROPS = {};
- |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 -19 -20 -21 -22 -23 -24 -25 -26 -27 -28 -29 -30 -31 -32 -33 -34 -35 -36 -37 -38 -39 -40 -41 -42 -43 -44 -45 -46 -47 | - - - -1x -46x -46x - -46x -29x -29x -116x - -29x - - -46x - -46x -3x -3x - - -46x -18x - - - - - - - - - - - - - - -28x - - -1x - - - - | import React, { useEffect, useState } from 'react';
-import { SegmentedControl } from '@bubbles-ui/components';
-import { VIEWNAMESGROUP_PROPTYPES } from './ViewNamesGroup.constants';
-
-const ViewNamesGroup = ({ messages, views, current, onChange, classes }) => {
- const [value, setValue] = useState(current);
- const [data, setData] = useState([]);
-
- useEffect(() => {
- const newData = [];
- Eif (messages && views && views.length > 1) {
- views.forEach((name) => newData.push({ label: messages[name], value: name }));
- }
- setData(newData);
- }, [messages, views]);
-
- useEffect(() => setValue(current), [current]);
-
- const handleOnChange = (val) => {
- setValue(val);
- Eif (typeof onChange === 'function') onChange(val);
- };
-
- if (current && messages && views && data.length > 0) {
- return (
- <SegmentedControl
- size="xl"
- radius="xs"
- value={value}
- onChange={handleOnChange}
- data={data}
- classNames={{
- root: classes.viewItemGroup,
- label: classes.viewItemLabel,
- active: classes.viewItemActive,
- }}
- />
- );
- }
- return null;
-};
-
-ViewNamesGroup.propTypes = VIEWNAMESGROUP_PROPTYPES;
-
-export default ViewNamesGroup;
-export { ViewNamesGroup };
- |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| File | -- | Statements | -- | Branches | -- | Functions | -- | Lines | -- |
|---|---|---|---|---|---|---|---|---|---|
| Toolbar.constants.js | -
-
- |
- 100% | -2/2 | -100% | -0/0 | -100% | -0/0 | -100% | -2/2 | -
| Toolbar.js | -
-
- |
- 90.9% | -10/11 | -70% | -7/10 | -87.5% | -7/8 | -90.9% | -10/11 | -
| Toolbar.styles.js | -
-
- |
- 100% | -2/2 | -100% | -0/0 | -100% | -1/1 | -100% | -1/1 | -
| ViewNamesGroup.constants.js | -
-
- |
- 100% | -2/2 | -100% | -0/0 | -100% | -0/0 | -100% | -2/2 | -
| ViewNamesGroup.js | -
-
- |
- 100% | -19/19 | -84.61% | -11/13 | -100% | -5/5 | -100% | -16/16 | -
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 -19 -20 -21 -22 -23 -24 -25 -26 -27 -28 -29 -30 -31 -32 -33 -34 -35 -36 -37 -38 -39 -40 -41 -42 -43 -44 -45 -46 -47 -48 -49 -50 -51 -52 -53 -54 -55 -56 -57 -58 -59 -60 -61 -62 -63 -64 -65 -66 -67 -68 -69 -70 -71 -72 -73 -74 -75 -76 -77 -78 -79 -80 -81 -82 -83 -84 -85 -86 -87 -88 -89 -90 -91 -92 -93 -94 -95 -96 -97 -98 -99 -100 -101 -102 | - - - - - - - -1x - - - - - - - - - - - - - - - - - - -2x -2x - -2x - -2x - - -2x - - - -2x - - - -2x - - - - -2x - - - - - - - - - - - - - -1x - - - - - - - - - -1x - -1x - - - - - - - - - - - - -1x -5x -5x -5x - -5x - - -1x -2x -2x - - - - | import React from 'react';
-import PropTypes from 'prop-types';
-import { navigate } from 'react-big-calendar/lib/utils/constants';
-import _ from 'lodash';
-import TimeGrid from '../TimeGrid/TimeGrid';
-
-class WeekView extends React.Component {
- componentDidMount() {
- this.props.onRangeChange({
- start: this.props.localizer.startOf(this.props.date, 'week'),
- end: this.props.localizer.endOf(this.props.date, 'week'),
- });
- }
-
- render() {
- /**
- * This allows us to default min, max, and scrollToTime
- * using our localizer. This is necessary until such time
- * as TimeGrid is converted to a functional component.
- */
- const {
- date,
- localizer,
- min = localizer.startOf(new Date(), 'day'),
- max = localizer.endOf(new Date(), 'day'),
- scrollToTime = localizer.startOf(new Date(), 'day'),
- ...props
- } = this.props;
- let range = WeekView.range(date, this.props);
-
- const { showWeekends, minHour, maxHour, weekDays } = this.props.components;
-
- Iif (_.isArray(weekDays)) {
- range = _.filter(range, (dateW) => weekDays.includes(dateW.getDay()));
- }
- Iif (!showWeekends && !_.isArray(weekDays)) {
- range = _.filter(range, (dateD) => dateD.getDay() !== 0 && dateD.getDay() !== 6);
- }
-
- Iif (minHour) {
- const mi = minHour.split(':');
- min.setHours(parseInt(mi[0], 10), parseInt(mi[1], 10));
- }
- Iif (maxHour) {
- const ma = maxHour.split(':');
- max.setHours(parseInt(ma[0], 10), parseInt(ma[1], 10));
- }
-
- return (
- <TimeGrid
- {...props}
- range={range}
- eventOffset={15}
- localizer={localizer}
- min={min}
- max={max}
- scrollToTime={scrollToTime}
- />
- );
- }
-}
-
-WeekView.propTypes = {
- date: PropTypes.instanceOf(Date).isRequired,
- localizer: PropTypes.any,
- min: PropTypes.instanceOf(Date),
- max: PropTypes.instanceOf(Date),
- scrollToTime: PropTypes.instanceOf(Date),
- onRangeChange: PropTypes.func,
- components: PropTypes.object,
-};
-
-WeekView.defaultProps = TimeGrid.defaultProps;
-
-WeekView.navigate = (date, action, { localizer }) => {
- switch (action) {
- case navigate.PREVIOUS:
- return localizer.add(date, -1, 'week');
-
- case navigate.NEXT:
- return localizer.add(date, 1, 'week');
-
- default:
- return date;
- }
-};
-
-WeekView.range = (date, { localizer }) => {
- const firstOfWeek = localizer.startOfWeek();
- const start = localizer.startOf(date, 'week', firstOfWeek);
- const end = localizer.endOf(date, 'week', firstOfWeek);
-
- return localizer.range(start, end);
-};
-
-WeekView.title = (date, { localizer }) => {
- const [start, ...rest] = WeekView.range(date, { localizer });
- return localizer.format({ start, end: rest.pop() }, 'dayRangeHeaderFormat');
-};
-export default WeekView;
-export { WeekView };
- |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| File | -- | Statements | -- | Branches | -- | Functions | -- | Lines | -- |
|---|---|---|---|---|---|---|---|---|---|
| WeekView.js | -
-
- |
- 62.5% | -20/32 | -38.88% | -7/18 | -57.14% | -4/7 | -66.66% | -20/30 | -
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| File | -- | Statements | -- | Branches | -- | Functions | -- | Lines | -- |
|---|---|---|---|---|---|---|---|---|---|
| EventWrapper.constants.js | -
-
- |
- 75% | -3/4 | -0% | -0/2 | -0% | -0/1 | -100% | -3/3 | -
| EventWrapper.js | -
-
- |
- 18.18% | -4/22 | -3.12% | -1/32 | -100% | -1/1 | -18.18% | -4/22 | -
| EventWrapper.styles.js | -
-
- |
- 50% | -1/2 | -100% | -0/0 | -0% | -0/1 | -100% | -1/1 | -
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| File | -- | Statements | -- | Branches | -- | Functions | -- | Lines | -- |
|---|---|---|---|---|---|---|---|---|---|
| BigCalendar.constants.js | -
-
- |
- 100% | -7/7 | -100% | -0/0 | -100% | -0/0 | -100% | -7/7 | -
| BigCalendar.js | -
-
- |
- 73.33% | -55/75 | -80.43% | -37/46 | -65% | -13/20 | -72.97% | -54/74 | -
| BigCalendar.stories.js | -
-
- |
- 0% | -0/33 | -0% | -0/2 | -0% | -0/4 | -0% | -0/32 | -
| BigCalendar.styles.js | -
-
- |
- 100% | -16/16 | -52.43% | -43/82 | -100% | -8/8 | -100% | -9/9 | -
| index.js | -
-
- |
- 0% | -0/0 | -0% | -0/0 | -0% | -0/0 | -0% | -0/0 | -
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| 1 -2 -3 -4 -5 | - - - - | import { BigCalendar } from './BigCalendar';
-
-export default BigCalendar;
-export { BigCalendar };
- |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 -19 -20 -21 -22 -23 -24 -25 -26 -27 -28 -29 -30 | - - - - - - - - - - - - - - - - - - - - - - - - - - - - - | import { DateTime } from 'luxon';
-
-export default {
- events: [
- {
- allDay: true,
- title: 'Navidad',
- start: DateTime.fromISO('2022-12-22T23:00:00.000Z').toJSDate(),
- end: DateTime.fromISO('2023-01-08T23:00:00.000Z').toJSDate(),
- originalEvent: {
- noCanOpen: true,
- calendar: {
- bgColor: ['#DEEDE4', '#D5E4DB'],
- borderStyle: 'solid',
- desaturateColor: false,
- borderColor: '#DEEDE4',
- leftArrow: false,
- rightArrow: false,
- oneDayStyle: true,
- zIndex: -10,
- },
- },
- },
- ],
- currentView: 'monthRange',
- locale: 'es',
- defaultDate: DateTime.fromISO('2023-06-19T10:50:09.687Z').toJSDate(),
- monthRange: { startYear: 2022, startMonth: 8, endYear: 2023, endMonth: 5 },
-};
- |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 -19 -20 -21 -22 -23 -24 -25 -26 -27 -28 -29 -30 -31 -32 -33 -34 -35 -36 -37 -38 -39 -40 -41 -42 -43 -44 -45 -46 -47 -48 -49 -50 -51 -52 -53 -54 -55 -56 -57 -58 -59 -60 -61 -62 -63 -64 -65 -66 -67 -68 -69 -70 -71 -72 -73 -74 -75 -76 -77 -78 -79 -80 -81 -82 -83 -84 -85 -86 -87 -88 -89 -90 -91 -92 -93 -94 -95 -96 -97 -98 -99 -100 -101 -102 -103 -104 -105 -106 -107 -108 -109 -110 -111 -112 -113 -114 -115 -116 -117 -118 -119 -120 -121 -122 -123 -124 -125 -126 -127 -128 -129 -130 -131 -132 -133 -134 -135 -136 -137 -138 -139 -140 -141 -142 -143 -144 -145 -146 -147 -148 -149 -150 -151 -152 -153 -154 -155 -156 -157 -158 -159 -160 -161 -162 -163 -164 -165 -166 -167 -168 -169 -170 -171 -172 -173 -174 -175 -176 -177 -178 -179 -180 -181 -182 -183 -184 -185 -186 -187 -188 -189 -190 -191 -192 -193 -194 -195 -196 -197 -198 -199 -200 -201 -202 -203 -204 -205 -206 -207 -208 -209 -210 -211 -212 -213 -214 -215 -216 -217 -218 -219 -220 -221 -222 -223 -224 -225 -226 -227 -228 -229 -230 -231 -232 -233 -234 -235 -236 -237 -238 -239 -240 -241 -242 -243 -244 -245 -246 -247 -248 -249 -250 -251 -252 -253 -254 -255 -256 -257 -258 -259 -260 -261 -262 -263 -264 -265 -266 -267 -268 -269 -270 -271 -272 -273 -274 -275 -276 -277 -278 -279 -280 -281 -282 -283 -284 -285 -286 -287 -288 -289 -290 -291 -292 -293 -294 -295 -296 -297 -298 -299 -300 -301 -302 -303 -304 -305 -306 -307 -308 -309 -310 -311 -312 -313 -314 -315 -316 -317 -318 -319 -320 -321 -322 -323 -324 -325 -326 -327 -328 -329 -330 -331 -332 -333 -334 -335 -336 -337 -338 -339 -340 -341 -342 -343 -344 -345 -346 -347 -348 -349 -350 -351 -352 -353 -354 -355 -356 -357 -358 -359 -360 -361 -362 -363 -364 -365 -366 -367 -368 -369 -370 -371 -372 -373 -374 -375 -376 -377 -378 -379 -380 -381 -382 -383 -384 -385 -386 -387 -388 -389 -390 -391 -392 -393 -394 -395 -396 -397 -398 -399 -400 -401 -402 -403 -404 -405 -406 -407 -408 -409 -410 -411 -412 -413 -414 -415 -416 -417 -418 -419 -420 -421 -422 -423 -424 -425 -426 -427 -428 -429 -430 -431 -432 -433 -434 -435 -436 -437 -438 -439 -440 -441 -442 -443 -444 -445 -446 -447 -448 -449 -450 -451 -452 -453 -454 -455 -456 -457 -458 -459 -460 -461 -462 -463 -464 -465 -466 -467 -468 -469 -470 -471 -472 -473 -474 -475 -476 -477 -478 -479 -480 -481 -482 -483 -484 -485 -486 -487 -488 -489 -490 -491 -492 -493 -494 -495 -496 -497 -498 -499 -500 -501 -502 -503 -504 -505 -506 -507 -508 -509 -510 -511 -512 -513 -514 -515 -516 -517 -518 -519 -520 -521 -522 -523 -524 -525 -526 -527 -528 -529 -530 -531 -532 -533 -534 -535 -536 -537 -538 -539 -540 -541 -542 -543 -544 -545 -546 -547 -548 -549 -550 -551 -552 -553 -554 -555 -556 -557 -558 -559 -560 -561 -562 -563 -564 -565 -566 -567 -568 -569 -570 -571 -572 -573 -574 -575 -576 -577 -578 -579 -580 -581 -582 -583 -584 -585 -586 -587 -588 -589 -590 -591 -592 -593 -594 -595 -596 -597 -598 -599 -600 -601 -602 -603 -604 -605 -606 -607 -608 -609 -610 -611 -612 -613 -614 -615 -616 -617 -618 -619 -620 -621 -622 -623 -624 -625 -626 -627 -628 -629 -630 -631 -632 -633 -634 -635 -636 -637 -638 -639 -640 -641 -642 -643 -644 -645 -646 -647 -648 -649 -650 -651 -652 -653 -654 -655 -656 -657 -658 -659 -660 -661 -662 -663 -664 -665 -666 -667 -668 -669 -670 -671 -672 -673 -674 -675 -676 -677 -678 -679 -680 -681 -682 -683 -684 -685 -686 -687 -688 -689 -690 -691 -692 -693 -694 -695 -696 -697 -698 -699 -700 -701 -702 -703 -704 -705 -706 -707 -708 -709 -710 -711 -712 -713 -714 -715 -716 -717 -718 -719 -720 -721 -722 -723 -724 -725 -726 -727 -728 -729 -730 -731 -732 -733 -734 -735 -736 -737 -738 -739 -740 -741 -742 -743 -744 -745 -746 -747 -748 -749 -750 -751 -752 -753 -754 -755 -756 -757 -758 -759 -760 -761 -762 -763 -764 -765 -766 -767 -768 -769 -770 -771 -772 -773 -774 -775 -776 -777 -778 -779 -780 -781 -782 -783 -784 -785 -786 -787 -788 -789 -790 -791 -792 -793 -794 -795 -796 -797 -798 -799 -800 -801 -802 -803 -804 -805 -806 -807 -808 -809 -810 -811 -812 -813 -814 -815 -816 -817 -818 -819 -820 -821 -822 -823 -824 -825 -826 -827 -828 -829 -830 -831 -832 -833 -834 -835 -836 -837 -838 -839 -840 -841 -842 -843 -844 -845 -846 -847 -848 -849 -850 -851 -852 -853 -854 -855 -856 -857 -858 -859 -860 -861 -862 -863 -864 -865 -866 -867 -868 -869 -870 -871 -872 -873 -874 -875 -876 -877 -878 -879 -880 -881 -882 -883 -884 -885 -886 -887 -888 -889 -890 -891 -892 -893 -894 -895 -896 -897 -898 -899 -900 -901 -902 -903 -904 -905 -906 -907 -908 -909 -910 -911 -912 -913 -914 -915 -916 -917 -918 -919 -920 -921 -922 -923 -924 -925 -926 -927 -928 -929 -930 -931 -932 -933 -934 -935 -936 -937 -938 -939 -940 -941 -942 -943 -944 -945 -946 -947 -948 -949 -950 -951 -952 -953 -954 -955 -956 -957 -958 -959 -960 -961 -962 -963 -964 -965 -966 -967 -968 -969 -970 -971 -972 -973 -974 -975 -976 -977 -978 -979 -980 -981 -982 -983 -984 -985 -986 -987 -988 -989 -990 -991 -992 -993 -994 -995 -996 -997 -998 -999 -1000 -1001 -1002 -1003 -1004 -1005 -1006 -1007 -1008 -1009 -1010 -1011 -1012 -1013 -1014 -1015 -1016 -1017 -1018 -1019 -1020 -1021 | - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - | import { DateTime } from 'luxon';
-
-/*
-export default [
- {
- id: '425989f9-4716-4519-b9ea-4b67bb725897-0',
- title: 'GeografΓa e Historia (2ΒΊA)',
- allDay: false,
- start: DateTime.fromISO('2022-06-26T10:15:00.040Z').toJSDate(),
- end: DateTime.fromISO('2022-06-26T11:15:59.040Z').toJSDate()).toJSDate(),
- originalEvent: {
- title: 'GeografΓa e Historia (2ΒΊA)',
- bgColor: '#1BB184',
- borderColor: '#1BB184',
- icon: 'http://localhost:8080/api/leebrary/img/bd0bfe67-1380-4e7c-a094-e6e6fd7d53f6@1.0.0?authorization=%5B%22eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzZXNzaW9uQ29uZmlnIjp7InByb2dyYW0iOiI2NGJmM2ZmZi1iZWQ3LTRlOTktYWMwOS0yYzA0YzRlZjcwOTkifSwidXNlckFnZW50IjoiYmMzOWMwNWEtYTEwOS00MzgwLWE5NTgtMWU5Njk5MmVhMmYxIiwiaWF0IjoxNjU1OTExNjc3LCJleHAiOjE2NTU5OTgwNzd9.gN-3t36dte2sFxN13z87R6B4p7AzRjqOuTbUOTptNAg%22%5D',
- calendar: {
- bgColor: '#1BB184',
- borderColor: '#1BB184',
- icon: 'http://localhost:8080/api/leebrary/img/bd0bfe67-1380-4e7c-a094-e6e6fd7d53f6@1.0.0?authorization=%5B%22eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzZXNzaW9uQ29uZmlnIjp7InByb2dyYW0iOiI2NGJmM2ZmZi1iZWQ3LTRlOTktYWMwOS0yYzA0YzRlZjcwOTkifSwidXNlckFnZW50IjoiYmMzOWMwNWEtYTEwOS00MzgwLWE5NTgtMWU5Njk5MmVhMmYxIiwiaWF0IjoxNjU1OTExNjc3LCJleHAiOjE2NTU5OTgwNzd9.gN-3t36dte2sFxN13z87R6B4p7AzRjqOuTbUOTptNAg%22%5D',
- },
- },
- },
- {
- id: '425989f9-4716-4519-b9ea-4b67bb725897-1',
- title: 'GeografΓa e Historia (2ΒΊA)',
- allDay: false,
- start: DateTime.fromISO('2022-06-22T10:15:00.040Z').toJSDate(),
- end: DateTime.fromISO('2022-06-22T11:15:59.040Z').toJSDate(),
- originalEvent: {
- title: 'GeografΓa e Historia (2ΒΊA)',
- bgColor: '#1BB184',
- borderColor: '#1BB184',
- icon: 'http://localhost:8080/api/leebrary/img/bd0bfe67-1380-4e7c-a094-e6e6fd7d53f6@1.0.0?authorization=%5B%22eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzZXNzaW9uQ29uZmlnIjp7InByb2dyYW0iOiI2NGJmM2ZmZi1iZWQ3LTRlOTktYWMwOS0yYzA0YzRlZjcwOTkifSwidXNlckFnZW50IjoiYmMzOWMwNWEtYTEwOS00MzgwLWE5NTgtMWU5Njk5MmVhMmYxIiwiaWF0IjoxNjU1OTExNjc3LCJleHAiOjE2NTU5OTgwNzd9.gN-3t36dte2sFxN13z87R6B4p7AzRjqOuTbUOTptNAg%22%5D',
- calendar: {
- bgColor: '#1BB184',
- borderColor: '#1BB184',
- icon: 'http://localhost:8080/api/leebrary/img/bd0bfe67-1380-4e7c-a094-e6e6fd7d53f6@1.0.0?authorization=%5B%22eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzZXNzaW9uQ29uZmlnIjp7InByb2dyYW0iOiI2NGJmM2ZmZi1iZWQ3LTRlOTktYWMwOS0yYzA0YzRlZjcwOTkifSwidXNlckFnZW50IjoiYmMzOWMwNWEtYTEwOS00MzgwLWE5NTgtMWU5Njk5MmVhMmYxIiwiaWF0IjoxNjU1OTExNjc3LCJleHAiOjE2NTU5OTgwNzd9.gN-3t36dte2sFxN13z87R6B4p7AzRjqOuTbUOTptNAg%22%5D',
- },
- },
- },
-];
-
- */
-
-export default [{
- 'title': 'EvaluaciΓ³n inicial matemΓ‘ticas',
- 'allDay': false,
- 'start': DateTime.fromISO('2022-09-14T10:20:00.000Z').toJSDate(),
- 'end': DateTime.fromISO('2022-09-17T11:15:00.000Z').toJSDate(),
- 'originalEvent': {
- 'id': '9ff890dd-f135-4dfa-be06-6e3d68058f52',
- 'title': 'EvaluaciΓ³n inicial matemΓ‘ticas',
- 'startDate': '2022-09-14T10:20:00.000Z',
- 'endDate': '2022-09-14T11:15:00.000Z',
- 'isAllDay': 0,
- 'repeat': 'dont_repeat',
- 'type': 'plugins.calendar.event',
- 'status': 'active',
- 'data': { 'description': 'Operaciones combinadas', 'hideInCalendar': false },
- 'isPrivate': 0,
- 'deleted': 0,
- 'created_at': '2022-11-16T20:23:23.000Z',
- 'updated_at': '2022-11-16T20:23:23.000Z',
- 'deleted_at': null,
- 'calendar': {
- 'id': 'a39af748-7e80-441c-9ee9-9ddd2286a1c1',
- 'key': 'plugins.calendar.class.7c87eeec-1ca7-4303-94d6-afbb4215fe3e',
- 'name': 'MatemΓ‘ticas (G001)',
- 'icon': '/api/leebrary/img/ab7be215-8d60-40a7-bfa4-3f90cb509398@1.0.0',
- 'bgColor': '#4F96FF',
- 'borderColor': null,
- 'section': 'plugins.calendar.classes',
- 'metadata': { 'internalId': '004' },
- 'deleted': 0,
- 'created_at': '2022-11-16T20:21:58.000Z',
- 'updated_at': '2022-11-16T20:21:58.000Z',
- 'deleted_at': null,
- 'isClass': true,
- 'isUserCalendar': false,
- 'image': null,
- 'fullName': 'MatemΓ‘ticas (G001)',
- 'showEvents': true
- },
- 'fromCalendar': true,
- 'users': ['dad36dec-dc0b-4432-9478-758b6c5d8fe2'],
- 'owners': ['dad36dec-dc0b-4432-9478-758b6c5d8fe2'],
- 'userAgents': [{
- 'id': 'dad36dec-dc0b-4432-9478-758b6c5d8fe2',
- 'user': {
- 'id': '56e23188-4726-4b28-b958-a15ed9bcac1a',
- 'email': 'teacher+celia@leemons.io',
- 'name': 'Celia',
- 'surnames': 'Teacher',
- 'secondSurname': null,
- 'birthdate': '1975-05-04T00:00:00.000Z',
- 'avatar': '/api/leebrary/img/5e35e99a-6f93-479a-8152-b1fde1278755@1.0.0?t=1668626244225',
- 'gender': 'female',
- 'created_at': '2022-11-16T20:17:23.000Z'
- },
- 'role': '08faa3ce-0d4c-43a8-a1f8-799180893ae9'
- }],
- 'uniqClasses': ['a39af748-7e80-441c-9ee9-9ddd2286a1c1'],
- 'icon': '/api/leebrary/img/ab7be215-8d60-40a7-bfa4-3f90cb509398@1.0.0',
- 'bgColor': '#4F96FF',
- 'borderColor': null,
- 'calendarName': 'MatemΓ‘ticas (G001)'
- }
-}, {
- 'title': '> Prueba de asignaciΓ³n con incio y fin',
- 'allDay': true,
- 'start': DateTime.fromISO('2022-11-06T23:00:00.000Z').toJSDate(),
- 'end': DateTime.fromISO('2022-11-10T22:59:59.000Z').toJSDate(),
- 'originalEvent': {
- 'id': 'c7cdbc99-3579-4728-a360-ab092e9c30a0',
- 'title': '> Prueba de asignaciΓ³n con incio y fin',
- 'startDate': '2022-11-06T23:00:00.000Z',
- 'endDate': '2022-11-10T22:59:59.000Z',
- 'isAllDay': 1,
- 'repeat': 'dont_repeat',
- 'type': 'plugins.calendar.event',
- 'status': 'active',
- 'data': { 'description': 'Prueba de como se verΓa una asignaciΓ³n si le metemos inicio y final.' },
- 'isPrivate': 0,
- 'deleted': 0,
- 'created_at': '2022-11-23T17:49:40.000Z',
- 'updated_at': '2022-11-23T17:50:21.000Z',
- 'deleted_at': null,
- 'calendar': {
- 'id': 'c558079f-2c05-4635-93ec-7bfdab1fb663',
- 'key': 'plugins.calendar.class.356010bd-55f2-4549-8e42-b91592e331e8',
- 'name': 'Lengua castellana y literatura (G001)',
- 'icon': '/api/leebrary/img/5040d6fc-b8ea-4aed-a905-0f3eca90c1d3@1.0.0',
- 'bgColor': '#DC5571',
- 'borderColor': null,
- 'section': 'plugins.calendar.classes',
- 'metadata': { 'internalId': '003' },
- 'deleted': 0,
- 'created_at': '2022-11-16T20:21:56.000Z',
- 'updated_at': '2022-11-16T20:21:56.000Z',
- 'deleted_at': null,
- 'isClass': true,
- 'isUserCalendar': false,
- 'image': null,
- 'fullName': 'Lengua castellana y literatura (G001)',
- 'showEvents': true
- },
- 'fromCalendar': true,
- 'users': ['20a8062b-4b4e-49e9-bb7a-1a453d1fdb36', '6c6430bf-b0c8-4657-8da7-5e2f8c1c63c1'],
- 'owners': ['6c6430bf-b0c8-4657-8da7-5e2f8c1c63c1'],
- 'userAgents': [{
- 'id': '20a8062b-4b4e-49e9-bb7a-1a453d1fdb36',
- 'user': {
- 'id': '9f2f2150-a41f-4bde-9231-940626108776',
- 'email': 'student+john@leemons.io',
- 'name': 'John',
- 'surnames': 'MarΓn',
- 'secondSurname': null,
- 'birthdate': '2008-05-03T00:00:00.000Z',
- 'avatar': '/api/leebrary/img/4a172c6e-e686-4f93-83c7-7d3077ffc514@1.0.0?t=1668626255268',
- 'gender': 'male',
- 'created_at': '2022-11-16T20:17:33.000Z'
- },
- 'role': '4f6486f1-05ed-482e-b04f-f704066fc563'
- }, {
- 'id': '6c6430bf-b0c8-4657-8da7-5e2f8c1c63c1',
- 'user': {
- 'id': '8f83604c-63e6-4c66-a773-3558b1ade7dc',
- 'email': 'willy@leemons.io',
- 'name': 'Willy',
- 'surnames': 'RodrΓguez',
- 'secondSurname': null,
- 'birthdate': '1975-10-03T00:00:00.000Z',
- 'avatar': '/api/leebrary/img/f310dbdf-b944-442b-bdca-367feeb421d8@1.0.0?t=1668626242746',
- 'gender': 'male',
- 'created_at': '2022-11-16T20:17:22.000Z'
- },
- 'role': '08faa3ce-0d4c-43a8-a1f8-799180893ae9'
- }],
- 'uniqClasses': ['c558079f-2c05-4635-93ec-7bfdab1fb663'],
- 'icon': '/api/leebrary/img/5040d6fc-b8ea-4aed-a905-0f3eca90c1d3@1.0.0',
- 'bgColor': '#DC5571',
- 'borderColor': null,
- 'calendarName': 'Lengua castellana y literatura (G001)'
- }
-}, {
- 'title': 'Prueba de asignaciΓ³n con inicio y fin <<',
- 'allDay': true,
- 'start': DateTime.fromISO('2022-11-10T23:00:00.000Z').toJSDate(),
- 'end': DateTime.fromISO('2022-11-11T22:59:59.000Z').toJSDate(),
- 'originalEvent': {
- 'id': '0222a1b6-8c5f-431c-b1df-8c7cddf3c2b9',
- 'title': 'Prueba de asignaciΓ³n con inicio y fin <<',
- 'startDate': '2022-11-10T23:00:00.000Z',
- 'endDate': '2022-11-11T22:59:59.000Z',
- 'isAllDay': 1,
- 'repeat': 'dont_repeat',
- 'type': 'plugins.calendar.event',
- 'status': 'active',
- 'data': {},
- 'isPrivate': 0,
- 'deleted': 0,
- 'created_at': '2022-11-23T17:51:03.000Z',
- 'updated_at': '2022-11-23T17:51:17.000Z',
- 'deleted_at': null,
- 'calendar': {
- 'id': 'c558079f-2c05-4635-93ec-7bfdab1fb663',
- 'key': 'plugins.calendar.class.356010bd-55f2-4549-8e42-b91592e331e8',
- 'name': 'Lengua castellana y literatura (G001)',
- 'icon': '/api/leebrary/img/5040d6fc-b8ea-4aed-a905-0f3eca90c1d3@1.0.0',
- 'bgColor': '#DC5571',
- 'borderColor': null,
- 'section': 'plugins.calendar.classes',
- 'metadata': { 'internalId': '003' },
- 'deleted': 0,
- 'created_at': '2022-11-16T20:21:56.000Z',
- 'updated_at': '2022-11-16T20:21:56.000Z',
- 'deleted_at': null,
- 'isClass': true,
- 'isUserCalendar': false,
- 'image': null,
- 'fullName': 'Lengua castellana y literatura (G001)',
- 'showEvents': true
- },
- 'fromCalendar': true,
- 'users': ['20a8062b-4b4e-49e9-bb7a-1a453d1fdb36', '6c6430bf-b0c8-4657-8da7-5e2f8c1c63c1'],
- 'owners': ['6c6430bf-b0c8-4657-8da7-5e2f8c1c63c1'],
- 'userAgents': [{
- 'id': '20a8062b-4b4e-49e9-bb7a-1a453d1fdb36',
- 'user': {
- 'id': '9f2f2150-a41f-4bde-9231-940626108776',
- 'email': 'student+john@leemons.io',
- 'name': 'John',
- 'surnames': 'MarΓn',
- 'secondSurname': null,
- 'birthdate': '2008-05-03T00:00:00.000Z',
- 'avatar': '/api/leebrary/img/4a172c6e-e686-4f93-83c7-7d3077ffc514@1.0.0?t=1668626255268',
- 'gender': 'male',
- 'created_at': '2022-11-16T20:17:33.000Z'
- },
- 'role': '4f6486f1-05ed-482e-b04f-f704066fc563'
- }, {
- 'id': '6c6430bf-b0c8-4657-8da7-5e2f8c1c63c1',
- 'user': {
- 'id': '8f83604c-63e6-4c66-a773-3558b1ade7dc',
- 'email': 'willy@leemons.io',
- 'name': 'Willy',
- 'surnames': 'RodrΓguez',
- 'secondSurname': null,
- 'birthdate': '1975-10-03T00:00:00.000Z',
- 'avatar': '/api/leebrary/img/f310dbdf-b944-442b-bdca-367feeb421d8@1.0.0?t=1668626242746',
- 'gender': 'male',
- 'created_at': '2022-11-16T20:17:22.000Z'
- },
- 'role': '08faa3ce-0d4c-43a8-a1f8-799180893ae9'
- }],
- 'uniqClasses': ['c558079f-2c05-4635-93ec-7bfdab1fb663'],
- 'icon': '/api/leebrary/img/5040d6fc-b8ea-4aed-a905-0f3eca90c1d3@1.0.0',
- 'bgColor': '#DC5571',
- 'borderColor': null,
- 'calendarName': 'Lengua castellana y literatura (G001)'
- }
-}, {
- 'title': 'Entrega trabajo MΓΊsica',
- 'allDay': false,
- 'start': DateTime.fromISO('2022-10-06T08:30:00.000Z').toJSDate(),
- 'end': DateTime.fromISO('2022-10-06T08:30:00.000Z').toJSDate(),
- 'originalEvent': {
- 'id': '36a86f65-7203-460f-8ccc-60f47b2f87e0',
- 'title': 'Entrega trabajo MΓΊsica',
- 'startDate': '2022-10-06T08:30:00.000Z',
- 'endDate': '2022-10-06T08:30:00.000Z',
- 'isAllDay': 0,
- 'repeat': 'dont_repeat',
- 'type': 'plugins.calendar.event',
- 'status': 'active',
- 'data': { 'hideInCalendar': false },
- 'isPrivate': 0,
- 'deleted': 0,
- 'created_at': '2022-11-16T20:23:26.000Z',
- 'updated_at': '2022-11-16T20:23:26.000Z',
- 'deleted_at': null,
- 'calendar': {
- 'id': '0f1d7e49-77d4-4bf5-b891-91e8957c2857',
- 'key': 'plugins.calendar.class.8f2ba8ff-b24b-41f3-87bc-1fa9b758b480',
- 'name': 'MΓΊsica (G001)',
- 'icon': '/api/leebrary/img/ff93e911-8bce-41e2-be20-87d1e662653d@1.0.0',
- 'bgColor': '#E8C642',
- 'borderColor': null,
- 'section': 'plugins.calendar.classes',
- 'metadata': { 'internalId': '008' },
- 'deleted': 0,
- 'created_at': '2022-11-16T20:22:09.000Z',
- 'updated_at': '2022-11-16T20:22:09.000Z',
- 'deleted_at': null,
- 'isClass': true,
- 'isUserCalendar': false,
- 'image': null,
- 'fullName': 'MΓΊsica (G001)',
- 'showEvents': true
- },
- 'fromCalendar': true,
- 'users': ['dad36dec-dc0b-4432-9478-758b6c5d8fe2'],
- 'owners': ['dad36dec-dc0b-4432-9478-758b6c5d8fe2'],
- 'userAgents': [{
- 'id': 'dad36dec-dc0b-4432-9478-758b6c5d8fe2',
- 'user': {
- 'id': '56e23188-4726-4b28-b958-a15ed9bcac1a',
- 'email': 'teacher+celia@leemons.io',
- 'name': 'Celia',
- 'surnames': 'Teacher',
- 'secondSurname': null,
- 'birthdate': '1975-05-04T00:00:00.000Z',
- 'avatar': '/api/leebrary/img/5e35e99a-6f93-479a-8152-b1fde1278755@1.0.0?t=1668626244225',
- 'gender': 'female',
- 'created_at': '2022-11-16T20:17:23.000Z'
- },
- 'role': '08faa3ce-0d4c-43a8-a1f8-799180893ae9'
- }],
- 'uniqClasses': ['0f1d7e49-77d4-4bf5-b891-91e8957c2857'],
- 'icon': '/api/leebrary/img/ff93e911-8bce-41e2-be20-87d1e662653d@1.0.0',
- 'bgColor': '#E8C642',
- 'borderColor': null,
- 'calendarName': 'MΓΊsica (G001)'
- }
-}, {
- 'title': 'Proyecto: La historia detrΓ‘s del cuadro',
- 'allDay': true,
- 'start': DateTime.fromISO('2022-09-05T00:00:00.000Z').toJSDate(),
- 'end': DateTime.fromISO('2022-09-09T00:00:00.000Z').toJSDate(),
- 'originalEvent': {
- 'id': 'a4487fe3-144c-42cc-911a-914c3636ca1c',
- 'title': 'Proyecto: La historia detrΓ‘s del cuadro',
- 'startDate': '2022-09-19T00:00:00.000Z',
- 'endDate': '2022-09-23T00:00:00.000Z',
- 'isAllDay': 1,
- 'repeat': 'dont_repeat',
- 'type': 'plugins.calendar.event',
- 'status': 'active',
- 'data': { 'hideInCalendar': false },
- 'isPrivate': 0,
- 'deleted': 0,
- 'created_at': '2022-11-16T20:23:26.000Z',
- 'updated_at': '2022-11-16T20:23:26.000Z',
- 'deleted_at': null,
- 'calendar': {
- 'id': 'd91a53d7-4d06-4ebb-b5bb-bf9630289fcd',
- 'key': 'plugins.calendar.class.289747d9-65b3-4bbe-99e7-984bcd7e9470',
- 'name': 'GeografΓa e Historia (G001)',
- 'icon': '/api/leebrary/img/e2dd2ca5-fa5d-4b65-ae66-ce01a5f608d9@1.0.0',
- 'bgColor': '#1BB184',
- 'borderColor': null,
- 'section': 'plugins.calendar.classes',
- 'metadata': { 'internalId': '002' },
- 'deleted': 0,
- 'created_at': '2022-11-16T20:21:53.000Z',
- 'updated_at': '2022-11-16T20:21:53.000Z',
- 'deleted_at': null,
- 'isClass': true,
- 'isUserCalendar': false,
- 'image': null,
- 'fullName': 'GeografΓa e Historia (G001)',
- 'showEvents': true
- },
- 'fromCalendar': true,
- 'users': ['6c6430bf-b0c8-4657-8da7-5e2f8c1c63c1'],
- 'owners': ['6c6430bf-b0c8-4657-8da7-5e2f8c1c63c1'],
- 'userAgents': [{
- 'id': '6c6430bf-b0c8-4657-8da7-5e2f8c1c63c1',
- 'user': {
- 'id': '8f83604c-63e6-4c66-a773-3558b1ade7dc',
- 'email': 'willy@leemons.io',
- 'name': 'Willy',
- 'surnames': 'RodrΓguez',
- 'secondSurname': null,
- 'birthdate': '1975-10-03T00:00:00.000Z',
- 'avatar': '/api/leebrary/img/f310dbdf-b944-442b-bdca-367feeb421d8@1.0.0?t=1668626242746',
- 'gender': 'male',
- 'created_at': '2022-11-16T20:17:22.000Z'
- },
- 'role': '08faa3ce-0d4c-43a8-a1f8-799180893ae9'
- }],
- 'uniqClasses': ['d91a53d7-4d06-4ebb-b5bb-bf9630289fcd'],
- 'icon': '/api/leebrary/img/e2dd2ca5-fa5d-4b65-ae66-ce01a5f608d9@1.0.0',
- 'bgColor': '#1BB184',
- 'borderColor': null,
- 'calendarName': 'GeografΓa e Historia (G001)'
- }
-}, {
- 'title': 'Test de Cooper',
- 'allDay': false,
- 'start': DateTime.fromISO('2022-10-24T12:40:00.000Z').toJSDate(),
- 'end': DateTime.fromISO('2022-10-24T13:35:00.000Z').toJSDate(),
- 'originalEvent': {
- 'id': 'f3468f3d-fe30-4505-9116-5743fa8fd35f',
- 'title': 'Test de Cooper',
- 'startDate': '2022-10-24T12:40:00.000Z',
- 'endDate': '2022-10-24T13:35:00.000Z',
- 'isAllDay': 0,
- 'repeat': 'dont_repeat',
- 'type': 'plugins.calendar.event',
- 'status': 'active',
- 'data': { 'description': 'Β‘Desayuno saludable!', 'hideInCalendar': false },
- 'isPrivate': 0,
- 'deleted': 0,
- 'created_at': '2022-11-16T20:23:26.000Z',
- 'updated_at': '2022-11-16T20:23:26.000Z',
- 'deleted_at': null,
- 'calendar': {
- 'id': 'dc289618-db43-4f98-b281-26af3e29b0c6',
- 'key': 'plugins.calendar.class.2baf9952-0ade-4b04-9932-4348cae081fd',
- 'name': 'EducaciΓ³n fΓsica (G001)',
- 'icon': '/api/leebrary/img/98a7d43c-3c5e-437c-abec-cb41d4c6b144@1.0.0',
- 'bgColor': '#7449F4',
- 'borderColor': null,
- 'section': 'plugins.calendar.classes',
- 'metadata': { 'internalId': '006' },
- 'deleted': 0,
- 'created_at': '2022-11-16T20:22:03.000Z',
- 'updated_at': '2022-11-16T20:22:03.000Z',
- 'deleted_at': null,
- 'isClass': true,
- 'isUserCalendar': false,
- 'image': null,
- 'fullName': 'EducaciΓ³n fΓsica (G001)',
- 'showEvents': true
- },
- 'fromCalendar': true,
- 'users': ['dad36dec-dc0b-4432-9478-758b6c5d8fe2'],
- 'owners': ['dad36dec-dc0b-4432-9478-758b6c5d8fe2'],
- 'userAgents': [{
- 'id': 'dad36dec-dc0b-4432-9478-758b6c5d8fe2',
- 'user': {
- 'id': '56e23188-4726-4b28-b958-a15ed9bcac1a',
- 'email': 'teacher+celia@leemons.io',
- 'name': 'Celia',
- 'surnames': 'Teacher',
- 'secondSurname': null,
- 'birthdate': '1975-05-04T00:00:00.000Z',
- 'avatar': '/api/leebrary/img/5e35e99a-6f93-479a-8152-b1fde1278755@1.0.0?t=1668626244225',
- 'gender': 'female',
- 'created_at': '2022-11-16T20:17:23.000Z'
- },
- 'role': '08faa3ce-0d4c-43a8-a1f8-799180893ae9'
- }],
- 'uniqClasses': ['dc289618-db43-4f98-b281-26af3e29b0c6'],
- 'icon': '/api/leebrary/img/98a7d43c-3c5e-437c-abec-cb41d4c6b144@1.0.0',
- 'bgColor': '#7449F4',
- 'borderColor': null,
- 'calendarName': 'EducaciΓ³n fΓsica (G001)'
- }
-}, {
- 'title': 'Examen de Français',
- 'allDay': false,
- 'start': DateTime.fromISO('2022-10-19T10:20:00.000Z').toJSDate(),
- 'end': DateTime.fromISO('2022-10-19T11:15:00.000Z').toJSDate(),
- 'originalEvent': {
- 'id': 'c2235ab2-51bd-4c72-a462-f680f4cf7c43',
- 'title': 'Examen de Français',
- 'startDate': '2022-10-19T10:20:00.000Z',
- 'endDate': '2022-10-19T11:15:00.000Z',
- 'isAllDay': 0,
- 'repeat': 'dont_repeat',
- 'type': 'plugins.calendar.event',
- 'status': 'active',
- 'data': { 'description': 'UnitΓ© 1: La rentrΓ©e!', 'hideInCalendar': false },
- 'isPrivate': 0,
- 'deleted': 0,
- 'created_at': '2022-11-16T20:23:26.000Z',
- 'updated_at': '2022-11-16T20:23:26.000Z',
- 'deleted_at': null,
- 'calendar': {
- 'id': '54abb1a3-41a6-40cd-9a84-d879245c91c9',
- 'key': 'plugins.calendar.class.02e9e8ed-1e85-404c-a4e3-ae5f379c61d7',
- 'name': 'FrancΓ©s (G001)',
- 'icon': '/api/leebrary/img/38443aaa-3371-4e33-b909-cce303702982@1.0.0',
- 'bgColor': '#f56c49',
- 'borderColor': null,
- 'section': 'plugins.calendar.classes',
- 'metadata': { 'internalId': '009' },
- 'deleted': 0,
- 'created_at': '2022-11-16T20:22:11.000Z',
- 'updated_at': '2022-11-16T20:22:11.000Z',
- 'deleted_at': null,
- 'isClass': true,
- 'isUserCalendar': false,
- 'image': null,
- 'fullName': 'FrancΓ©s (G001)',
- 'showEvents': true
- },
- 'fromCalendar': true,
- 'users': ['6c6430bf-b0c8-4657-8da7-5e2f8c1c63c1'],
- 'owners': ['6c6430bf-b0c8-4657-8da7-5e2f8c1c63c1'],
- 'userAgents': [{
- 'id': '6c6430bf-b0c8-4657-8da7-5e2f8c1c63c1',
- 'user': {
- 'id': '8f83604c-63e6-4c66-a773-3558b1ade7dc',
- 'email': 'willy@leemons.io',
- 'name': 'Willy',
- 'surnames': 'RodrΓguez',
- 'secondSurname': null,
- 'birthdate': '1975-10-03T00:00:00.000Z',
- 'avatar': '/api/leebrary/img/f310dbdf-b944-442b-bdca-367feeb421d8@1.0.0?t=1668626242746',
- 'gender': 'male',
- 'created_at': '2022-11-16T20:17:22.000Z'
- },
- 'role': '08faa3ce-0d4c-43a8-a1f8-799180893ae9'
- }],
- 'uniqClasses': ['54abb1a3-41a6-40cd-9a84-d879245c91c9'],
- 'icon': '/api/leebrary/img/38443aaa-3371-4e33-b909-cce303702982@1.0.0',
- 'bgColor': '#f56c49',
- 'borderColor': null,
- 'calendarName': 'FrancΓ©s (G001)'
- }
-}, {
- 'title': 'Prueba de evento muy largo',
- 'allDay': false,
- 'start': DateTime.fromISO('2022-11-15T09:00:00.000Z').toJSDate(),
- 'end': DateTime.fromISO('2022-11-25T19:30:00.000Z').toJSDate(),
- 'originalEvent': {
- 'id': 'd0cb3b29-23ee-41d5-8c59-03dd8fef9e76',
- 'title': 'Prueba de evento muy largo',
- 'startDate': '2022-11-15T09:00:00.000Z',
- 'endDate': '2022-11-25T19:30:00.000Z',
- 'isAllDay': 0,
- 'repeat': 'dont_repeat',
- 'type': 'plugins.calendar.event',
- 'status': 'active',
- 'data': {},
- 'isPrivate': 0,
- 'deleted': 0,
- 'created_at': '2022-11-30T16:50:39.000Z',
- 'updated_at': '2022-11-30T16:51:03.000Z',
- 'deleted_at': null,
- 'calendar': {
- 'id': '54abb1a3-41a6-40cd-9a84-d879245c91c9',
- 'key': 'plugins.calendar.class.02e9e8ed-1e85-404c-a4e3-ae5f379c61d7',
- 'name': 'FrancΓ©s (G001)',
- 'icon': '/api/leebrary/img/38443aaa-3371-4e33-b909-cce303702982@1.0.0',
- 'bgColor': '#f56c49',
- 'borderColor': null,
- 'section': 'plugins.calendar.classes',
- 'metadata': { 'internalId': '009' },
- 'deleted': 0,
- 'created_at': '2022-11-16T20:22:11.000Z',
- 'updated_at': '2022-11-16T20:22:11.000Z',
- 'deleted_at': null,
- 'isClass': true,
- 'isUserCalendar': false,
- 'image': null,
- 'fullName': 'FrancΓ©s (G001)',
- 'showEvents': true
- },
- 'fromCalendar': true,
- 'users': ['6c6430bf-b0c8-4657-8da7-5e2f8c1c63c1'],
- 'owners': ['6c6430bf-b0c8-4657-8da7-5e2f8c1c63c1'],
- 'userAgents': [{
- 'id': '6c6430bf-b0c8-4657-8da7-5e2f8c1c63c1',
- 'user': {
- 'id': '8f83604c-63e6-4c66-a773-3558b1ade7dc',
- 'email': 'willy@leemons.io',
- 'name': 'Willy',
- 'surnames': 'RodrΓguez',
- 'secondSurname': null,
- 'birthdate': '1975-10-03T00:00:00.000Z',
- 'avatar': '/api/leebrary/img/f310dbdf-b944-442b-bdca-367feeb421d8@1.0.0?t=1668626242746',
- 'gender': 'male',
- 'created_at': '2022-11-16T20:17:22.000Z'
- },
- 'role': '08faa3ce-0d4c-43a8-a1f8-799180893ae9'
- }],
- 'uniqClasses': ['54abb1a3-41a6-40cd-9a84-d879245c91c9'],
- 'icon': '/api/leebrary/img/38443aaa-3371-4e33-b909-cce303702982@1.0.0',
- 'bgColor': '#f56c49',
- 'borderColor': null,
- 'calendarName': 'FrancΓ©s (G001)'
- }
-}, {
- 'title': 'Tarea lengua',
- 'allDay': false,
- 'start': DateTime.fromISO('2022-11-24T05:00:00.000Z').toJSDate(),
- 'end': DateTime.fromISO('2022-12-08T17:40:00.000Z').toJSDate(),
- 'originalEvent': {
- 'id': '0aff1f05-f747-431e-bd4b-a67c98bf6503',
- 'title': 'Tarea lengua',
- 'startDate': '2022-11-24T05:00:00.000Z',
- 'endDate': '2022-12-08T17:40:00.000Z',
- 'isAllDay': null,
- 'repeat': null,
- 'type': 'plugins.calendar.task',
- 'status': 'active',
- 'data': {
- 'instanceId': '99ace67c-b988-4f0f-9d18-10abf81c44a5',
- 'classes': ['c558079f-2c05-4635-93ec-7bfdab1fb663'],
- 'hideInCalendar': false,
- 'hideCalendarField': true,
- 'column': '948e72dc-c62f-4d21-829f-cb8f7072905d'
- },
- 'isPrivate': 1,
- 'deleted': 0,
- 'created_at': '2022-11-24T12:50:46.000Z',
- 'updated_at': '2022-11-24T12:50:46.000Z',
- 'deleted_at': null,
- 'calendar': {
- 'id': '34183487-27f8-48b4-b321-c0922e11bce7',
- 'key': 'plugins.users.calendar.agent.409067f0-1373-4c7f-9edb-ba71e1c272b7',
- 'name': 'LisaHermosΓn',
- 'icon': null,
- 'bgColor': '#3C72C2',
- 'borderColor': '#4F96FF',
- 'section': 'plugins.users.calendar.user_section',
- 'metadata': null,
- 'deleted': 0,
- 'created_at': '2022-11-16T20:17:39.000Z',
- 'updated_at': '2022-11-16T20:17:39.000Z',
- 'deleted_at': null,
- 'isClass': false,
- 'isUserCalendar': true,
- 'image': '/api/leebrary/img/10811ebe-78ab-4d50-95c7-167661c70260@1.0.0?t=1668626259066',
- 'fullName': 'Lisa HermosΓn',
- 'showEvents': true
- },
- 'users': ['6c6430bf-b0c8-4657-8da7-5e2f8c1c63c1', '20a8062b-4b4e-49e9-bb7a-1a453d1fdb36', 'd5349dd6-76ac-4835-b3c2-81b8e428beeb', '6eedc0c6-9d4c-4501-930f-3c9cf67a02fb', '364a87f1-2071-4911-a72a-653a2562d7bc'],
- 'owners': [],
- 'userAgents': [{
- 'id': '6c6430bf-b0c8-4657-8da7-5e2f8c1c63c1',
- 'user': {
- 'id': '8f83604c-63e6-4c66-a773-3558b1ade7dc',
- 'email': 'willy@leemons.io',
- 'name': 'Willy',
- 'surnames': 'RodrΓguez',
- 'secondSurname': null,
- 'birthdate': '1975-10-03T00:00:00.000Z',
- 'avatar': '/api/leebrary/img/f310dbdf-b944-442b-bdca-367feeb421d8@1.0.0?t=1668626242746',
- 'gender': 'male',
- 'created_at': '2022-11-16T20:17:22.000Z'
- },
- 'role': '08faa3ce-0d4c-43a8-a1f8-799180893ae9'
- }, {
- 'id': '20a8062b-4b4e-49e9-bb7a-1a453d1fdb36',
- 'user': {
- 'id': '9f2f2150-a41f-4bde-9231-940626108776',
- 'email': 'student+john@leemons.io',
- 'name': 'John',
- 'surnames': 'MarΓn',
- 'secondSurname': null,
- 'birthdate': '2008-05-03T00:00:00.000Z',
- 'avatar': '/api/leebrary/img/4a172c6e-e686-4f93-83c7-7d3077ffc514@1.0.0?t=1668626255268',
- 'gender': 'male',
- 'created_at': '2022-11-16T20:17:33.000Z'
- },
- 'role': '4f6486f1-05ed-482e-b04f-f704066fc563'
- }, {
- 'id': 'd5349dd6-76ac-4835-b3c2-81b8e428beeb',
- 'user': {
- 'id': 'a0041389-f0ea-4ee0-9158-7dda4fbb4b68',
- 'email': 'student+emma@leemons.io',
- 'name': 'Emma',
- 'surnames': 'Carranza',
- 'secondSurname': null,
- 'birthdate': '2008-05-04T00:00:00.000Z',
- 'avatar': '/api/leebrary/img/ccd06fb7-ac91-4dde-acb7-ff0ad043f292@1.0.0?t=1668626256698',
- 'gender': 'female',
- 'created_at': '2022-11-16T20:17:35.000Z'
- },
- 'role': '4f6486f1-05ed-482e-b04f-f704066fc563'
- }, {
- 'id': '6eedc0c6-9d4c-4501-930f-3c9cf67a02fb',
- 'user': {
- 'id': '152cba03-3e70-4dce-8225-0b8f574e4bc9',
- 'email': 'student+peter@leemons.io',
- 'name': 'Peter',
- 'surnames': 'Villalonga',
- 'secondSurname': null,
- 'birthdate': '2007-05-06T00:00:00.000Z',
- 'avatar': '/api/leebrary/img/1d9fa67f-0f7e-48d6-8514-c2e62a2b327e@1.0.0?t=1668626260314',
- 'gender': 'male',
- 'created_at': '2022-11-16T20:17:39.000Z'
- },
- 'role': '4f6486f1-05ed-482e-b04f-f704066fc563'
- }, {
- 'id': '364a87f1-2071-4911-a72a-653a2562d7bc',
- 'user': {
- 'id': '03c3fa3c-5dbb-4c60-9e01-f16c88621a64',
- 'email': 'student+elena@leemons.io',
- 'name': 'Elena',
- 'surnames': 'Murillo',
- 'secondSurname': null,
- 'birthdate': '2008-05-10T00:00:00.000Z',
- 'avatar': '/api/leebrary/img/add7fa42-238c-4099-9179-cdd9fbc13da9@1.0.0?t=1668626261701',
- 'gender': 'female',
- 'created_at': '2022-11-16T20:17:40.000Z'
- },
- 'role': '4f6486f1-05ed-482e-b04f-f704066fc563'
- }],
- 'instanceData': {
- 'instance': '99ace67c-b988-4f0f-9d18-10abf81c44a5',
- 'assignation': '6cfedda6-0e7d-4d00-b0a7-c258e25f927e',
- 'status': 'closed',
- 'dates': { 'start': '2022-11-24T05:00:00.000Z', 'deadline': '2022-12-08T17:40:00.000Z' },
- 'alwaysAvailable': 0,
- 'timestamps': {}
- },
- 'disableDrag': true,
- 'uniqClasses': ['c558079f-2c05-4635-93ec-7bfdab1fb663'],
- 'icon': '/api/leebrary/img/5040d6fc-b8ea-4aed-a905-0f3eca90c1d3@1.0.0',
- 'bgColor': '#DC5571',
- 'borderColor': null,
- 'calendarName': 'Lengua castellana y literatura (G001)'
- }
-}, {
- 'title': 'Mi maleta y mi vida',
- 'allDay': true,
- 'start': DateTime.fromISO('2022-11-24T07:00:00.000Z').toJSDate(),
- 'end': DateTime.fromISO('2022-12-08T22:59:59.000Z').toJSDate(),
- 'originalEvent': {
- 'id': '3e55c7ff-1599-4d19-a1f5-4667777da92f',
- 'title': 'Mi maleta y mi vida',
- 'startDate': '2022-11-24T07:00:00.000Z',
- 'endDate': '2022-12-08T22:59:59.000Z',
- 'isAllDay': 1,
- 'repeat': null,
- 'type': 'plugins.calendar.task',
- 'status': 'active',
- 'data': {
- 'onlyShowInitAndEnd': true,
- 'instanceId': '5868cd57-2772-416d-b377-32610d592e6d',
- 'classes': ['d91a53d7-4d06-4ebb-b5bb-bf9630289fcd', 'c558079f-2c05-4635-93ec-7bfdab1fb663'],
- 'hideInCalendar': false,
- 'hideCalendarField': true,
- 'column': '948e72dc-c62f-4d21-829f-cb8f7072905d'
- },
- 'isPrivate': 1,
- 'deleted': 0,
- 'created_at': '2022-11-24T09:33:06.000Z',
- 'updated_at': '2022-11-24T09:33:06.000Z',
- 'deleted_at': null,
- 'calendar': {
- 'id': '34183487-27f8-48b4-b321-c0922e11bce7',
- 'key': 'plugins.users.calendar.agent.409067f0-1373-4c7f-9edb-ba71e1c272b7',
- 'name': 'LisaHermosΓn',
- 'icon': null,
- 'bgColor': '#3C72C2',
- 'borderColor': '#4F96FF',
- 'section': 'plugins.users.calendar.user_section',
- 'metadata': null,
- 'deleted': 0,
- 'created_at': '2022-11-16T20:17:39.000Z',
- 'updated_at': '2022-11-16T20:17:39.000Z',
- 'deleted_at': null,
- 'isClass': false,
- 'isUserCalendar': true,
- 'image': '/api/leebrary/img/10811ebe-78ab-4d50-95c7-167661c70260@1.0.0?t=1668626259066',
- 'fullName': 'Lisa HermosΓn',
- 'showEvents': true
- },
- 'users': ['d5349dd6-76ac-4835-b3c2-81b8e428beeb', '20a8062b-4b4e-49e9-bb7a-1a453d1fdb36', '364a87f1-2071-4911-a72a-653a2562d7bc', '6c6430bf-b0c8-4657-8da7-5e2f8c1c63c1', '6eedc0c6-9d4c-4501-930f-3c9cf67a02fb'],
- 'owners': [],
- 'userAgents': [{
- 'id': 'd5349dd6-76ac-4835-b3c2-81b8e428beeb',
- 'user': {
- 'id': 'a0041389-f0ea-4ee0-9158-7dda4fbb4b68',
- 'email': 'student+emma@leemons.io',
- 'name': 'Emma',
- 'surnames': 'Carranza',
- 'secondSurname': null,
- 'birthdate': '2008-05-04T00:00:00.000Z',
- 'avatar': '/api/leebrary/img/ccd06fb7-ac91-4dde-acb7-ff0ad043f292@1.0.0?t=1668626256698',
- 'gender': 'female',
- 'created_at': '2022-11-16T20:17:35.000Z'
- },
- 'role': '4f6486f1-05ed-482e-b04f-f704066fc563'
- }, {
- 'id': '20a8062b-4b4e-49e9-bb7a-1a453d1fdb36',
- 'user': {
- 'id': '9f2f2150-a41f-4bde-9231-940626108776',
- 'email': 'student+john@leemons.io',
- 'name': 'John',
- 'surnames': 'MarΓn',
- 'secondSurname': null,
- 'birthdate': '2008-05-03T00:00:00.000Z',
- 'avatar': '/api/leebrary/img/4a172c6e-e686-4f93-83c7-7d3077ffc514@1.0.0?t=1668626255268',
- 'gender': 'male',
- 'created_at': '2022-11-16T20:17:33.000Z'
- },
- 'role': '4f6486f1-05ed-482e-b04f-f704066fc563'
- }, {
- 'id': '364a87f1-2071-4911-a72a-653a2562d7bc',
- 'user': {
- 'id': '03c3fa3c-5dbb-4c60-9e01-f16c88621a64',
- 'email': 'student+elena@leemons.io',
- 'name': 'Elena',
- 'surnames': 'Murillo',
- 'secondSurname': null,
- 'birthdate': '2008-05-10T00:00:00.000Z',
- 'avatar': '/api/leebrary/img/add7fa42-238c-4099-9179-cdd9fbc13da9@1.0.0?t=1668626261701',
- 'gender': 'female',
- 'created_at': '2022-11-16T20:17:40.000Z'
- },
- 'role': '4f6486f1-05ed-482e-b04f-f704066fc563'
- }, {
- 'id': '6c6430bf-b0c8-4657-8da7-5e2f8c1c63c1',
- 'user': {
- 'id': '8f83604c-63e6-4c66-a773-3558b1ade7dc',
- 'email': 'willy@leemons.io',
- 'name': 'Willy',
- 'surnames': 'RodrΓguez',
- 'secondSurname': null,
- 'birthdate': '1975-10-03T00:00:00.000Z',
- 'avatar': '/api/leebrary/img/f310dbdf-b944-442b-bdca-367feeb421d8@1.0.0?t=1668626242746',
- 'gender': 'male',
- 'created_at': '2022-11-16T20:17:22.000Z'
- },
- 'role': '08faa3ce-0d4c-43a8-a1f8-799180893ae9'
- }, {
- 'id': '6eedc0c6-9d4c-4501-930f-3c9cf67a02fb',
- 'user': {
- 'id': '152cba03-3e70-4dce-8225-0b8f574e4bc9',
- 'email': 'student+peter@leemons.io',
- 'name': 'Peter',
- 'surnames': 'Villalonga',
- 'secondSurname': null,
- 'birthdate': '2007-05-06T00:00:00.000Z',
- 'avatar': '/api/leebrary/img/1d9fa67f-0f7e-48d6-8514-c2e62a2b327e@1.0.0?t=1668626260314',
- 'gender': 'male',
- 'created_at': '2022-11-16T20:17:39.000Z'
- },
- 'role': '4f6486f1-05ed-482e-b04f-f704066fc563'
- }],
- 'instanceData': {
- 'instance': '5868cd57-2772-416d-b377-32610d592e6d',
- 'assignation': '575e01ab-2e42-498f-bc80-ba948985f65b',
- 'status': 'closed',
- 'dates': { 'start': '2022-11-24T07:00:00.000Z', 'deadline': '2022-12-08T22:59:59.000Z' },
- 'alwaysAvailable': 0,
- 'timestamps': {}
- },
- 'disableDrag': true,
- 'uniqClasses': ['d91a53d7-4d06-4ebb-b5bb-bf9630289fcd', 'c558079f-2c05-4635-93ec-7bfdab1fb663'],
- 'image': '/api/leebrary/img/10811ebe-78ab-4d50-95c7-167661c70260@1.0.0?t=1668626259066',
- 'calendarName': 'Multi-Asignatura',
- 'icon': '/public/assets/svgs/module-three.svg',
- 'bgColor': '#67728E',
- 'borderColor': '#67728E'
- }
-}, {
- 'title': 'tarea historia',
- 'allDay': false,
- 'start': DateTime.fromISO('2022-11-23T05:00:00.000Z').toJSDate(),
- 'end': DateTime.fromISO('2022-11-23T17:40:00.000Z').toJSDate(),
- 'originalEvent': {
- 'id': 'ab3a96b6-980b-4843-af31-5b8781a26da4',
- 'title': 'tarea historia',
- 'startDate': '2022-11-24T05:00:00.000Z',
- 'endDate': '2022-11-28T17:40:00.000Z',
- 'isAllDay': null,
- 'repeat': null,
- 'type': 'plugins.calendar.task',
- 'status': 'active',
- 'data': {
- 'instanceId': '5646ca3a-77d1-488e-90c6-98cddd1d7895',
- 'classes': ['d91a53d7-4d06-4ebb-b5bb-bf9630289fcd'],
- 'hideInCalendar': false,
- 'hideCalendarField': true,
- 'column': '948e72dc-c62f-4d21-829f-cb8f7072905d'
- },
- 'isPrivate': 1,
- 'deleted': 0,
- 'created_at': '2022-11-24T12:45:25.000Z',
- 'updated_at': '2022-11-24T12:45:25.000Z',
- 'deleted_at': null,
- 'calendar': {
- 'id': '34183487-27f8-48b4-b321-c0922e11bce7',
- 'key': 'plugins.users.calendar.agent.409067f0-1373-4c7f-9edb-ba71e1c272b7',
- 'name': 'LisaHermosΓn',
- 'icon': null,
- 'bgColor': '#3C72C2',
- 'borderColor': '#4F96FF',
- 'section': 'plugins.users.calendar.user_section',
- 'metadata': null,
- 'deleted': 0,
- 'created_at': '2022-11-16T20:17:39.000Z',
- 'updated_at': '2022-11-16T20:17:39.000Z',
- 'deleted_at': null,
- 'isClass': false,
- 'isUserCalendar': true,
- 'image': '/api/leebrary/img/10811ebe-78ab-4d50-95c7-167661c70260@1.0.0?t=1668626259066',
- 'fullName': 'Lisa HermosΓn',
- 'showEvents': true
- },
- 'users': ['d5349dd6-76ac-4835-b3c2-81b8e428beeb', '20a8062b-4b4e-49e9-bb7a-1a453d1fdb36', '364a87f1-2071-4911-a72a-653a2562d7bc', '6c6430bf-b0c8-4657-8da7-5e2f8c1c63c1', '6eedc0c6-9d4c-4501-930f-3c9cf67a02fb'],
- 'owners': [],
- 'userAgents': [{
- 'id': 'd5349dd6-76ac-4835-b3c2-81b8e428beeb',
- 'user': {
- 'id': 'a0041389-f0ea-4ee0-9158-7dda4fbb4b68',
- 'email': 'student+emma@leemons.io',
- 'name': 'Emma',
- 'surnames': 'Carranza',
- 'secondSurname': null,
- 'birthdate': '2008-05-04T00:00:00.000Z',
- 'avatar': '/api/leebrary/img/ccd06fb7-ac91-4dde-acb7-ff0ad043f292@1.0.0?t=1668626256698',
- 'gender': 'female',
- 'created_at': '2022-11-16T20:17:35.000Z'
- },
- 'role': '4f6486f1-05ed-482e-b04f-f704066fc563'
- }, {
- 'id': '20a8062b-4b4e-49e9-bb7a-1a453d1fdb36',
- 'user': {
- 'id': '9f2f2150-a41f-4bde-9231-940626108776',
- 'email': 'student+john@leemons.io',
- 'name': 'John',
- 'surnames': 'MarΓn',
- 'secondSurname': null,
- 'birthdate': '2008-05-03T00:00:00.000Z',
- 'avatar': '/api/leebrary/img/4a172c6e-e686-4f93-83c7-7d3077ffc514@1.0.0?t=1668626255268',
- 'gender': 'male',
- 'created_at': '2022-11-16T20:17:33.000Z'
- },
- 'role': '4f6486f1-05ed-482e-b04f-f704066fc563'
- }, {
- 'id': '364a87f1-2071-4911-a72a-653a2562d7bc',
- 'user': {
- 'id': '03c3fa3c-5dbb-4c60-9e01-f16c88621a64',
- 'email': 'student+elena@leemons.io',
- 'name': 'Elena',
- 'surnames': 'Murillo',
- 'secondSurname': null,
- 'birthdate': '2008-05-10T00:00:00.000Z',
- 'avatar': '/api/leebrary/img/add7fa42-238c-4099-9179-cdd9fbc13da9@1.0.0?t=1668626261701',
- 'gender': 'female',
- 'created_at': '2022-11-16T20:17:40.000Z'
- },
- 'role': '4f6486f1-05ed-482e-b04f-f704066fc563'
- }, {
- 'id': '6c6430bf-b0c8-4657-8da7-5e2f8c1c63c1',
- 'user': {
- 'id': '8f83604c-63e6-4c66-a773-3558b1ade7dc',
- 'email': 'willy@leemons.io',
- 'name': 'Willy',
- 'surnames': 'RodrΓguez',
- 'secondSurname': null,
- 'birthdate': '1975-10-03T00:00:00.000Z',
- 'avatar': '/api/leebrary/img/f310dbdf-b944-442b-bdca-367feeb421d8@1.0.0?t=1668626242746',
- 'gender': 'male',
- 'created_at': '2022-11-16T20:17:22.000Z'
- },
- 'role': '08faa3ce-0d4c-43a8-a1f8-799180893ae9'
- }, {
- 'id': '6eedc0c6-9d4c-4501-930f-3c9cf67a02fb',
- 'user': {
- 'id': '152cba03-3e70-4dce-8225-0b8f574e4bc9',
- 'email': 'student+peter@leemons.io',
- 'name': 'Peter',
- 'surnames': 'Villalonga',
- 'secondSurname': null,
- 'birthdate': '2007-05-06T00:00:00.000Z',
- 'avatar': '/api/leebrary/img/1d9fa67f-0f7e-48d6-8514-c2e62a2b327e@1.0.0?t=1668626260314',
- 'gender': 'male',
- 'created_at': '2022-11-16T20:17:39.000Z'
- },
- 'role': '4f6486f1-05ed-482e-b04f-f704066fc563'
- }],
- 'instanceData': {
- 'instance': '5646ca3a-77d1-488e-90c6-98cddd1d7895',
- 'assignation': 'e18d2309-be0c-413c-822c-ddedc8d29fd3',
- 'status': 'closed',
- 'dates': { 'start': '2022-11-24T05:00:00.000Z', 'deadline': '2022-11-28T17:40:00.000Z' },
- 'alwaysAvailable': 0,
- 'timestamps': {}
- },
- 'disableDrag': true,
- 'uniqClasses': ['d91a53d7-4d06-4ebb-b5bb-bf9630289fcd'],
- 'icon': '/api/leebrary/img/e2dd2ca5-fa5d-4b65-ae66-ce01a5f608d9@1.0.0',
- 'bgColor': '#1BB184',
- 'borderColor': null,
- 'calendarName': 'GeografΓa e Historia (G001)'
- }
-}];
-
-/*
-export default [
- {
- allDay: true,
- title: 'Event 1',
- start: DateTime.fromISO('2022-12-08').toJSDate(),
- end: DateTime.fromISO('2022-12-08').toJSDate(),
- originalEvent: {
- calendar: {
- bgColor: ['#E4DDF7', '#DBD4ED'],
- borderStyle: 'solid',
- borderColor: '#E4DDF7',
- leftArrow: false,
- rightArrow: false,
- rotate: 90,
- oneDayStyle: true,
- zIndex: -3
- }
- }
- },
- {
- allDay: true,
- title: 'Event 2 qweqr wer we we ter er eherge r erg',
- start: DateTime.fromISO('2022-12-05').toJSDate(),
- end: DateTime.fromISO('2022-12-08').toJSDate(),
- originalEvent: {
- calendar: {
- bgColor: ['#DEEDE4', '#D5E4DB'],
- borderStyle: 'solid',
- borderColor: '#DEEDE4',
- leftArrow: false,
- rightArrow: false,
- oneDayStyle: true,
- zIndex: -6
- }
- }
- }
-];
-
-
- */
- |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| File | -- | Statements | -- | Branches | -- | Functions | -- | Lines | -- |
|---|---|---|---|---|---|---|---|---|---|
| events-month-view.js | -
-
- |
- 0% | -0/0 | -0% | -0/0 | -0% | -0/0 | -0% | -0/0 | -
| events.js | -
-
- |
- 0% | -0/0 | -0% | -0/0 | -0% | -0/0 | -0% | -0/0 | -
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| File | -- | Statements | -- | Branches | -- | Functions | -- | Lines | -- |
|---|---|---|---|---|---|---|---|---|---|
| index.js | -
-
- |
- 0% | -0/0 | -0% | -0/0 | -0% | -0/0 | -0% | -0/0 | -
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| 1 -2 | - | export * from './BigCalendar'; - |