react-big-calendar
Version:
Calendar! with events
1,135 lines (1,133 loc) • 40.4 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _clsx = _interopRequireDefault(require("clsx"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _react = _interopRequireDefault(require("react"));
var _uncontrollable = require("uncontrollable");
var _propTypes2 = require("./utils/propTypes");
var _localizer = require("./localizer");
var _NoopWrapper = _interopRequireDefault(require("./NoopWrapper"));
var _Toolbar = _interopRequireDefault(require("./Toolbar"));
var _constants = require("./utils/constants");
var _helpers = require("./utils/helpers");
var _messages = _interopRequireDefault(require("./utils/messages"));
var _move = _interopRequireDefault(require("./utils/move"));
var _Views = _interopRequireDefault(require("./Views"));
var _defaults = _interopRequireDefault(require("lodash/defaults"));
var _mapValues = _interopRequireDefault(require("lodash/mapValues"));
var _omit = _interopRequireDefault(require("lodash/omit"));
var _transform = _interopRequireDefault(require("lodash/transform"));
var _accessors = require("./utils/accessors");
var _excluded = ["view", "date", "getNow", "onNavigate"],
_excluded2 = ["view", "toolbar", "events", "backgroundEvents", "resourceGroupingLayout", "style", "className", "elementProps", "date", "getNow", "length", "showMultiDayTimes", "onShowMore", "doShowMoreDrillDown", "components", "formats", "messages", "culture"];
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(t).constructor) : o.apply(t, e)); }
function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
function viewNames(_views) {
if (Array.isArray(_views)) {
return _views;
}
var views = [];
for (var _i = 0, _Object$entries = Object.entries(_views); _i < _Object$entries.length; _i++) {
var _Object$entries$_i = (0, _slicedToArray2.default)(_Object$entries[_i], 2),
key = _Object$entries$_i[0],
value = _Object$entries$_i[1];
if (value) {
views.push(key);
}
}
return views;
}
function isValidView(view, _ref) {
var _views = _ref.views;
var names = viewNames(_views);
return names.indexOf(view) !== -1;
}
var Calendar = /*#__PURE__*/function (_React$Component) {
function Calendar() {
var _this;
(0, _classCallCheck2.default)(this, Calendar);
for (var _len = arguments.length, _args = new Array(_len), _key = 0; _key < _len; _key++) {
_args[_key] = arguments[_key];
}
_this = _callSuper(this, Calendar, [].concat(_args));
_this.getViews = function () {
var views = _this.props.views;
if (Array.isArray(views)) {
return (0, _transform.default)(views, function (obj, name) {
return obj[name] = _Views.default[name];
}, {});
}
if ((0, _typeof2.default)(views) === 'object') {
return (0, _mapValues.default)(views, function (value, key) {
if (value === true) {
return _Views.default[key];
}
return value;
});
}
return _Views.default;
};
_this.getView = function () {
var views = _this.getViews();
return views[_this.props.view];
};
_this.getDrilldownView = function (date) {
var _this$props = _this.props,
view = _this$props.view,
drilldownView = _this$props.drilldownView,
getDrilldownView = _this$props.getDrilldownView;
if (!getDrilldownView) return drilldownView;
return getDrilldownView(date, view, Object.keys(_this.getViews()));
};
/**
*
* @param date
* @param viewComponent
* @param {'month'|'week'|'work_week'|'day'|'agenda'} [view] - optional
* parameter. It appears when range change on view changing. It could be handy
* when you need to have both: range and view type at once, i.e. for manage rbc
* state via url
*/
_this.handleRangeChange = function (date, viewComponent, view) {
var _this$props2 = _this.props,
onRangeChange = _this$props2.onRangeChange,
localizer = _this$props2.localizer;
if (onRangeChange) {
if (viewComponent.range) {
onRangeChange(viewComponent.range(date, {
localizer: localizer
}), view);
} else {
if (process.env.NODE_ENV !== 'production') {
console.error('onRangeChange prop not supported for this view');
}
}
}
};
_this.handleNavigate = function (action, newDate) {
var _this$props3 = _this.props,
view = _this$props3.view,
date = _this$props3.date,
getNow = _this$props3.getNow,
onNavigate = _this$props3.onNavigate,
props = (0, _objectWithoutProperties2.default)(_this$props3, _excluded);
var ViewComponent = _this.getView();
var today = getNow();
date = (0, _move.default)(ViewComponent, _objectSpread(_objectSpread({}, props), {}, {
action: action,
date: newDate || date || today,
today: today
}));
onNavigate(date, view, action);
_this.handleRangeChange(date, ViewComponent);
};
_this.handleViewChange = function (view) {
if (view !== _this.props.view && isValidView(view, _this.props)) {
_this.props.onView(view);
}
var views = _this.getViews();
_this.handleRangeChange(_this.props.date || _this.props.getNow(), views[view], view);
};
_this.handleSelectEvent = function () {
for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
args[_key2] = arguments[_key2];
}
(0, _helpers.notify)(_this.props.onSelectEvent, args);
};
_this.handleDoubleClickEvent = function () {
for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
args[_key3] = arguments[_key3];
}
(0, _helpers.notify)(_this.props.onDoubleClickEvent, args);
};
_this.handleKeyPressEvent = function () {
for (var _len4 = arguments.length, args = new Array(_len4), _key4 = 0; _key4 < _len4; _key4++) {
args[_key4] = arguments[_key4];
}
(0, _helpers.notify)(_this.props.onKeyPressEvent, args);
};
_this.handleSelectSlot = function (slotInfo) {
(0, _helpers.notify)(_this.props.onSelectSlot, slotInfo);
};
_this.handleDrillDown = function (date, view) {
var onDrillDown = _this.props.onDrillDown;
if (onDrillDown) {
onDrillDown(date, view, _this.drilldownView);
return;
}
if (view) _this.handleViewChange(view);
_this.handleNavigate(_constants.navigate.DATE, date);
};
_this.state = {
context: Calendar.getContext(_this.props)
};
return _this;
}
(0, _inherits2.default)(Calendar, _React$Component);
return (0, _createClass2.default)(Calendar, [{
key: "render",
value: function render() {
var _this$props4 = this.props,
view = _this$props4.view,
toolbar = _this$props4.toolbar,
events = _this$props4.events,
backgroundEvents = _this$props4.backgroundEvents,
resourceGroupingLayout = _this$props4.resourceGroupingLayout,
style = _this$props4.style,
className = _this$props4.className,
elementProps = _this$props4.elementProps,
current = _this$props4.date,
getNow = _this$props4.getNow,
length = _this$props4.length,
showMultiDayTimes = _this$props4.showMultiDayTimes,
onShowMore = _this$props4.onShowMore,
doShowMoreDrillDown = _this$props4.doShowMoreDrillDown,
_0 = _this$props4.components,
_1 = _this$props4.formats,
_2 = _this$props4.messages,
_3 = _this$props4.culture,
props = (0, _objectWithoutProperties2.default)(_this$props4, _excluded2);
current = current || getNow();
var View = this.getView();
var _this$state$context = this.state.context,
accessors = _this$state$context.accessors,
components = _this$state$context.components,
getters = _this$state$context.getters,
localizer = _this$state$context.localizer,
viewNames = _this$state$context.viewNames;
var CalToolbar = components.toolbar || _Toolbar.default;
var label = View.title(current, {
localizer: localizer,
length: length
});
return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, elementProps, {
className: (0, _clsx.default)(className, 'rbc-calendar', props.rtl && 'rbc-rtl'),
style: style
}), toolbar && /*#__PURE__*/_react.default.createElement(CalToolbar, {
date: current,
view: view,
views: viewNames,
label: label,
onView: this.handleViewChange,
onNavigate: this.handleNavigate,
localizer: localizer
}), /*#__PURE__*/_react.default.createElement(View, (0, _extends2.default)({}, props, {
events: events,
backgroundEvents: backgroundEvents,
date: current,
getNow: getNow,
length: length,
localizer: localizer,
getters: getters,
components: components,
accessors: accessors,
showMultiDayTimes: showMultiDayTimes,
getDrilldownView: this.getDrilldownView,
onNavigate: this.handleNavigate,
onDrillDown: this.handleDrillDown,
onSelectEvent: this.handleSelectEvent,
onDoubleClickEvent: this.handleDoubleClickEvent,
onKeyPressEvent: this.handleKeyPressEvent,
onSelectSlot: this.handleSelectSlot,
onShowMore: onShowMore,
doShowMoreDrillDown: doShowMoreDrillDown,
resourceGroupingLayout: resourceGroupingLayout
})));
}
}], [{
key: "getDerivedStateFromProps",
value: function getDerivedStateFromProps(nextProps) {
return {
context: Calendar.getContext(nextProps)
};
}
}, {
key: "getContext",
value: function getContext(_ref2) {
var startAccessor = _ref2.startAccessor,
endAccessor = _ref2.endAccessor,
allDayAccessor = _ref2.allDayAccessor,
tooltipAccessor = _ref2.tooltipAccessor,
titleAccessor = _ref2.titleAccessor,
resourceAccessor = _ref2.resourceAccessor,
resourceIdAccessor = _ref2.resourceIdAccessor,
resourceTitleAccessor = _ref2.resourceTitleAccessor,
eventIdAccessor = _ref2.eventIdAccessor,
eventPropGetter = _ref2.eventPropGetter,
backgroundEventPropGetter = _ref2.backgroundEventPropGetter,
slotPropGetter = _ref2.slotPropGetter,
slotGroupPropGetter = _ref2.slotGroupPropGetter,
dayPropGetter = _ref2.dayPropGetter,
view = _ref2.view,
views = _ref2.views,
localizer = _ref2.localizer,
culture = _ref2.culture,
_ref2$messages = _ref2.messages,
messages = _ref2$messages === void 0 ? {} : _ref2$messages,
_ref2$components = _ref2.components,
components = _ref2$components === void 0 ? {} : _ref2$components,
_ref2$formats = _ref2.formats,
formats = _ref2$formats === void 0 ? {} : _ref2$formats;
var names = viewNames(views);
var msgs = (0, _messages.default)(messages);
return {
viewNames: names,
localizer: (0, _localizer.mergeWithDefaults)(localizer, culture, formats, msgs),
getters: {
eventProp: function eventProp() {
return eventPropGetter && eventPropGetter.apply(void 0, arguments) || {};
},
backgroundEventProp: function backgroundEventProp() {
return backgroundEventPropGetter && backgroundEventPropGetter.apply(void 0, arguments) || {};
},
slotProp: function slotProp() {
return slotPropGetter && slotPropGetter.apply(void 0, arguments) || {};
},
slotGroupProp: function slotGroupProp() {
return slotGroupPropGetter && slotGroupPropGetter.apply(void 0, arguments) || {};
},
dayProp: function dayProp() {
return dayPropGetter && dayPropGetter.apply(void 0, arguments) || {};
}
},
components: (0, _defaults.default)(components[view] || {}, (0, _omit.default)(components, names), {
eventWrapper: _NoopWrapper.default,
backgroundEventWrapper: _NoopWrapper.default,
eventContainerWrapper: _NoopWrapper.default,
dateCellWrapper: _NoopWrapper.default,
weekWrapper: _NoopWrapper.default,
timeSlotWrapper: _NoopWrapper.default,
timeGutterWrapper: _NoopWrapper.default,
timeIndicatorWrapper: _NoopWrapper.default
}),
accessors: {
start: (0, _accessors.wrapAccessor)(startAccessor),
end: (0, _accessors.wrapAccessor)(endAccessor),
allDay: (0, _accessors.wrapAccessor)(allDayAccessor),
tooltip: (0, _accessors.wrapAccessor)(tooltipAccessor),
title: (0, _accessors.wrapAccessor)(titleAccessor),
resource: (0, _accessors.wrapAccessor)(resourceAccessor),
resourceId: (0, _accessors.wrapAccessor)(resourceIdAccessor),
resourceTitle: (0, _accessors.wrapAccessor)(resourceTitleAccessor),
eventId: (0, _accessors.wrapAccessor)(eventIdAccessor)
}
};
}
}]);
}(_react.default.Component);
Calendar.defaultProps = {
events: [],
backgroundEvents: [],
elementProps: {},
popup: false,
toolbar: true,
view: _constants.views.MONTH,
views: [_constants.views.MONTH, _constants.views.WEEK, _constants.views.DAY, _constants.views.AGENDA],
step: 30,
length: 30,
allDayMaxRows: Infinity,
doShowMoreDrillDown: true,
drilldownView: _constants.views.DAY,
titleAccessor: 'title',
tooltipAccessor: 'title',
allDayAccessor: 'allDay',
startAccessor: 'start',
endAccessor: 'end',
resourceAccessor: 'resourceId',
resourceIdAccessor: 'id',
resourceTitleAccessor: 'title',
eventIdAccessor: 'id',
longPressThreshold: 250,
getNow: function getNow() {
return new Date();
},
dayLayoutAlgorithm: 'overlap'
};
Calendar.propTypes = process.env.NODE_ENV !== "production" ? {
/**
* The localizer used for formatting dates and times according to the `format` and `culture`
*
* globalize
* ```js
* import {globalizeLocalizer} from 'react-big-calendar'
* import globalize from 'globalize'
*
* const localizer = globalizeLocalizer(globalize)
* ```
* moment
* ``js
* import {momentLocalizer} from 'react-big-calendar'
* import moment from 'moment'
* // and, for optional time zone support
* import 'moment-timezone'
*
* moment.tz.setDefault('America/Los_Angeles')
* // end optional time zone support
*
* const localizer = momentLocalizer(moment)
* ```
*
* Luxon
* ```js
* import {luxonLocalizer} from 'react-big-calendar'
* import {DateTime, Settings} from 'luxon'
* // only use `Settings` if you require optional time zone support
* Settings.defaultZone = 'America/Los_Angeles'
* // end optional time zone support
*
* // Luxon uses the Intl API, which currently does not contain `weekInfo`
* // to determine which weekday is the start of the week by `culture`.
* // The `luxonLocalizer` defaults this to Sunday, which differs from
* // the Luxon default of Monday. The localizer requires this option
* // to change the display, and the date math for determining the
* // start of a week. Luxon uses non-zero based values for `weekday`.
* const localizer = luxonLocalizer(DateTime, {firstDayOfWeek: 7})
* ```
*/
localizer: _propTypes.default.object.isRequired,
/**
* Props passed to main calendar `<div>`.
*
*/
elementProps: _propTypes.default.object,
/**
* The current date value of the calendar. Determines the visible view range.
* If `date` is omitted then the result of `getNow` is used; otherwise the
* current date is used.
*
* @controllable onNavigate
*/
date: _propTypes.default.instanceOf(Date),
/**
* The current view of the calendar.
*
* @default 'month'
* @controllable onView
*/
view: _propTypes.default.string,
/**
* The initial view set for the Calendar.
* @type Calendar.Views ('month'|'week'|'work_week'|'day'|'agenda')
* @default 'month'
*/
defaultView: _propTypes.default.string,
/**
* An array of event objects to display on the calendar. Events objects
* can be any shape, as long as the Calendar knows how to retrieve the
* following details of the event:
*
* - start time
* - end time
* - title
* - whether its an "all day" event or not
* - any resource the event may be related to
*
* Each of these properties can be customized or generated dynamically by
* setting the various "accessor" props. Without any configuration the default
* event should look like:
*
* ```js
* Event {
* title: string,
* start: Date,
* end: Date,
* allDay?: boolean
* resource?: any,
* }
* ```
*/
events: _propTypes.default.arrayOf(_propTypes.default.object),
/**
* An array of background event objects to display on the calendar. Background
* Events behave similarly to Events but are not factored into Event overlap logic,
* allowing them to sit behind any Events that may occur during the same period.
* Background Events objects can be any shape, as long as the Calendar knows how to
* retrieve the following details of the event:
*
* - start time
* - end time
*
* Each of these properties can be customized or generated dynamically by
* setting the various "accessor" props. Without any configuration the default
* event should look like:
*
* ```js
* BackgroundEvent {
* start: Date,
* end: Date,
* }
* ```
*/
backgroundEvents: _propTypes.default.arrayOf(_propTypes.default.object),
/**
* Accessor for the event title, used to display event information. Should
* resolve to a `renderable` value.
*
* ```js
* string | (event: Object) => string
* ```
*
* @type {(func|string)}
*/
titleAccessor: _propTypes2.accessor,
/**
* Accessor for the event tooltip. Should
* resolve to a `renderable` value. Removes the tooltip if null.
*
* ```js
* string | (event: Object) => string
* ```
*
* @type {(func|string)}
*/
tooltipAccessor: _propTypes2.accessor,
/**
* Determines whether the event should be considered an "all day" event and ignore time.
* Must resolve to a `boolean` value.
*
* ```js
* string | (event: Object) => boolean
* ```
*
* @type {(func|string)}
*/
allDayAccessor: _propTypes2.accessor,
/**
* The start date/time of the event. Must resolve to a JavaScript `Date` object.
*
* ```js
* string | (event: Object) => Date
* ```
*
* @type {(func|string)}
*/
startAccessor: _propTypes2.accessor,
/**
* The end date/time of the event. Must resolve to a JavaScript `Date` object.
*
* ```js
* string | (event: Object) => Date
* ```
*
* @type {(func|string)}
*/
endAccessor: _propTypes2.accessor,
/**
* The id of the event. Must resolve to a string or number. Used as the key for the event in the DOM. If not provided, the event will be given a key of 'evt\_{index}'.
*
* ```js
* string | number | (event: Object) => string | number
* ```
*
* @type {(func|string)}
*/
eventIdAccessor: _propTypes2.accessor,
/**
* Returns the id of the `resource` that the event is a member of. This
* id should match at least one resource in the `resources` array.
*
* ```js
* string | (event: Object) => Date
* ```
*
* @type {(func|string)}
*/
resourceAccessor: _propTypes2.accessor,
/**
* An array of resource objects that map events to a specific resource.
* Resource objects, like events, can be any shape or have any properties,
* but should be uniquly identifiable via the `resourceIdAccessor`, as
* well as a "title" or name as provided by the `resourceTitleAccessor` prop.
*/
resources: _propTypes.default.arrayOf(_propTypes.default.object),
/**
* Provides a unique identifier, or an array of unique identifiers, for each resource in the `resources` array
*
* ```js
* string | (resource: Object) => any
* ```
*
* @type {(func|string)}
*/
resourceIdAccessor: _propTypes2.accessor,
/**
* Provides a human readable name for the resource object, used in headers.
*
* ```js
* string | (resource: Object) => any
* ```
*
* @type {(func|string)}
*/
resourceTitleAccessor: _propTypes2.accessor,
/**
* Determines the current date/time which is highlighted in the views.
*
* The value affects which day is shaded and which time is shown as
* the current time. It also affects the date used by the Today button in
* the toolbar.
*
* Providing a value here can be useful when you are implementing time zones
* using the `startAccessor` and `endAccessor` properties.
*
* @type {func}
* @default () => new Date()
*/
getNow: _propTypes.default.func,
/**
* Callback fired when the `date` value changes.
*
* @controllable date
*/
onNavigate: _propTypes.default.func,
/**
* Callback fired when the `view` value changes.
*
* @controllable view
*/
onView: _propTypes.default.func,
/**
* Callback fired when date header, or the truncated events links are clicked
*
*/
onDrillDown: _propTypes.default.func,
/**
*
* ```js
* (dates: Date[] | { start: Date; end: Date }, view: 'month'|'week'|'work_week'|'day'|'agenda'|undefined) => void
* ```
*
* Callback fired when the visible date range changes. Returns an Array of dates
* or an object with start and end dates for BUILTIN views. Optionally new `view`
* will be returned when callback called after view change.
*
* Custom views may return something different.
*/
onRangeChange: _propTypes.default.func,
/**
* A callback fired when a date selection is made. Only fires when `selectable` is `true`.
*
* ```js
* (
* slotInfo: {
* start: Date,
* end: Date,
* resourceId: (number|string),
* slots: Array<Date>,
* action: "select" | "click" | "doubleClick",
* bounds: ?{ // For "select" action
* x: number,
* y: number,
* top: number,
* right: number,
* left: number,
* bottom: number,
* },
* box: ?{ // For "click" or "doubleClick" actions
* clientX: number,
* clientY: number,
* x: number,
* y: number,
* },
* }
* ) => any
* ```
*/
onSelectSlot: _propTypes.default.func,
/**
* Callback fired when a calendar event is selected.
*
* ```js
* (event: Object, e: SyntheticEvent) => any
* ```
*
* @controllable selected
*/
onSelectEvent: _propTypes.default.func,
/**
* Callback fired when a calendar event is clicked twice.
*
* ```js
* (event: Object, e: SyntheticEvent) => void
* ```
*/
onDoubleClickEvent: _propTypes.default.func,
/**
* Callback fired when a focused calendar event receives a key press.
*
* ```js
* (event: Object, e: SyntheticEvent) => void
* ```
*/
onKeyPressEvent: _propTypes.default.func,
/**
* Callback fired when dragging a selection in the Time views.
*
* Returning `false` from the handler will prevent a selection.
*
* ```js
* (range: { start: Date, end: Date, resourceId: (number|string) }) => ?boolean
* ```
*/
onSelecting: _propTypes.default.func,
/**
* Callback fired when a +{count} more is clicked
*
* ```js
* (events: Object, date: Date) => any
* ```
*/
onShowMore: _propTypes.default.func,
/**
* Displays all events on the month view instead of
* having some hidden behind +{count} more. This will
* cause the rows in the month view to be scrollable if
* the number of events exceed the height of the row.
*/
showAllEvents: _propTypes.default.bool,
/**
* The selected event, if any.
*/
selected: _propTypes.default.object,
/**
* An array of built-in view names to allow the calendar to display.
* accepts either an array of builtin view names,
*
* ```jsx
* views={['month', 'day', 'agenda']}
* ```
* or an object hash of the view name and the component (or boolean for builtin).
*
* ```jsx
* views={{
* month: true,
* week: false,
* myweek: WorkWeekViewComponent,
* }}
* ```
*
* Custom views can be any React component, that implements the following
* interface:
*
* ```js
* interface View {
* static title(date: Date, { formats: DateFormat[], culture: string?, ...props }): string
* static navigate(date: Date, action: 'PREV' | 'NEXT' | 'DATE'): Date
* }
* ```
*
* @type Views ('month'|'week'|'work_week'|'day'|'agenda')
* @View
['month', 'week', 'day', 'agenda']
*/
views: _propTypes2.views,
/**
* Determines whether the drill down should occur when clicking on the "+_x_ more" link.
* If `popup` is false, and `doShowMoreDrillDown` is true, the drill down will occur as usual.
* If `popup` is false, and `doShowMoreDrillDown` is false, the drill down will not occur and the `onShowMore` function will trigger.
*/
doShowMoreDrillDown: _propTypes.default.bool,
/**
* The string name of the destination view for drill-down actions, such
* as clicking a date header, or the truncated events links. If
* `getDrilldownView` is also specified it will be used instead.
*
* Set to `null` to disable drill-down actions.
*
* ```js
* <Calendar
* drilldownView="agenda"
* />
* ```
*/
drilldownView: _propTypes.default.string,
/**
* Functionally equivalent to `drilldownView`, but accepts a function
* that can return a view name. It's useful for customizing the drill-down
* actions depending on the target date and triggering view.
*
* Return `null` to disable drill-down actions.
*
* ```js
* <Calendar
* getDrilldownView={(targetDate, currentViewName, configuredViewNames) =>
* if (currentViewName === 'month' && configuredViewNames.includes('week'))
* return 'week'
*
* return null;
* }}
* />
* ```
*/
getDrilldownView: _propTypes.default.func,
/**
* Determines the end date from date prop in the agenda view
* date prop + length (in number of days) = end date
*/
length: _propTypes.default.number,
/**
* Determines whether the toolbar is displayed
*/
toolbar: _propTypes.default.bool,
/**
* Show truncated events in an overlay when you click the "+_x_ more" link.
*/
popup: _propTypes.default.bool,
/**
* Distance in pixels, from the edges of the viewport, the "show more" overlay should be positioned.
*
* ```jsx
* <Calendar popupOffset={30}/>
* <Calendar popupOffset={{x: 30, y: 20}}/>
* ```
*/
popupOffset: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.shape({
x: _propTypes.default.number,
y: _propTypes.default.number
})]),
/**
* Allows mouse selection of ranges of dates/times.
*
* The 'ignoreEvents' option prevents selection code from running when a
* drag begins over an event. Useful when you want custom event click or drag
* logic
*/
selectable: _propTypes.default.oneOf([true, false, 'ignoreEvents']),
/**
* Specifies the number of milliseconds the user must press and hold on the screen for a touch
* to be considered a "long press." Long presses are used for time slot selection on touch
* devices.
*
* @type {number}
* @default 250
*/
longPressThreshold: _propTypes.default.number,
/**
* Determines the selectable time increments in week and day views, in minutes.
*/
step: _propTypes.default.number,
/**
* The number of slots per "section" in the time grid views. Adjust with `step`
* to change the default of 1 hour long groups, with 30 minute slots.
*/
timeslots: _propTypes.default.number,
/**
*Switch the calendar to a `right-to-left` read direction.
*/
rtl: _propTypes.default.bool,
/**
* Optionally provide a function that returns an object of className or style props
* to be applied to the the event node.
*
* ```js
* (
* event: Object,
* start: Date,
* end: Date,
* isSelected: boolean
* ) => { className?: string, style?: Object }
* ```
*/
eventPropGetter: _propTypes.default.func,
/**
* Optionally provide a function that returns an object of className or style props
* to be applied to the time-slot node. Caution! Styles that change layout or
* position may break the calendar in unexpected ways.
*
* ```js
* (date: Date, resourceId: (number|string)) => { className?: string, style?: Object }
* ```
*/
slotPropGetter: _propTypes.default.func,
/**
* Optionally provide a function that returns an object of props to be applied
* to the time-slot group node. Useful to dynamically change the sizing of time nodes.
* ```js
* (group: Date[]) => { style?: Object }
* ```
*/
slotGroupPropGetter: _propTypes.default.func,
/**
* Optionally provide a function that returns an object of className or style props
* to be applied to the the day background. Caution! Styles that change layout or
* position may break the calendar in unexpected ways.
*
* ```js
* (date: Date) => { className?: string, style?: Object }
* ```
*/
dayPropGetter: _propTypes.default.func,
/**
* Support to show multi-day events with specific start and end times in the
* main time grid (rather than in the all day header).
*
* **Note: This may cause calendars with several events to look very busy in
* the week and day views.**
*/
showMultiDayTimes: _propTypes.default.bool,
/**
* Determines a maximum amount of rows of events to display in the all day
* section for Week and Day views, will display `showMore` button if
* events excede this number.
*
* Defaults to `Infinity`
*/
allDayMaxRows: _propTypes.default.number,
/**
* Constrains the minimum _time_ of the Day and Week views.
*/
min: _propTypes.default.instanceOf(Date),
/**
* Constrains the maximum _time_ of the Day and Week views.
*/
max: _propTypes.default.instanceOf(Date),
/**
* Determines how far down the scroll pane is initially scrolled down.
*/
scrollToTime: _propTypes.default.instanceOf(Date),
/**
* Determines whether the scroll pane is automatically scrolled down or not.
*/
enableAutoScroll: _propTypes.default.bool,
/**
* Determines the layout of resource groups in the calendar.
* When `true`, resources will be grouped by date in the week view.
* When `false`, resources will be grouped by week.
*/
resourceGroupingLayout: _propTypes.default.bool,
/**
* Specify a specific culture code for the Calendar.
*
* **Note: it's generally better to handle this globally via your i18n library.**
*/
culture: _propTypes.default.string,
/**
* Localizer specific formats, tell the Calendar how to format and display dates.
*
* `format` types are dependent on the configured localizer; Moment, Luxon and Globalize
* accept strings of tokens according to their own specification, such as: `'DD mm yyyy'`.
*
* ```jsx
* let formats = {
* dateFormat: 'dd',
*
* dayFormat: (date, , localizer) =>
* localizer.format(date, 'DDD', culture),
*
* dayRangeHeaderFormat: ({ start, end }, culture, localizer) =>
* localizer.format(start, { date: 'short' }, culture) + ' – ' +
* localizer.format(end, { date: 'short' }, culture)
* }
*
* <Calendar formats={formats} />
* ```
*
* All localizers accept a function of
* the form `(date: Date, culture: ?string, localizer: Localizer) -> string`
*/
formats: _propTypes.default.shape({
/**
* Format for the day of the month heading in the Month view.
* e.g. "01", "02", "03", etc
*/
dateFormat: _propTypes2.dateFormat,
/**
* A day of the week format for Week and Day headings,
* e.g. "Wed 01/04"
*
*/
dayFormat: _propTypes2.dateFormat,
/**
* Week day name format for the Month week day headings,
* e.g: "Sun", "Mon", "Tue", etc
*
*/
weekdayFormat: _propTypes2.dateFormat,
/**
* The timestamp cell formats in Week and Time views, e.g. "4:00 AM"
*/
timeGutterFormat: _propTypes2.dateFormat,
/**
* Toolbar header format for the Month view, e.g "2015 April"
*
*/
monthHeaderFormat: _propTypes2.dateFormat,
/**
* Toolbar header format for the Week views, e.g. "Mar 29 - Apr 04"
*/
dayRangeHeaderFormat: _propTypes2.dateRangeFormat,
/**
* Toolbar header format for the Day view, e.g. "Wednesday Apr 01"
*/
dayHeaderFormat: _propTypes2.dateFormat,
/**
* Toolbar header format for the Agenda view, e.g. "4/1/2015 – 5/1/2015"
*/
agendaHeaderFormat: _propTypes2.dateRangeFormat,
/**
* A time range format for selecting time slots, e.g "8:00am – 2:00pm"
*/
selectRangeFormat: _propTypes2.dateRangeFormat,
agendaDateFormat: _propTypes2.dateFormat,
agendaTimeFormat: _propTypes2.dateFormat,
agendaTimeRangeFormat: _propTypes2.dateRangeFormat,
/**
* Time range displayed on events.
*/
eventTimeRangeFormat: _propTypes2.dateRangeFormat,
/**
* An optional event time range for events that continue onto another day
*/
eventTimeRangeStartFormat: _propTypes2.dateFormat,
/**
* An optional event time range for events that continue from another day
*/
eventTimeRangeEndFormat: _propTypes2.dateFormat
}),
/**
* Customize how different sections of the calendar render by providing custom Components.
* In particular the `Event` component can be specified for the entire calendar, or you can
* provide an individual component for each view type.
*
* ```jsx
* let components = {
* event: MyEvent, // used by each view (Month, Day, Week)
* eventWrapper: MyEventWrapper,
* eventContainerWrapper: MyEventContainerWrapper,
* dateCellWrapper: MyDateCellWrapper,
* timeSlotWrapper: MyTimeSlotWrapper,
* timeGutterHeader: MyTimeGutterWrapper,
* timeGutterWrapper: MyTimeGutterWrapper,
* timeIndicatorWrapper: MyTimeIndicatorWrapper,
* resourceHeader: MyResourceHeader,
* showMore: MyShowMoreEvent,
* toolbar: MyToolbar,
* agenda: {
* event: MyAgendaEvent, // with the agenda view use a different component to render events
* time: MyAgendaTime,
* date: MyAgendaDate,
* },
* day: {
* header: MyDayHeader,
* event: MyDayEvent,
* },
* week: {
* header: MyWeekHeader,
* event: MyWeekEvent,
* },
* month: {
* header: MyMonthHeader,
* dateHeader: MyMonthDateHeader,
* event: MyMonthEvent,
* }
* }
* <Calendar components={components} />
* ```
*/
components: _propTypes.default.shape({
event: _propTypes.default.elementType,
eventWrapper: _propTypes.default.elementType,
eventContainerWrapper: _propTypes.default.elementType,
dateCellWrapper: _propTypes.default.elementType,
dayColumnWrapper: _propTypes.default.elementType,
timeSlotWrapper: _propTypes.default.elementType,
timeGutterHeader: _propTypes.default.elementType,
timeGutterWrapper: _propTypes.default.elementType,
timeIndicatorWrapper: _propTypes.default.elementType,
resourceHeader: _propTypes.default.elementType,
showMore: _propTypes.default.elementType,
toolbar: _propTypes.default.elementType,
agenda: _propTypes.default.shape({
date: _propTypes.default.elementType,
time: _propTypes.default.elementType,
event: _propTypes.default.elementType
}),
day: _propTypes.default.shape({
header: _propTypes.default.elementType,
event: _propTypes.default.elementType
}),
week: _propTypes.default.shape({
header: _propTypes.default.elementType,
event: _propTypes.default.elementType
}),
month: _propTypes.default.shape({
header: _propTypes.default.elementType,
dateHeader: _propTypes.default.elementType,
event: _propTypes.default.elementType
})
}),
/**
* String messages used throughout the component, override to provide localizations
*
* ```jsx
* const messages = {
* date: 'Date',
* time: 'Time',
* event: 'Event',
* allDay: 'All Day',
* week: 'Week',
* work_week: 'Work Week',
* day: 'Day',
* month: 'Month',
* previous: 'Back',
* next: 'Next',
* yesterday: 'Yesterday',
* tomorrow: 'Tomorrow',
* today: 'Today',
* agenda: 'Agenda',
*
* noEventsInRange: 'There are no events in this range.',
*
* showMore: total => `+ ${total} more`,
* }
*
* <Calendar messages={messages} />
* ```
*/
messages: _propTypes.default.shape({
allDay: _propTypes.default.node,
previous: _propTypes.default.node,
next: _propTypes.default.node,
today: _propTypes.default.node,
month: _propTypes.default.node,
week: _propTypes.default.node,
day: _propTypes.default.node,
agenda: _propTypes.default.node,
date: _propTypes.default.node,
time: _propTypes.default.node,
event: _propTypes.default.node,
noEventsInRange: _propTypes.default.node,
showMore: _propTypes.default.func
}),
/**
* A day event layout(arrangement) algorithm.
*
* `overlap` allows events to be overlapped.
*
* `no-overlap` resizes events to avoid overlap.
*
* or custom `Function(events, minimumStartDifference, slotMetrics, accessors)`
*/
dayLayoutAlgorithm: _propTypes2.DayLayoutAlgorithmPropType
} : {};
var _default = exports.default = (0, _uncontrollable.uncontrollable)(Calendar, {
view: 'onView',
date: 'onNavigate',
selected: 'onSelectEvent'
});