Merge branch 'develop'

# Conflicts:
#	CHANGELOG.md
#	package.json

.gitignore

@@ -34,3 +34,8 @@ node_modules
 
 # Mac OS X
 .DS_Store
+
+# Yarn Cache
+.yarn
+# Yarn NodeLinker
+.yarnrc.yml

.scripts/build.mjs

@@ -1,19 +1,19 @@
 #!/usr/bin/env zx
-import isCI from 'is-ci';
+import isCI from 'is-ci'
 
 const {
   b = isCI, // pass `-b` to build if you want it to run browserslist update outside of CI environment
-} = argv;
+} = argv
 
 if (b) {
   // Update browserslist
-  await $`npx browserslist@latest --update-db`;
+  await $`npx update-browserslist-db@latest`
 }
 
 console.log(chalk.blue('[BEGIN BUILD]'))
 console.log(chalk.blue('Building js'))
 // build distributables
-await $`NODE_ENV=production rollup -c`;
+await $`NODE_ENV=production rollup -c`
 console.log(chalk.blue(`Compiling 'lib' js files`))
 // build files used for overrides
 await $`NODE_ENV=production RBC_CJS_BUILD=true babel src --out-dir lib`
@@ -22,7 +22,10 @@ console.log(chalk.blue(`Copying SASS files to 'lib'`))
 await fs.copy('./src/sass', './lib/sass')
 console.log(chalk.blue(`...and the 'Add-on' SASS`))
 // don't forget DnD
-await fs.copy('./src/addons/dragAndDrop/styles.scss', './lib/addons/dragAndDrop/styles.scss')
+await fs.copy(
+  './src/addons/dragAndDrop/styles.scss',
+  './lib/addons/dragAndDrop/styles.scss'
+)
 console.log(chalk.blue('Now we will build some CSS'))
 // Compile SASS from './lib' to get sourcemaps
 console.log(chalk.blue('Compile base styles'))

CITATION.cff

@@ -0,0 +1,32 @@
+cff-version: 1.2.0
+title: Big Calendar
+message: >-
+  If you use this software, please cite it using the
+  metadata from this file.
+type: software
+authors:
+  - given-names: Jason
+    family-names: Quense
+    email: monastic.panic@gmail.com
+  - given-names: Stephen
+    family-names: Blades
+    alias: Cutter
+    website: https://cutterscrossing.com
+    email: no.junk@cutterscrossing.com
+  - given-names: Bogdan
+    family-names: Chadkin
+    alias: TrySound
+  - given-names: Tobias
+    family-names: Andersen
+    email: j.tobiasandersen@gmail.com
+repository-code: 'https://github.com/jquense/react-big-calendar'
+url: 'https://jquense.github.io/react-big-calendar/examples'
+repository-artifact: 'https://registry.npmjs.org/react-big-calendar'
+abstract: >-
+  Big Calendar is a full featured Calendar component for
+  managing events and dates.
+keywords:
+  - scheduler
+  - calendar
+  - events
+license: MIT

CONTRIBUTING.md

@@ -21,7 +21,7 @@ chance of keeping on top of things.
 
 - Create a topic branch from where you want to base your work.
   - This is usually the master branch.
-  - To quickly create a topic branch based on master; `git branch master/my_contribution master` then checkout the new branch with `git checkout master/my_contribution`. Better avoid working directly on the
+  - To quickly create a topic branch based on master; `git branch feat/my_contribution master` then checkout the new branch with `git checkout feat/my_contribution`. Better avoid working directly on the
     `master` branch, to avoid conflicts if you pull in updates from origin.
 - Make commits of logical units.
   - Write/change `stories` that showcase new features or props

README.md

@@ -1,6 +1,6 @@
 # react-big-calendar
 
-An events calendar component built for React and made for modern browsers (read: not IE) and uses flexbox over the classic tables-caption approach.
+An events calendar component built for React and designed for modern browsers (read: not IE) and uses flexbox over the classic tables-caption approach.
 
 <p align="center">
   <img src="./assets/rbc-demo.gif" alt="Big Calendar Demo Image" />
