25개 이상의 토픽을 선택하실 수 없습니다. Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 

1051 lines
31 KiB

  1. "use strict";
  2. var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
  3. exports.__esModule = true;
  4. exports.default = void 0;
  5. var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
  6. var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
  7. var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));
  8. var _propTypes = _interopRequireDefault(require("prop-types"));
  9. var _react = _interopRequireDefault(require("react"));
  10. var _uncontrollable = require("uncontrollable");
  11. var _clsx = _interopRequireDefault(require("clsx"));
  12. var _propTypes2 = require("./utils/propTypes");
  13. var _warning = _interopRequireDefault(require("warning"));
  14. var _helpers = require("./utils/helpers");
  15. var _constants = require("./utils/constants");
  16. var _localizer = require("./localizer");
  17. var _messages = _interopRequireDefault(require("./utils/messages"));
  18. var _move = _interopRequireDefault(require("./utils/move"));
  19. var _Views = _interopRequireDefault(require("./Views"));
  20. var _Toolbar = _interopRequireDefault(require("./Toolbar"));
  21. var _NoopWrapper = _interopRequireDefault(require("./NoopWrapper"));
  22. var _omit = _interopRequireDefault(require("lodash/omit"));
  23. var _defaults = _interopRequireDefault(require("lodash/defaults"));
  24. var _transform = _interopRequireDefault(require("lodash/transform"));
  25. var _mapValues = _interopRequireDefault(require("lodash/mapValues"));
  26. var _accessors = require("./utils/accessors");
  27. function viewNames(_views) {
  28. return !Array.isArray(_views) ? Object.keys(_views) : _views;
  29. }
  30. function isValidView(view, _ref) {
  31. var _views = _ref.views;
  32. var names = viewNames(_views);
  33. return names.indexOf(view) !== -1;
  34. }
  35. /**
  36. * react-big-calendar is a full featured Calendar component for managing events and dates. It uses
  37. * modern `flexbox` for layout, making it super responsive and performant. Leaving most of the layout heavy lifting
  38. * to the browser. __note:__ The default styles use `height: 100%` which means your container must set an explicit
  39. * height (feel free to adjust the styles to suit your specific needs).
  40. *
  41. * Big Calendar is unopiniated about editing and moving events, preferring to let you implement it in a way that makes
  42. * the most sense to your app. It also tries not to be prescriptive about your event data structures, just tell it
  43. * how to find the start and end datetimes and you can pass it whatever you want.
  44. *
  45. * One thing to note is that, `react-big-calendar` treats event start/end dates as an _exclusive_ range.
  46. * which means that the event spans up to, but not including, the end date. In the case
  47. * of displaying events on whole days, end dates are rounded _up_ to the next day. So an
  48. * event ending on `Apr 8th 12:00:00 am` will not appear on the 8th, whereas one ending
  49. * on `Apr 8th 12:01:00 am` will. If you want _inclusive_ ranges consider providing a
  50. * function `endAccessor` that returns the end date + 1 day for those events that end at midnight.
  51. */
  52. var Calendar =
  53. /*#__PURE__*/
  54. function (_React$Component) {
  55. (0, _inheritsLoose2.default)(Calendar, _React$Component);
  56. function Calendar() {
  57. var _this;
  58. for (var _len = arguments.length, _args = new Array(_len), _key = 0; _key < _len; _key++) {
  59. _args[_key] = arguments[_key];
  60. }
  61. _this = _React$Component.call.apply(_React$Component, [this].concat(_args)) || this;
  62. _this.getViews = function () {
  63. var views = _this.props.views;
  64. if (Array.isArray(views)) {
  65. return (0, _transform.default)(views, function (obj, name) {
  66. return obj[name] = _Views.default[name];
  67. }, {});
  68. }
  69. if (typeof views === 'object') {
  70. return (0, _mapValues.default)(views, function (value, key) {
  71. if (value === true) {
  72. return _Views.default[key];
  73. }
  74. return value;
  75. });
  76. }
  77. return _Views.default;
  78. };
  79. _this.getView = function () {
  80. var views = _this.getViews();
  81. return views[_this.props.view];
  82. };
  83. _this.getDrilldownView = function (date) {
  84. var _this$props = _this.props,
  85. view = _this$props.view,
  86. drilldownView = _this$props.drilldownView,
  87. getDrilldownView = _this$props.getDrilldownView;
  88. if (!getDrilldownView) return drilldownView;
  89. return getDrilldownView(date, view, Object.keys(_this.getViews()));
  90. };
  91. _this.handleRangeChange = function (date, viewComponent, view) {
  92. var _this$props2 = _this.props,
  93. onRangeChange = _this$props2.onRangeChange,
  94. localizer = _this$props2.localizer;
  95. if (onRangeChange) {
  96. if (viewComponent.range) {
  97. onRangeChange(viewComponent.range(date, {
  98. localizer: localizer
  99. }), view);
  100. } else {
  101. process.env.NODE_ENV !== "production" ? (0, _warning.default)(true, 'onRangeChange prop not supported for this view') : void 0;
  102. }
  103. }
  104. };
  105. _this.handleNavigate = function (action, newDate) {
  106. var _this$props3 = _this.props,
  107. view = _this$props3.view,
  108. date = _this$props3.date,
  109. getNow = _this$props3.getNow,
  110. onNavigate = _this$props3.onNavigate,
  111. props = (0, _objectWithoutPropertiesLoose2.default)(_this$props3, ["view", "date", "getNow", "onNavigate"]);
  112. var ViewComponent = _this.getView();
  113. var today = getNow();
  114. date = (0, _move.default)(ViewComponent, (0, _extends2.default)({}, props, {
  115. action: action,
  116. date: newDate || date || today,
  117. today: today
  118. }));
  119. onNavigate(date, view, action);
  120. _this.handleRangeChange(date, ViewComponent);
  121. };
  122. _this.handleViewChange = function (view) {
  123. if (view !== _this.props.view && isValidView(view, _this.props)) {
  124. _this.props.onView(view);
  125. }
  126. var views = _this.getViews();
  127. _this.handleRangeChange(_this.props.date || _this.props.getNow(), views[view], view);
  128. };
  129. _this.handleSelectEvent = function () {
  130. for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
  131. args[_key2] = arguments[_key2];
  132. }
  133. (0, _helpers.notify)(_this.props.onSelectEvent, args);
  134. };
  135. _this.handleDoubleClickEvent = function () {
  136. for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
  137. args[_key3] = arguments[_key3];
  138. }
  139. (0, _helpers.notify)(_this.props.onDoubleClickEvent, args);
  140. };
  141. _this.handleSelectSlot = function (slotInfo) {
  142. (0, _helpers.notify)(_this.props.onSelectSlot, slotInfo);
  143. };
  144. _this.handleDrillDown = function (date, view) {
  145. var onDrillDown = _this.props.onDrillDown;
  146. if (onDrillDown) {
  147. onDrillDown(date, view, _this.drilldownView);
  148. return;
  149. }
  150. if (view) _this.handleViewChange(view);
  151. _this.handleNavigate(_constants.navigate.DATE, date);
  152. };
  153. _this.state = {
  154. context: _this.getContext(_this.props)
  155. };
  156. return _this;
  157. }
  158. var _proto = Calendar.prototype;
  159. _proto.componentWillReceiveProps = function componentWillReceiveProps(nextProps) {
  160. this.setState({
  161. context: this.getContext(nextProps)
  162. });
  163. };
  164. _proto.getContext = function getContext(_ref2) {
  165. var startAccessor = _ref2.startAccessor,
  166. endAccessor = _ref2.endAccessor,
  167. allDayAccessor = _ref2.allDayAccessor,
  168. tooltipAccessor = _ref2.tooltipAccessor,
  169. titleAccessor = _ref2.titleAccessor,
  170. resourceAccessor = _ref2.resourceAccessor,
  171. resourceIdAccessor = _ref2.resourceIdAccessor,
  172. resourceTitleAccessor = _ref2.resourceTitleAccessor,
  173. eventPropGetter = _ref2.eventPropGetter,
  174. slotPropGetter = _ref2.slotPropGetter,
  175. dayPropGetter = _ref2.dayPropGetter,
  176. view = _ref2.view,
  177. views = _ref2.views,
  178. localizer = _ref2.localizer,
  179. culture = _ref2.culture,
  180. _ref2$messages = _ref2.messages,
  181. messages = _ref2$messages === void 0 ? {} : _ref2$messages,
  182. _ref2$components = _ref2.components,
  183. components = _ref2$components === void 0 ? {} : _ref2$components,
  184. _ref2$formats = _ref2.formats,
  185. formats = _ref2$formats === void 0 ? {} : _ref2$formats;
  186. var names = viewNames(views);
  187. var msgs = (0, _messages.default)(messages);
  188. return {
  189. viewNames: names,
  190. localizer: (0, _localizer.mergeWithDefaults)(localizer, culture, formats, msgs),
  191. getters: {
  192. eventProp: function eventProp() {
  193. return eventPropGetter && eventPropGetter.apply(void 0, arguments) || {};
  194. },
  195. slotProp: function slotProp() {
  196. return slotPropGetter && slotPropGetter.apply(void 0, arguments) || {};
  197. },
  198. dayProp: function dayProp() {
  199. return dayPropGetter && dayPropGetter.apply(void 0, arguments) || {};
  200. }
  201. },
  202. components: (0, _defaults.default)(components[view] || {}, (0, _omit.default)(components, names), {
  203. eventWrapper: _NoopWrapper.default,
  204. eventContainerWrapper: _NoopWrapper.default,
  205. dateCellWrapper: _NoopWrapper.default,
  206. weekWrapper: _NoopWrapper.default,
  207. timeSlotWrapper: _NoopWrapper.default
  208. }),
  209. accessors: {
  210. start: (0, _accessors.wrapAccessor)(startAccessor),
  211. end: (0, _accessors.wrapAccessor)(endAccessor),
  212. allDay: (0, _accessors.wrapAccessor)(allDayAccessor),
  213. tooltip: (0, _accessors.wrapAccessor)(tooltipAccessor),
  214. title: (0, _accessors.wrapAccessor)(titleAccessor),
  215. resource: (0, _accessors.wrapAccessor)(resourceAccessor),
  216. resourceId: (0, _accessors.wrapAccessor)(resourceIdAccessor),
  217. resourceTitle: (0, _accessors.wrapAccessor)(resourceTitleAccessor)
  218. }
  219. };
  220. };
  221. _proto.render = function render() {
  222. var _this$props4 = this.props,
  223. view = _this$props4.view,
  224. toolbar = _this$props4.toolbar,
  225. events = _this$props4.events,
  226. style = _this$props4.style,
  227. className = _this$props4.className,
  228. elementProps = _this$props4.elementProps,
  229. current = _this$props4.date,
  230. getNow = _this$props4.getNow,
  231. length = _this$props4.length,
  232. showMultiDayTimes = _this$props4.showMultiDayTimes,
  233. onShowMore = _this$props4.onShowMore,
  234. _0 = _this$props4.components,
  235. _1 = _this$props4.formats,
  236. _2 = _this$props4.messages,
  237. _3 = _this$props4.culture,
  238. props = (0, _objectWithoutPropertiesLoose2.default)(_this$props4, ["view", "toolbar", "events", "style", "className", "elementProps", "date", "getNow", "length", "showMultiDayTimes", "onShowMore", "components", "formats", "messages", "culture"]);
  239. current = current || getNow();
  240. var View = this.getView();
  241. var _this$state$context = this.state.context,
  242. accessors = _this$state$context.accessors,
  243. components = _this$state$context.components,
  244. getters = _this$state$context.getters,
  245. localizer = _this$state$context.localizer,
  246. viewNames = _this$state$context.viewNames;
  247. var CalToolbar = components.toolbar || _Toolbar.default;
  248. var label = View.title(current, {
  249. localizer: localizer,
  250. length: length
  251. });
  252. return _react.default.createElement("div", (0, _extends2.default)({}, elementProps, {
  253. className: (0, _clsx.default)(className, 'rbc-calendar', props.rtl && 'rbc-rtl'),
  254. style: style
  255. }), toolbar && _react.default.createElement(CalToolbar, {
  256. date: current,
  257. view: view,
  258. views: viewNames,
  259. label: label,
  260. onView: this.handleViewChange,
  261. onNavigate: this.handleNavigate,
  262. localizer: localizer
  263. }), _react.default.createElement(View, (0, _extends2.default)({}, props, {
  264. events: events,
  265. date: current,
  266. getNow: getNow,
  267. length: length,
  268. localizer: localizer,
  269. getters: getters,
  270. components: components,
  271. accessors: accessors,
  272. showMultiDayTimes: showMultiDayTimes,
  273. getDrilldownView: this.getDrilldownView,
  274. onNavigate: this.handleNavigate,
  275. onDrillDown: this.handleDrillDown,
  276. onSelectEvent: this.handleSelectEvent,
  277. onDoubleClickEvent: this.handleDoubleClickEvent,
  278. onSelectSlot: this.handleSelectSlot,
  279. onShowMore: onShowMore
  280. })));
  281. }
  282. /**
  283. *
  284. * @param date
  285. * @param viewComponent
  286. * @param {'month'|'week'|'work_week'|'day'|'agenda'} [view] - optional
  287. * parameter. It appears when range change on view changing. It could be handy
  288. * when you need to have both: range and view type at once, i.e. for manage rbc
  289. * state via url
  290. */
  291. ;
  292. return Calendar;
  293. }(_react.default.Component);
  294. Calendar.defaultProps = {
  295. elementProps: {},
  296. popup: false,
  297. toolbar: true,
  298. view: _constants.views.MONTH,
  299. views: [_constants.views.MONTH, _constants.views.WEEK, _constants.views.DAY, _constants.views.AGENDA],
  300. step: 30,
  301. length: 30,
  302. drilldownView: _constants.views.DAY,
  303. titleAccessor: 'title',
  304. tooltipAccessor: 'title',
  305. allDayAccessor: 'allDay',
  306. startAccessor: 'start',
  307. endAccessor: 'end',
  308. resourceAccessor: 'resourceId',
  309. resourceIdAccessor: 'id',
  310. resourceTitleAccessor: 'title',
  311. longPressThreshold: 250,
  312. getNow: function getNow() {
  313. return new Date();
  314. }
  315. };
  316. Calendar.propTypes = process.env.NODE_ENV !== "production" ? {
  317. localizer: _propTypes.default.object.isRequired,
  318. /**
  319. * Props passed to main calendar `<div>`.
  320. *
  321. */
  322. elementProps: _propTypes.default.object,
  323. /**
  324. * The current date value of the calendar. Determines the visible view range.
  325. * If `date` is omitted then the result of `getNow` is used; otherwise the
  326. * current date is used.
  327. *
  328. * @controllable onNavigate
  329. */
  330. date: _propTypes.default.instanceOf(Date),
  331. /**
  332. * The current view of the calendar.
  333. *
  334. * @default 'month'
  335. * @controllable onView
  336. */
  337. view: _propTypes.default.string,
  338. /**
  339. * The initial view set for the Calendar.
  340. * @type Calendar.Views ('month'|'week'|'work_week'|'day'|'agenda')
  341. * @default 'month'
  342. */
  343. defaultView: _propTypes.default.string,
  344. /**
  345. * An array of event objects to display on the calendar. Events objects
  346. * can be any shape, as long as the Calendar knows how to retrieve the
  347. * following details of the event:
  348. *
  349. * - start time
  350. * - end time
  351. * - title
  352. * - whether its an "all day" event or not
  353. * - any resource the event may be related to
  354. *
  355. * Each of these properties can be customized or generated dynamically by
  356. * setting the various "accessor" props. Without any configuration the default
  357. * event should look like:
  358. *
  359. * ```js
  360. * Event {
  361. * title: string,
  362. * start: Date,
  363. * end: Date,
  364. * allDay?: boolean
  365. * resource?: any,
  366. * }
  367. * ```
  368. */
  369. events: _propTypes.default.arrayOf(_propTypes.default.object),
  370. /**
  371. * Accessor for the event title, used to display event information. Should
  372. * resolve to a `renderable` value.
  373. *
  374. * ```js
  375. * string | (event: Object) => string
  376. * ```
  377. *
  378. * @type {(func|string)}
  379. */
  380. titleAccessor: _propTypes2.accessor,
  381. /**
  382. * Accessor for the event tooltip. Should
  383. * resolve to a `renderable` value. Removes the tooltip if null.
  384. *
  385. * ```js
  386. * string | (event: Object) => string
  387. * ```
  388. *
  389. * @type {(func|string)}
  390. */
  391. tooltipAccessor: _propTypes2.accessor,
  392. /**
  393. * Determines whether the event should be considered an "all day" event and ignore time.
  394. * Must resolve to a `boolean` value.
  395. *
  396. * ```js
  397. * string | (event: Object) => boolean
  398. * ```
  399. *
  400. * @type {(func|string)}
  401. */
  402. allDayAccessor: _propTypes2.accessor,
  403. /**
  404. * The start date/time of the event. Must resolve to a JavaScript `Date` object.
  405. *
  406. * ```js
  407. * string | (event: Object) => Date
  408. * ```
  409. *
  410. * @type {(func|string)}
  411. */
  412. startAccessor: _propTypes2.accessor,
  413. /**
  414. * The end date/time of the event. Must resolve to a JavaScript `Date` object.
  415. *
  416. * ```js
  417. * string | (event: Object) => Date
  418. * ```
  419. *
  420. * @type {(func|string)}
  421. */
  422. endAccessor: _propTypes2.accessor,
  423. /**
  424. * Returns the id of the `resource` that the event is a member of. This
  425. * id should match at least one resource in the `resources` array.
  426. *
  427. * ```js
  428. * string | (event: Object) => Date
  429. * ```
  430. *
  431. * @type {(func|string)}
  432. */
  433. resourceAccessor: _propTypes2.accessor,
  434. /**
  435. * An array of resource objects that map events to a specific resource.
  436. * Resource objects, like events, can be any shape or have any properties,
  437. * but should be uniquly identifiable via the `resourceIdAccessor`, as
  438. * well as a "title" or name as provided by the `resourceTitleAccessor` prop.
  439. */
  440. resources: _propTypes.default.arrayOf(_propTypes.default.object),
  441. /**
  442. * Provides a unique identifier for each resource in the `resources` array
  443. *
  444. * ```js
  445. * string | (resource: Object) => any
  446. * ```
  447. *
  448. * @type {(func|string)}
  449. */
  450. resourceIdAccessor: _propTypes2.accessor,
  451. /**
  452. * Provides a human readable name for the resource object, used in headers.
  453. *
  454. * ```js
  455. * string | (resource: Object) => any
  456. * ```
  457. *
  458. * @type {(func|string)}
  459. */
  460. resourceTitleAccessor: _propTypes2.accessor,
  461. /**
  462. * Determines the current date/time which is highlighted in the views.
  463. *
  464. * The value affects which day is shaded and which time is shown as
  465. * the current time. It also affects the date used by the Today button in
  466. * the toolbar.
  467. *
  468. * Providing a value here can be useful when you are implementing time zones
  469. * using the `startAccessor` and `endAccessor` properties.
  470. *
  471. * @type {func}
  472. * @default () => new Date()
  473. */
  474. getNow: _propTypes.default.func,
  475. /**
  476. * Callback fired when the `date` value changes.
  477. *
  478. * @controllable date
  479. */
  480. onNavigate: _propTypes.default.func,
  481. /**
  482. * Callback fired when the `view` value changes.
  483. *
  484. * @controllable view
  485. */
  486. onView: _propTypes.default.func,
  487. /**
  488. * Callback fired when date header, or the truncated events links are clicked
  489. *
  490. */
  491. onDrillDown: _propTypes.default.func,
  492. /**
  493. *
  494. * ```js
  495. * (dates: Date[] | { start: Date; end: Date }, view?: 'month'|'week'|'work_week'|'day'|'agenda') => void
  496. * ```
  497. *
  498. * Callback fired when the visible date range changes. Returns an Array of dates
  499. * or an object with start and end dates for BUILTIN views. Optionally new `view`
  500. * will be returned when callback called after view change.
  501. *
  502. * Custom views may return something different.
  503. */
  504. onRangeChange: _propTypes.default.func,
  505. /**
  506. * A callback fired when a date selection is made. Only fires when `selectable` is `true`.
  507. *
  508. * ```js
  509. * (
  510. * slotInfo: {
  511. * start: Date,
  512. * end: Date,
  513. * slots: Array<Date>,
  514. * action: "select" | "click" | "doubleClick",
  515. * bounds: ?{ // For "select" action
  516. * x: number,
  517. * y: number,
  518. * top: number,
  519. * right: number,
  520. * left: number,
  521. * bottom: number,
  522. * },
  523. * box: ?{ // For "click" or "doubleClick" actions
  524. * clientX: number,
  525. * clientY: number,
  526. * x: number,
  527. * y: number,
  528. * },
  529. * }
  530. * ) => any
  531. * ```
  532. */
  533. onSelectSlot: _propTypes.default.func,
  534. /**
  535. * Callback fired when a calendar event is selected.
  536. *
  537. * ```js
  538. * (event: Object, e: SyntheticEvent) => any
  539. * ```
  540. *
  541. * @controllable selected
  542. */
  543. onSelectEvent: _propTypes.default.func,
  544. /**
  545. * Callback fired when a calendar event is clicked twice.
  546. *
  547. * ```js
  548. * (event: Object, e: SyntheticEvent) => void
  549. * ```
  550. */
  551. onDoubleClickEvent: _propTypes.default.func,
  552. /**
  553. * Callback fired when dragging a selection in the Time views.
  554. *
  555. * Returning `false` from the handler will prevent a selection.
  556. *
  557. * ```js
  558. * (range: { start: Date, end: Date }) => ?boolean
  559. * ```
  560. */
  561. onSelecting: _propTypes.default.func,
  562. /**
  563. * Callback fired when a +{count} more is clicked
  564. *
  565. * ```js
  566. * (events: Object, date: Date) => any
  567. * ```
  568. */
  569. onShowMore: _propTypes.default.func,
  570. /**
  571. * The selected event, if any.
  572. */
  573. selected: _propTypes.default.object,
  574. /**
  575. * An array of built-in view names to allow the calendar to display.
  576. * accepts either an array of builtin view names,
  577. *
  578. * ```jsx
  579. * views={['month', 'day', 'agenda']}
  580. * ```
  581. * or an object hash of the view name and the component (or boolean for builtin).
  582. *
  583. * ```jsx
  584. * views={{
  585. * month: true,
  586. * week: false,
  587. * myweek: WorkWeekViewComponent,
  588. * }}
  589. * ```
  590. *
  591. * Custom views can be any React component, that implements the following
  592. * interface:
  593. *
  594. * ```js
  595. * interface View {
  596. * static title(date: Date, { formats: DateFormat[], culture: string?, ...props }): string
  597. * static navigate(date: Date, action: 'PREV' | 'NEXT' | 'DATE'): Date
  598. * }
  599. * ```
  600. *
  601. * @type Views ('month'|'week'|'work_week'|'day'|'agenda')
  602. * @View
  603. ['month', 'week', 'day', 'agenda']
  604. */
  605. views: _propTypes2.views,
  606. /**
  607. * The string name of the destination view for drill-down actions, such
  608. * as clicking a date header, or the truncated events links. If
  609. * `getDrilldownView` is also specified it will be used instead.
  610. *
  611. * Set to `null` to disable drill-down actions.
  612. *
  613. * ```js
  614. * <Calendar
  615. * drilldownView="agenda"
  616. * />
  617. * ```
  618. */
  619. drilldownView: _propTypes.default.string,
  620. /**
  621. * Functionally equivalent to `drilldownView`, but accepts a function
  622. * that can return a view name. It's useful for customizing the drill-down
  623. * actions depending on the target date and triggering view.
  624. *
  625. * Return `null` to disable drill-down actions.
  626. *
  627. * ```js
  628. * <Calendar
  629. * getDrilldownView={(targetDate, currentViewName, configuredViewNames) =>
  630. * if (currentViewName === 'month' && configuredViewNames.includes('week'))
  631. * return 'week'
  632. *
  633. * return null;
  634. * }}
  635. * />
  636. * ```
  637. */
  638. getDrilldownView: _propTypes.default.func,
  639. /**
  640. * Determines the end date from date prop in the agenda view
  641. * date prop + length (in number of days) = end date
  642. */
  643. length: _propTypes.default.number,
  644. /**
  645. * Determines whether the toolbar is displayed
  646. */
  647. toolbar: _propTypes.default.bool,
  648. /**
  649. * Show truncated events in an overlay when you click the "+_x_ more" link.
  650. */
  651. popup: _propTypes.default.bool,
  652. /**
  653. * Distance in pixels, from the edges of the viewport, the "show more" overlay should be positioned.
  654. *
  655. * ```jsx
  656. * <Calendar popupOffset={30}/>
  657. * <Calendar popupOffset={{x: 30, y: 20}}/>
  658. * ```
  659. */
  660. popupOffset: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.shape({
  661. x: _propTypes.default.number,
  662. y: _propTypes.default.number
  663. })]),
  664. /**
  665. * Allows mouse selection of ranges of dates/times.
  666. *
  667. * The 'ignoreEvents' option prevents selection code from running when a
  668. * drag begins over an event. Useful when you want custom event click or drag
  669. * logic
  670. */
  671. selectable: _propTypes.default.oneOf([true, false, 'ignoreEvents']),
  672. /**
  673. * Specifies the number of miliseconds the user must press and hold on the screen for a touch
  674. * to be considered a "long press." Long presses are used for time slot selection on touch
  675. * devices.
  676. *
  677. * @type {number}
  678. * @default 250
  679. */
  680. longPressThreshold: _propTypes.default.number,
  681. /**
  682. * Determines the selectable time increments in week and day views
  683. */
  684. step: _propTypes.default.number,
  685. /**
  686. * The number of slots per "section" in the time grid views. Adjust with `step`
  687. * to change the default of 1 hour long groups, with 30 minute slots.
  688. */
  689. timeslots: _propTypes.default.number,
  690. /**
  691. *Switch the calendar to a `right-to-left` read direction.
  692. */
  693. rtl: _propTypes.default.bool,
  694. /**
  695. * Optionally provide a function that returns an object of className or style props
  696. * to be applied to the the event node.
  697. *
  698. * ```js
  699. * (
  700. * event: Object,
  701. * start: Date,
  702. * end: Date,
  703. * isSelected: boolean
  704. * ) => { className?: string, style?: Object }
  705. * ```
  706. */
  707. eventPropGetter: _propTypes.default.func,
  708. /**
  709. * Optionally provide a function that returns an object of className or style props
  710. * to be applied to the the time-slot node. Caution! Styles that change layout or
  711. * position may break the calendar in unexpected ways.
  712. *
  713. * ```js
  714. * (date: Date, resourceId: (number|string)) => { className?: string, style?: Object }
  715. * ```
  716. */
  717. slotPropGetter: _propTypes.default.func,
  718. /**
  719. * Optionally provide a function that returns an object of className or style props
  720. * to be applied to the the day background. Caution! Styles that change layout or
  721. * position may break the calendar in unexpected ways.
  722. *
  723. * ```js
  724. * (date: Date) => { className?: string, style?: Object }
  725. * ```
  726. */
  727. dayPropGetter: _propTypes.default.func,
  728. /**
  729. * Support to show multi-day events with specific start and end times in the
  730. * main time grid (rather than in the all day header).
  731. *
  732. * **Note: This may cause calendars with several events to look very busy in
  733. * the week and day views.**
  734. */
  735. showMultiDayTimes: _propTypes.default.bool,
  736. /**
  737. * Constrains the minimum _time_ of the Day and Week views.
  738. */
  739. min: _propTypes.default.instanceOf(Date),
  740. /**
  741. * Constrains the maximum _time_ of the Day and Week views.
  742. */
  743. max: _propTypes.default.instanceOf(Date),
  744. /**
  745. * Determines how far down the scroll pane is initially scrolled down.
  746. */
  747. scrollToTime: _propTypes.default.instanceOf(Date),
  748. /**
  749. * Specify a specific culture code for the Calendar.
  750. *
  751. * **Note: it's generally better to handle this globally via your i18n library.**
  752. */
  753. culture: _propTypes.default.string,
  754. /**
  755. * Localizer specific formats, tell the Calendar how to format and display dates.
  756. *
  757. * `format` types are dependent on the configured localizer; both Moment and Globalize
  758. * accept strings of tokens according to their own specification, such as: `'DD mm yyyy'`.
  759. *
  760. * ```jsx
  761. * let formats = {
  762. * dateFormat: 'dd',
  763. *
  764. * dayFormat: (date, , localizer) =>
  765. * localizer.format(date, 'DDD', culture),
  766. *
  767. * dayRangeHeaderFormat: ({ start, end }, culture, localizer) =>
  768. * localizer.format(start, { date: 'short' }, culture) + ' – ' +
  769. * localizer.format(end, { date: 'short' }, culture)
  770. * }
  771. *
  772. * <Calendar formats={formats} />
  773. * ```
  774. *
  775. * All localizers accept a function of
  776. * the form `(date: Date, culture: ?string, localizer: Localizer) -> string`
  777. */
  778. formats: _propTypes.default.shape({
  779. /**
  780. * Format for the day of the month heading in the Month view.
  781. * e.g. "01", "02", "03", etc
  782. */
  783. dateFormat: _propTypes2.dateFormat,
  784. /**
  785. * A day of the week format for Week and Day headings,
  786. * e.g. "Wed 01/04"
  787. *
  788. */
  789. dayFormat: _propTypes2.dateFormat,
  790. /**
  791. * Week day name format for the Month week day headings,
  792. * e.g: "Sun", "Mon", "Tue", etc
  793. *
  794. */
  795. weekdayFormat: _propTypes2.dateFormat,
  796. /**
  797. * The timestamp cell formats in Week and Time views, e.g. "4:00 AM"
  798. */
  799. timeGutterFormat: _propTypes2.dateFormat,
  800. /**
  801. * Toolbar header format for the Month view, e.g "2015 April"
  802. *
  803. */
  804. monthHeaderFormat: _propTypes2.dateFormat,
  805. /**
  806. * Toolbar header format for the Week views, e.g. "Mar 29 - Apr 04"
  807. */
  808. dayRangeHeaderFormat: _propTypes2.dateRangeFormat,
  809. /**
  810. * Toolbar header format for the Day view, e.g. "Wednesday Apr 01"
  811. */
  812. dayHeaderFormat: _propTypes2.dateFormat,
  813. /**
  814. * Toolbar header format for the Agenda view, e.g. "4/1/2015 – 5/1/2015"
  815. */
  816. agendaHeaderFormat: _propTypes2.dateRangeFormat,
  817. /**
  818. * A time range format for selecting time slots, e.g "8:00am – 2:00pm"
  819. */
  820. selectRangeFormat: _propTypes2.dateRangeFormat,
  821. agendaDateFormat: _propTypes2.dateFormat,
  822. agendaTimeFormat: _propTypes2.dateFormat,
  823. agendaTimeRangeFormat: _propTypes2.dateRangeFormat,
  824. /**
  825. * Time range displayed on events.
  826. */
  827. eventTimeRangeFormat: _propTypes2.dateRangeFormat,
  828. /**
  829. * An optional event time range for events that continue onto another day
  830. */
  831. eventTimeRangeStartFormat: _propTypes2.dateFormat,
  832. /**
  833. * An optional event time range for events that continue from another day
  834. */
  835. eventTimeRangeEndFormat: _propTypes2.dateFormat
  836. }),
  837. /**
  838. * Customize how different sections of the calendar render by providing custom Components.
  839. * In particular the `Event` component can be specified for the entire calendar, or you can
  840. * provide an individual component for each view type.
  841. *
  842. * ```jsx
  843. * let components = {
  844. * event: MyEvent, // used by each view (Month, Day, Week)
  845. * eventWrapper: MyEventWrapper,
  846. * eventContainerWrapper: MyEventContainerWrapper,
  847. * dateCellWrapper: MyDateCellWrapper,
  848. * timeSlotWrapper: MyTimeSlotWrapper,
  849. * timeGutterHeader: MyTimeGutterWrapper,
  850. * toolbar: MyToolbar,
  851. * agenda: {
  852. * event: MyAgendaEvent // with the agenda view use a different component to render events
  853. * time: MyAgendaTime,
  854. * date: MyAgendaDate,
  855. * },
  856. * day: {
  857. * header: MyDayHeader,
  858. * event: MyDayEvent,
  859. * },
  860. * week: {
  861. * header: MyWeekHeader,
  862. * event: MyWeekEvent,
  863. * },
  864. * month: {
  865. * header: MyMonthHeader,
  866. * dateHeader: MyMonthDateHeader,
  867. * event: MyMonthEvent,
  868. * }
  869. * }
  870. * <Calendar components={components} />
  871. * ```
  872. */
  873. components: _propTypes.default.shape({
  874. event: _propTypes.default.elementType,
  875. eventWrapper: _propTypes.default.elementType,
  876. eventContainerWrapper: _propTypes.default.elementType,
  877. dateCellWrapper: _propTypes.default.elementType,
  878. timeSlotWrapper: _propTypes.default.elementType,
  879. timeGutterHeader: _propTypes.default.elementType,
  880. resourceHeader: _propTypes.default.elementType,
  881. toolbar: _propTypes.default.elementType,
  882. agenda: _propTypes.default.shape({
  883. date: _propTypes.default.elementType,
  884. time: _propTypes.default.elementType,
  885. event: _propTypes.default.elementType
  886. }),
  887. day: _propTypes.default.shape({
  888. header: _propTypes.default.elementType,
  889. event: _propTypes.default.elementType
  890. }),
  891. week: _propTypes.default.shape({
  892. header: _propTypes.default.elementType,
  893. event: _propTypes.default.elementType
  894. }),
  895. month: _propTypes.default.shape({
  896. header: _propTypes.default.elementType,
  897. dateHeader: _propTypes.default.elementType,
  898. event: _propTypes.default.elementType
  899. })
  900. }),
  901. /**
  902. * String messages used throughout the component, override to provide localizations
  903. */
  904. messages: _propTypes.default.shape({
  905. allDay: _propTypes.default.node,
  906. previous: _propTypes.default.node,
  907. next: _propTypes.default.node,
  908. today: _propTypes.default.node,
  909. month: _propTypes.default.node,
  910. week: _propTypes.default.node,
  911. day: _propTypes.default.node,
  912. agenda: _propTypes.default.node,
  913. date: _propTypes.default.node,
  914. time: _propTypes.default.node,
  915. event: _propTypes.default.node,
  916. noEventsInRange: _propTypes.default.node,
  917. showMore: _propTypes.default.func
  918. })
  919. } : {};
  920. var _default = (0, _uncontrollable.uncontrollable)(Calendar, {
  921. view: 'onView',
  922. date: 'onNavigate',
  923. selected: 'onSelectEvent'
  924. });
  925. exports.default = _default;
  926. module.exports = exports["default"];