feat: add agenda no events msg (jquense#923)

* display message when no events are present

* add post-commit, task-created files

* attempt at adding `noEventsInRange` to messages

* ammend default message

* Add custom no agenda events story

Author: mulholo

package-lock.json

@@ -7,7 +7,12 @@
   "license": "MIT",
   "main": "lib/index.js",
   "style": "lib/css/react-big-calendar.css",
-  "files": ["lib/", "LICENSE", "README.md", "CHANGELOG.md"],
+  "files": [
+    "lib/",
+    "LICENSE",
+    "README.md",
+    "CHANGELOG.md"
+  ],
   "keywords": [
     "scheduler",
     "react-component",
@@ -20,18 +25,13 @@
     "clean": "rimraf lib",
     "clean:examples": "rimraf examples/static",
     "l": "lessc --autoprefix=\"ie >= 10, safari >= 8, last 2 versions\" ",
-    "less":
-      "npm run l src/less/styles.less ./lib/css/react-big-calendar.css && npm run less-dnd",
-    "less-dnd":
-      "npm run l src/addons/dragAndDrop/styles.less ./lib/addons/dragAndDrop/styles.css",
+    "less": "npm run l src/less/styles.less ./lib/css/react-big-calendar.css && npm run less-dnd",
+    "less-dnd": "npm run l src/addons/dragAndDrop/styles.less ./lib/addons/dragAndDrop/styles.css",
     "assets": "cpy src/less/* lib/less && npm run assets-addons",
     "assets-addons": "cpy addons/**/*.less ../lib/ --cwd=src --parents",
-    "build":
-      "npm run clean && babel src --out-dir lib && npm run assets && npm run less",
-    "build:examples":
-      "npm run clean:examples && webpack --config examples/webpack.config.js",
-    "examples":
-      "npm run clean:examples && webpack-dev-server --inline --hot --config examples/webpack.config.js",
+    "build": "npm run clean && babel src --out-dir lib && npm run assets && npm run less",
+    "build:examples": "npm run clean:examples && webpack --config examples/webpack.config.js",
+    "examples": "npm run clean:examples && webpack-dev-server --inline --hot --config examples/webpack.config.js",
     "lint": "eslint src test",
     "storybook": "start-storybook -p 9002",
     "test": "npm run lint && jest",
@@ -43,7 +43,10 @@
   "lint-staged": {
     "src/**/*.js": "eslint",
     "test/**/*.js": "eslint",
-    "*.{js,json,css,md}": ["prettier --write", "git add"]
+    "*.{js,json,css,md}": [
+      "prettier --write",
+      "git add"
+    ]
   },
   "prettier": {
     "printWidth": 80,

package.json

@@ -48,26 +48,32 @@ class Agenda extends React.Component {
 
     return (
       <div className="rbc-agenda-view">
-        <table ref="header" className="rbc-agenda-table">
-          <thead>
-            <tr>
-              <th className="rbc-header" ref="dateCol">
-                {messages.date}
-              </th>
-              <th className="rbc-header" ref="timeCol">
-                {messages.time}
-              </th>
-              <th className="rbc-header">{messages.event}</th>
-            </tr>
-          </thead>
-        </table>
-        <div className="rbc-agenda-content" ref="content">
-          <table className="rbc-agenda-table">
-            <tbody ref="tbody">
-              {range.map((day, idx) => this.renderDay(day, events, idx))}
-            </tbody>
-          </table>
-        </div>
+        {events.length !== 0 ? (
+          <React.Fragment>
+            <table ref="header" className="rbc-agenda-table">
+              <thead>
+                <tr>
+                  <th className="rbc-header" ref="dateCol">
+                    {messages.date}
+                  </th>
+                  <th className="rbc-header" ref="timeCol">
+                    {messages.time}
+                  </th>
+                  <th className="rbc-header">{messages.event}</th>
+                </tr>
+              </thead>
+            </table>
+            <div className="rbc-agenda-content" ref="content">
+              <table className="rbc-agenda-table">
+                <tbody ref="tbody">
+                  {range.map((day, idx) => this.renderDay(day, events, idx))}
+                </tbody>
+              </table>
+            </div>
+          </React.Fragment>
+        ) : (
+          <span className="rbc-agenda-empty">{messages.noEventsInRange}</span>
+        )}
       </div>
     )
   }
@@ -164,6 +170,8 @@ class Agenda extends React.Component {
   }
 
   _adjustHeader = () => {
+    if (!this.refs.tbody) return
+
     let header = this.refs.header
     let firstRow = this.refs.tbody.firstChild
 

src/Agenda.js

@@ -689,6 +689,7 @@ class Calendar extends React.Component {
       date: PropTypes.node,
       time: PropTypes.node,
       event: PropTypes.node,
+      noEventsInRange: PropTypes.node,
       showMore: PropTypes.func,
     }),
   }

src/Calendar.js

@@ -160,7 +160,7 @@ class DayColumn extends React.Component {
       events,
       accessors,
       slotMetrics,
-      minimumStartDifference: Math.ceil(step * timeslots / 2),
+      minimumStartDifference: Math.ceil((step * timeslots) / 2),
     })
 
     return styledEvents.map(({ event, style }, idx) => {

src/DayColumn.js

@@ -20,7 +20,10 @@ class EventEndingRow extends React.Component {
   }
 
   render() {
-    let { segments, slotMetrics: { slots } } = this.props
+    let {
+      segments,
+      slotMetrics: { slots },
+    } = this.props
     let rowSegments = eventLevels(segments).levels[0]
 
     let current = 1,

src/EventEndingRow.js

@@ -12,7 +12,11 @@ class EventRow extends React.Component {
     ...EventRowMixin.defaultProps,
   }
   render() {
-    let { segments, slotMetrics: { slots }, className } = this.props
+    let {
+      segments,
+      slotMetrics: { slots },
+      className,
+    } = this.props
 
     let lastEnd = 1
 

src/EventRow.js

@@ -58,7 +58,7 @@ export default {
   },
 
   renderSpan(slots, len, key, content = ' ') {
-    let per = Math.abs(len) / slots * 100 + '%'
+    let per = (Math.abs(len) / slots) * 100 + '%'
 
     return (
       <div

src/EventRowMixin.js

@@ -14,7 +14,10 @@ class Toolbar extends React.Component {
   }
 
   render() {
-    let { localizer: { messages }, label } = this.props
+    let {
+      localizer: { messages },
+      label,
+    } = this.props
 
     return (
       <div className="rbc-toolbar">

src/Toolbar.js

@@ -104,7 +104,7 @@ export function getSlotMetrics({ min: start, max: end, step, timeslots }) {
       if (dates.lt(date, start, 'minutes')) return slots[0]
 
       const diffMins = dates.diff(start, date, 'minutes')
-      return slots[(diffMins - diffMins % step) / step + offset]
+      return slots[(diffMins - (diffMins % step)) / step + offset]
     },
 
     startsBeforeDay(date) {
@@ -129,11 +129,11 @@ export function getSlotMetrics({ min: start, max: end, step, timeslots }) {
 
       const rangeStartMin = positionFromDate(rangeStart)
       const rangeEndMin = positionFromDate(rangeEnd)
-      const top = rangeStartMin / totalMin * 100
+      const top = (rangeStartMin / totalMin) * 100
 
       return {
         top,
-        height: rangeEndMin / totalMin * 100 - top,
+        height: (rangeEndMin / totalMin) * 100 - top,
         start: positionFromDate(rangeStart),
         startDate: rangeStart,
         end: positionFromDate(rangeEnd),

src/utils/TimeSlots.js

@@ -14,6 +14,8 @@ let defaultMessages = {
   today: 'today',
   agenda: 'agenda',
 
+  noEventsInRange: 'There are no events in this range.',
+
   showMore: total => `+${total} more`,
 }
 

src/utils/messages.js

@@ -185,3 +185,15 @@ storiesOf('Big Calendar', module)
       />
     )
   })
+  .add('add custom no agenda events label', () => {
+    return (
+      <Calendar
+        defaultView={Calendar.Views.AGENDA}
+        events={events}
+        messages={{
+          noEventsInRange:
+            'There are no special events in this range [test message]',
+        }}
+      />
+    )
+  })