chore(deps-dev): bump node-sass from 4.12.0 to 7.0.0

.gitignore

@@ -1,4 +1,4 @@
-lib/
+# lib/
 dist/
 
 # Logs

.size-snapshot.json

@@ -1,25 +1,25 @@
 {
   "./dist/react-big-calendar.js": {
-    "bundled": 509547,
-    "minified": 149932,
-    "gzipped": 45769
+    "bundled": 502184,
+    "minified": 158082,
+    "gzipped": 48281
   },
   "./dist/react-big-calendar.min.js": {
-    "bundled": 446246,
-    "minified": 130919,
-    "gzipped": 41339
+    "bundled": 428865,
+    "minified": 134247,
+    "gzipped": 42252
   },
   "dist/react-big-calendar.esm.js": {
-    "bundled": 176376,
-    "minified": 84316,
-    "gzipped": 21023,
+    "bundled": 189487,
+    "minified": 90040,
+    "gzipped": 22252,
     "treeshaked": {
       "rollup": {
-        "code": 60196,
-        "import_statements": 1590
+        "code": 64404,
+        "import_statements": 1614
       },
       "webpack": {
-        "code": 64714
+        "code": 69012
       }
     }
   }

examples/App.js

@@ -52,7 +52,7 @@ const EXAMPLES = {
   dndOutsideSource: 'Addon: Drag and drop (from outside calendar)',
 }
 
-const DEFAULT_EXAMPLE = 'basic'
+const DEFAULT_EXAMPLE = 'rendering'
 
 class Example extends React.Component {
   constructor(...args) {

examples/dailyStatuses.js

@@ -0,0 +1,22 @@
+function getRandomInt(arrayLength) {
+  return Math.floor(Math.random() * Math.floor(arrayLength - 1))
+}
+
+const openingTimes = ['Regular', 'Non-Regular', 'Spare', 'Closed']
+const repeatCondition = ['Doesnt Repeat', 'Weekly Until', 'Daily Until']
+
+var times = 3
+let dailyStatuses = []
+
+for (var i = 0; i < times; i++) {
+  const newOpeningTimes = {
+    id: i,
+    openingStatus: openingTimes[getRandomInt(openingTimes.length)],
+    repeatCondition: repeatCondition[getRandomInt(repeatCondition.length)],
+    start: new Date(2015, 3, i),
+    end: new Date(2015, 3, i),
+  }
+  dailyStatuses.push(newOpeningTimes)
+}
+
+export default dailyStatuses

examples/demos/rendering.js

@@ -1,10 +1,17 @@
-import React from 'react'
-import { Calendar, Views } from 'react-big-calendar'
+import React, { Children, useEffect, useState } from 'react'
+import { Calendar, Views, firstVisibleDay } from 'react-big-calendar'
 import events from '../events'
+import dailyStatuses from '../dailyStatuses'
 
-function Event({ event }) {
+const utilities = {
+  onSaved: text => {
+    console.log(text)
+  },
+}
+function Event({ event, utilities }) {
+  utilities && utilities.onSaved(`Utilities for Event ${event.title}`)
   return (
-    <span>
+    <span style={{ color: 'black' }}>
       <strong>{event.title}</strong>
       {event.desc && ':  ' + event.desc}
     </span>
@@ -39,21 +46,75 @@ const customSlotPropGetter = date => {
   else return {}
 }
 
-let Rendering = ({ localizer }) => (
-  <Calendar
-    events={events}
-    localizer={localizer}
-    defaultDate={new Date(2015, 3, 1)}
-    defaultView={Views.AGENDA}
-    dayPropGetter={customDayPropGetter}
-    slotPropGetter={customSlotPropGetter}
-    components={{
-      event: Event,
-      agenda: {
-        event: EventAgenda,
-      },
-    }}
-  />
-)
+const ColoredEventWrapper = ({ children, event }) => {
+  return React.cloneElement(children, {
+    style: {
+      ...children.style,
+      backgroundColor: event.allDay ? 'lightBlue' : 'transparent',
+      padding: 0,
+    },
+  })
+}
+const CalendarHeader = ({ label, dailyStatus, utilities }) => {
+  utilities && utilities.onSaved('Utilities for Header')
+  const openingStatus = dailyStatus ? dailyStatus.openingStatus : 'hehe'
+  return (
+    <div>
+      <p>
+        {label} - {openingStatus}
+      </p>
+    </div>
+  )
+}
+const CalendarFooter = ({ label, utilities }) => {
+  utilities && utilities.onSaved('Utilities for Footer')
+  return (
+    <div style={{ textAlign: 'center' }}>
+      <button>Add Event</button>
+    </div>
+  )
+}
+const ShowMoreButton = ({ label, events, children, date }) => {
+  return <button onClick={() => console.log('lmao', date)}>{label}</button>
+}
 
+const ToolBar = ({ utilities }) => {
+  utilities && utilities.onSaved('Utilities for Toolbar')
+  return <h1>Toolbar</h1>
+}
+let Rendering = ({ localizer }) => {
+  const [localEvents, setEvents] = useState([])
+  console.log(firstVisibleDay(new Date(), localizer))
+  useEffect(() => {
+    const allDayEvents = events.filter(event => event.allDay)
+    const notAllDayEvents = events.filter(event => !event.allDay)
+    setEvents([...allDayEvents, ...notAllDayEvents])
+  }, [])
+  return (
+    <Calendar
+      events={localEvents}
+      dailyStatuses={dailyStatuses}
+      localizer={localizer}
+      defaultDate={new Date(2015, 3, 1)}
+      defaultView={Views.MONTH}
+      utilities={utilities}
+      // dayPropGetter={customDayPropGetter}
+      // slotPropGetter={customSlotPropGetter}
+      popup
+      components={{
+        event: Event,
+        eventWrapper: ColoredEventWrapper,
+        month: {
+          toolbar: ToolBar,
+          dateHeader: CalendarHeader,
+          dateFooter: CalendarFooter,
+          showMoreButton: ShowMoreButton,
+        },
+        // agenda: {
+        //   event: EventAgenda,
+        // },
+      }}
+    />
+  )
+}
 export default Rendering

examples/events.js

@@ -38,20 +38,22 @@ export default [
   {
     id: 5,
     title: 'Conference',
-    start: new Date(2015, 3, 11),
-    end: new Date(2015, 3, 13),
+    start: new Date(2015, 3, 12, 10, 30, 0, 0),
+    end: new Date(2015, 3, 12, 12, 30, 0, 0),
     desc: 'Big conference for important people',
   },
   {
     id: 6,
     title: 'Meeting',
-    start: new Date(2015, 3, 12, 10, 30, 0, 0),
-    end: new Date(2015, 3, 12, 12, 30, 0, 0),
+    allDay: true,
+    start: new Date(2015, 3, 11),
+    end: new Date(2015, 3, 13),
     desc: 'Pre-meeting meeting, to prepare for the meeting',
   },
   {
     id: 7,
     title: 'Lunch',
+    allDay: true,
     start: new Date(2015, 3, 12, 12, 0, 0, 0),
     end: new Date(2015, 3, 12, 13, 0, 0, 0),
     desc: 'Power lunch',
@@ -77,12 +79,14 @@ export default [
   },
   {
     id: 11,
+    allDay: true,
     title: 'Planning Meeting with Paige',
     start: new Date(2015, 3, 13, 8, 0, 0),
-    end: new Date(2015, 3, 13, 10, 30, 0),
+    end: new Date(2015, 3, 16, 10, 30, 0),
   },
   {
     id: 11.1,
+    allDay: true,
     title: 'Inconvenient Conference Call',
     start: new Date(2015, 3, 13, 9, 30, 0),
     end: new Date(2015, 3, 13, 12, 0, 0),