@@ -165,4 +165,5 @@ Big Calendar. Carefully test each change accordingly.
 
 ## Join The Community
 
-Help us improve Big Calendar! Join us on [Slack](https://join.slack.com/t/bigcalendar/shared_invite/zt-1ml1j99af-qIvqOfosMog1W7WxM0~j2Q).
+Help us improve Big Calendar! Join us on [Slack](https://join.slack.com/t/bigcalendar/shared_invite/zt-2cerpqegz-mGzcbm7LxYLFPjcTa0gLgw).
+(Slack invite links do expire. If you can't get in, just file an issue and we'll get a new link.)

package.json

@@ -53,6 +53,8 @@
     "@babel/core": "^7.20.12",
     "@babel/eslint-parser": "^7.19.1",
     "@babel/plugin-proposal-class-properties": "^7.18.6",
+    "@babel/plugin-proposal-private-methods": "^7.18.6",
+    "@babel/plugin-proposal-private-property-in-object": "^7.18.6",
     "@babel/plugin-transform-runtime": "^7.19.6",
     "@babel/preset-env": "^7.20.2",
     "@commitlint/cli": "^17.4.2",
@@ -104,7 +106,7 @@
     "rollup-plugin-terser": "^7.0.2",
     "sass": "1.57.1",
     "sass-loader": "^13.2.0",
-    "semantic-release": "^21.0.1",
+    "semantic-release": "^20.0.2",
     "zx": "^7.1.1"
   },
   "dependencies": {

src/BackgroundCells.js

@@ -4,7 +4,7 @@ import clsx from 'clsx'
 
 import { notify } from './utils/helpers'
 import { dateCellSelection, getSlotAtX, pointInBox } from './utils/selection'
-import Selection, { getBoundsForNode, isEvent } from './Selection'
+import Selection, { getBoundsForNode, isEvent, isShowMore } from './Selection'
 
 class BackgroundCells extends React.Component {
   constructor(props, context) {
@@ -77,7 +77,7 @@ class BackgroundCells extends React.Component {
     }))
 
     let selectorClicksHandler = (point, actionType) => {
-      if (!isEvent(node, point)) {
+      if (!isEvent(node, point) && !isShowMore(node, point)) {
         let rowBox = getBoundsForNode(node)
         let { range, rtl } = this.props
 

src/Calendar.js

@@ -246,7 +246,7 @@ class Calendar extends React.Component {
     resources: PropTypes.arrayOf(PropTypes.object),
 
     /**
-     * Provides a unique identifier for each resource in the `resources` array
+     * Provides a unique identifier, or an array of unique identifiers, for each resource in the `resources` array
      *
      * ```js
      * string | (resource: Object) => any
@@ -603,6 +603,15 @@ class Calendar extends React.Component {
      */
     showMultiDayTimes: PropTypes.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.number,
+
     /**
      * Constrains the minimum _time_ of the Day and Week views.
      */
@@ -865,6 +874,7 @@ class Calendar extends React.Component {
     views: [views.MONTH, views.WEEK, views.DAY, views.AGENDA],
     step: 30,
     length: 30,
+    allDayMaxRows: Infinity,
 
     doShowMoreDrillDown: true,
     drilldownView: views.DAY,

src/DateContentRow.js

@@ -181,7 +181,7 @@ class DateContentRow extends React.Component {
             </div>
           )}
           <ScrollableWeekComponent>
-            <WeekWrapper isAllDay={isAllDay} {...eventRowProps}>
+            <WeekWrapper isAllDay={isAllDay} {...eventRowProps} rtl={this.props.rtl}>
               {levels.map((segs, idx) => (
                 <EventRow key={idx} segments={segs} {...eventRowProps} />
               ))}

src/Day.js

@@ -2,6 +2,8 @@ import PropTypes from 'prop-types'
 import React from 'react'
 
 import { navigate } from './utils/constants'
+import { DayLayoutAlgorithmPropType } from './utils/propTypes'
+
 import TimeGrid from './TimeGrid'
 
 class Day extends React.Component {
@@ -39,11 +41,63 @@ class Day extends React.Component {
 
 Day.propTypes = {
   date: PropTypes.instanceOf(Date).isRequired,
-  localizer: PropTypes.any,
+
+  events: PropTypes.array.isRequired,
+  backgroundEvents: PropTypes.array.isRequired,
+  resources: PropTypes.array,
+
+  step: PropTypes.number,
+  timeslots: PropTypes.number,
+  range: PropTypes.arrayOf(PropTypes.instanceOf(Date)),
   min: PropTypes.instanceOf(Date),
   max: PropTypes.instanceOf(Date),
+  getNow: PropTypes.func.isRequired,
+
   scrollToTime: PropTypes.instanceOf(Date),
   enableAutoScroll: PropTypes.bool,
+  showMultiDayTimes: PropTypes.bool,
+
+  rtl: PropTypes.bool,
+  resizable: PropTypes.bool,
+  width: PropTypes.number,
+
+  accessors: PropTypes.object.isRequired,
+  components: PropTypes.object.isRequired,
+  getters: PropTypes.object.isRequired,
+  localizer: PropTypes.object.isRequired,
+
+  allDayMaxRows: PropTypes.number,
+
+  selected: PropTypes.object,
+  selectable: PropTypes.oneOf([true, false, 'ignoreEvents']),
+  longPressThreshold: PropTypes.number,
+
+  onNavigate: PropTypes.func,
+  onSelectSlot: PropTypes.func,
+  onSelectEnd: PropTypes.func,
+  onSelectStart: PropTypes.func,
+  onSelectEvent: PropTypes.func,
+  onDoubleClickEvent: PropTypes.func,
+  onKeyPressEvent: PropTypes.func,
+  onShowMore: PropTypes.func,
+  onDrillDown: PropTypes.func,
+  getDrilldownView: PropTypes.func.isRequired,
+
+  dayLayoutAlgorithm: DayLayoutAlgorithmPropType,
+
+  showAllEvents: PropTypes.bool,
+  doShowMoreDrillDown: PropTypes.bool,
+
+  popup: PropTypes.bool,
+  handleDragStart: PropTypes.func,
+
+  popupOffset: PropTypes.oneOfType([
+    PropTypes.number,
+    PropTypes.shape({
+      x: PropTypes.number,
+      y: PropTypes.number,
+    }),
+  ]),
 }
 
 Day.range = (date, { localizer }) => {

src/DayColumn.js

@@ -38,35 +38,33 @@ class DayColumn extends React.Component {
     this.clearTimeIndicatorInterval()
   }
 
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    if (nextProps.selectable && !this.props.selectable) this._selectable()
-    if (!nextProps.selectable && this.props.selectable)
-      this._teardownSelectable()
+ componentDidUpdate(prevProps, prevState) {
+    if (this.props.selectable && !prevProps.selectable) this._selectable();
+    if (!this.props.selectable && prevProps.selectable)
+      this._teardownSelectable();
 
-    this.slotMetrics = this.slotMetrics.update(nextProps)
-  }
+    this.slotMetrics = this.slotMetrics.update(this.props);
 
-  componentDidUpdate(prevProps, prevState) {
-    const { getNow, isNow, localizer, date, min, max } = this.props
-    const getNowChanged = localizer.neq(prevProps.getNow(), getNow(), 'minutes')
+    const { getNow, isNow, localizer, date, min, max } = this.props;
+    const getNowChanged = localizer.neq(prevProps.getNow(), getNow(), 'minutes');
 
     if (prevProps.isNow !== isNow || getNowChanged) {
-      this.clearTimeIndicatorInterval()
+      this.clearTimeIndicatorInterval();
 
       if (isNow) {
         const tail =
           !getNowChanged &&
           localizer.eq(prevProps.date, date, 'minutes') &&
-          prevState.timeIndicatorPosition === this.state.timeIndicatorPosition
+          prevState.timeIndicatorPosition === this.state.timeIndicatorPosition;
 
-        this.setTimeIndicatorPositionUpdateInterval(tail)
+        this.setTimeIndicatorPositionUpdateInterval(tail);
       }
     } else if (
       isNow &&
       (localizer.neq(prevProps.min, min, 'minutes') ||
         localizer.neq(prevProps.max, max, 'minutes'))
     ) {
-      this.positionTimeIndicator()
+      this.positionTimeIndicator();
     }
   }
 
@@ -238,8 +236,20 @@ class DayColumn extends React.Component {
           continuesPrior={continuesPrior}
           continuesAfter={continuesAfter}
           accessors={accessors}
+          resource={this.props.resource}
           selected={isSelected(event, selected)}
-          onClick={(e) => this._select(event, e)}
+          onClick={(e) =>
+            this._select(
+              {
+                ...event,
+                ...(this.props.resource && {
+                  sourceResource: this.props.resource,
+                }),
+                ...(isBackgroundEvent && { isBackgroundEvent: true }),
+              },
+              e
+            )
+          }
           onDoubleClick={(e) => this._doubleClick(event, e)}
           isBackgroundEvent={isBackgroundEvent}
           onKeyPress={(e) => this._keyPress(event, e)}

src/EventCell.js

@@ -62,7 +62,6 @@ class EventCell extends React.Component {
       <EventWrapper {...this.props} type="date">
         <div
           {...props}
-          tabIndex={0}
           style={{ ...userProps.style, ...style }}
           className={clsx('rbc-event', className, userProps.className, {
             'rbc-selected': selected,
@@ -72,7 +71,7 @@ class EventCell extends React.Component {
           })}
           onClick={(e) => onSelect && onSelect(event, e)}
           onDoubleClick={(e) => onDoubleClick && onDoubleClick(event, e)}
-          onKeyPress={(e) => onKeyPress && onKeyPress(event, e)}
+          onKeyDown={(e) => onKeyPress && onKeyPress(event, e)}
         >
           {typeof children === 'function' ? children(content) : content}
         </div>

src/EventEndingRow.js

@@ -7,7 +7,7 @@ import range from 'lodash/range'
 
 let isSegmentInSlot = (seg, slot) => seg.left <= slot && seg.right >= slot
 let eventsInSlot = (segments, slot) =>
-  segments.filter((seg) => isSegmentInSlot(seg, slot)).length
+  segments.filter((seg) => isSegmentInSlot(seg, slot)).map((seg) => seg.event)
 
 class EventEndingRow extends React.Component {
   render() {
@@ -68,24 +68,25 @@ class EventEndingRow extends React.Component {
     let { segments } = this.props
 
     return range(slot, slot + span).every((s) => {
-      let count = eventsInSlot(segments, s)
+      const count = eventsInSlot(segments, s).length
 
       return count === 1
     })
   }
 
   renderShowMore(segments, slot) {
-    let { localizer } = this.props
-    let count = eventsInSlot(segments, slot)
-
+    let { localizer, slotMetrics } = this.props
+    const events = slotMetrics.getEventsForSlot(slot)
+    const remainingEvents = eventsInSlot(segments, slot)
+    const count = remainingEvents.length
     return count ? (
       <button
         type="button"
         key={'sm_' + slot}
         className={clsx('rbc-button-link', 'rbc-show-more')}
-        onClick={e => this.showMore(slot, e)}
+        onClick={(e) => this.showMore(slot, e)}
       >
-        {localizer.messages.showMore(count)}
+        {localizer.messages.showMore(count, remainingEvents, events)}
       </button>
     ) : (
       false