|
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051 |
- "use strict";
-
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
- exports.__esModule = true;
- exports.default = void 0;
-
- var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
- var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
-
- var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));
-
- var _propTypes = _interopRequireDefault(require("prop-types"));
-
- var _react = _interopRequireDefault(require("react"));
-
- var _uncontrollable = require("uncontrollable");
-
- var _clsx = _interopRequireDefault(require("clsx"));
-
- var _propTypes2 = require("./utils/propTypes");
-
- var _warning = _interopRequireDefault(require("warning"));
-
- var _helpers = require("./utils/helpers");
-
- var _constants = require("./utils/constants");
-
- var _localizer = require("./localizer");
-
- var _messages = _interopRequireDefault(require("./utils/messages"));
-
- var _move = _interopRequireDefault(require("./utils/move"));
-
- var _Views = _interopRequireDefault(require("./Views"));
-
- var _Toolbar = _interopRequireDefault(require("./Toolbar"));
-
- var _NoopWrapper = _interopRequireDefault(require("./NoopWrapper"));
-
- var _omit = _interopRequireDefault(require("lodash/omit"));
-
- var _defaults = _interopRequireDefault(require("lodash/defaults"));
-
- var _transform = _interopRequireDefault(require("lodash/transform"));
-
- var _mapValues = _interopRequireDefault(require("lodash/mapValues"));
-
- var _accessors = require("./utils/accessors");
-
- function viewNames(_views) {
- return !Array.isArray(_views) ? Object.keys(_views) : _views;
- }
-
- function isValidView(view, _ref) {
- var _views = _ref.views;
- var names = viewNames(_views);
- return names.indexOf(view) !== -1;
- }
- /**
- * react-big-calendar is a full featured Calendar component for managing events and dates. It uses
- * modern `flexbox` for layout, making it super responsive and performant. Leaving most of the layout heavy lifting
- * to the browser. __note:__ The default styles use `height: 100%` which means your container must set an explicit
- * height (feel free to adjust the styles to suit your specific needs).
- *
- * Big Calendar is unopiniated about editing and moving events, preferring to let you implement it in a way that makes
- * the most sense to your app. It also tries not to be prescriptive about your event data structures, just tell it
- * how to find the start and end datetimes and you can pass it whatever you want.
- *
- * One thing to note is that, `react-big-calendar` treats event start/end dates as an _exclusive_ range.
- * which means that the event spans up to, but not including, the end date. In the case
- * of displaying events on whole days, end dates are rounded _up_ to the next day. So an
- * event ending on `Apr 8th 12:00:00 am` will not appear on the 8th, whereas one ending
- * on `Apr 8th 12:01:00 am` will. If you want _inclusive_ ranges consider providing a
- * function `endAccessor` that returns the end date + 1 day for those events that end at midnight.
- */
-
-
- var Calendar =
- /*#__PURE__*/
- function (_React$Component) {
- (0, _inheritsLoose2.default)(Calendar, _React$Component);
-
- function Calendar() {
- var _this;
-
- for (var _len = arguments.length, _args = new Array(_len), _key = 0; _key < _len; _key++) {
- _args[_key] = arguments[_key];
- }
-
- _this = _React$Component.call.apply(_React$Component, [this].concat(_args)) || this;
-
- _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 (typeof 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()));
- };
-
- _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 {
- process.env.NODE_ENV !== "production" ? (0, _warning.default)(true, 'onRangeChange prop not supported for this view') : void 0;
- }
- }
- };
-
- _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, _objectWithoutPropertiesLoose2.default)(_this$props3, ["view", "date", "getNow", "onNavigate"]);
-
- var ViewComponent = _this.getView();
-
- var today = getNow();
- date = (0, _move.default)(ViewComponent, (0, _extends2.default)({}, 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.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: _this.getContext(_this.props)
- };
- return _this;
- }
-
- var _proto = Calendar.prototype;
-
- _proto.componentWillReceiveProps = function componentWillReceiveProps(nextProps) {
- this.setState({
- context: this.getContext(nextProps)
- });
- };
-
- _proto.getContext = 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,
- eventPropGetter = _ref2.eventPropGetter,
- slotPropGetter = _ref2.slotPropGetter,
- 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) || {};
- },
- slotProp: function slotProp() {
- return slotPropGetter && slotPropGetter.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,
- eventContainerWrapper: _NoopWrapper.default,
- dateCellWrapper: _NoopWrapper.default,
- weekWrapper: _NoopWrapper.default,
- timeSlotWrapper: _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)
- }
- };
- };
-
- _proto.render = function render() {
- var _this$props4 = this.props,
- view = _this$props4.view,
- toolbar = _this$props4.toolbar,
- events = _this$props4.events,
- 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,
- _0 = _this$props4.components,
- _1 = _this$props4.formats,
- _2 = _this$props4.messages,
- _3 = _this$props4.culture,
- props = (0, _objectWithoutPropertiesLoose2.default)(_this$props4, ["view", "toolbar", "events", "style", "className", "elementProps", "date", "getNow", "length", "showMultiDayTimes", "onShowMore", "components", "formats", "messages", "culture"]);
- 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 _react.default.createElement("div", (0, _extends2.default)({}, elementProps, {
- className: (0, _clsx.default)(className, 'rbc-calendar', props.rtl && 'rbc-rtl'),
- style: style
- }), toolbar && _react.default.createElement(CalToolbar, {
- date: current,
- view: view,
- views: viewNames,
- label: label,
- onView: this.handleViewChange,
- onNavigate: this.handleNavigate,
- localizer: localizer
- }), _react.default.createElement(View, (0, _extends2.default)({}, props, {
- events: events,
- 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,
- onSelectSlot: this.handleSelectSlot,
- onShowMore: onShowMore
- })));
- }
- /**
- *
- * @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
- */
- ;
-
- return Calendar;
- }(_react.default.Component);
-
- Calendar.defaultProps = {
- 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,
- drilldownView: _constants.views.DAY,
- titleAccessor: 'title',
- tooltipAccessor: 'title',
- allDayAccessor: 'allDay',
- startAccessor: 'start',
- endAccessor: 'end',
- resourceAccessor: 'resourceId',
- resourceIdAccessor: 'id',
- resourceTitleAccessor: 'title',
- longPressThreshold: 250,
- getNow: function getNow() {
- return new Date();
- }
- };
- Calendar.propTypes = process.env.NODE_ENV !== "production" ? {
- 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),
-
- /**
- * 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,
-
- /**
- * 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 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') => 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,
- * 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 dragging a selection in the Time views.
- *
- * Returning `false` from the handler will prevent a selection.
- *
- * ```js
- * (range: { start: Date, end: Date }) => ?boolean
- * ```
- */
- onSelecting: _propTypes.default.func,
-
- /**
- * Callback fired when a +{count} more is clicked
- *
- * ```js
- * (events: Object, date: Date) => any
- * ```
- */
- onShowMore: _propTypes.default.func,
-
- /**
- * 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,
-
- /**
- * 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 miliseconds 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
- */
- 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 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 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,
-
- /**
- * 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),
-
- /**
- * 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; both Moment 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,
- * 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,
- timeSlotWrapper: _propTypes.default.elementType,
- timeGutterHeader: _propTypes.default.elementType,
- resourceHeader: _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
- */
- 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
- })
- } : {};
-
- var _default = (0, _uncontrollable.uncontrollable)(Calendar, {
- view: 'onView',
- date: 'onNavigate',
- selected: 'onSelectEvent'
- });
-
- exports.default = _default;
- module.exports = exports["default"];
|