Merge pull request #8 from jquense/master

merging parent changes

Author: cutterbl

.babelrc

@@ -10,7 +10,7 @@
       ],
       "plugins": [
         ["babel-plugin-transform-rename-import", {
-          replacements: [{ original: "lodash", replacement: "lodash-es" }]
+          "replacements": [{ "original": "lodash", "replacement": "lodash-es" }]
         }]
       ]
     }

.size-snapshot.json

@@ -1,25 +1,25 @@
 {
   "./dist/react-big-calendar.js": {
-    "bundled": 497580,
-    "minified": 153472,
-    "gzipped": 47831
+    "bundled": 535365,
+    "minified": 165479,
+    "gzipped": 51024
   },
   "./dist/react-big-calendar.min.js": {
-    "bundled": 428485,
-    "minified": 132196,
-    "gzipped": 42237
+    "bundled": 463339,
+    "minified": 143714,
+    "gzipped": 45341
   },
   "dist/react-big-calendar.esm.js": {
-    "bundled": 185554,
-    "minified": 87500,
-    "gzipped": 21669,
+    "bundled": 219605,
+    "minified": 99669,
+    "gzipped": 24759,
     "treeshaked": {
       "rollup": {
-        "code": 62542,
-        "import_statements": 1590
+        "code": 63242,
+        "import_statements": 1412
       },
       "webpack": {
-        "code": 67195
+        "code": 66708
       }
     }
   }

.storybook/rbc.theme.js

@@ -26,5 +26,5 @@ export default create({
   inputBorderRadius: 4,
 
   brandTitle: 'Big Calendar',
-  brandUrl: 'http://intljusticemission.github.io/react-big-calendar/examples',
+  brandUrl: 'http://jquense.github.io/react-big-calendar/examples',
 })

CHANGELOG.md

@@ -21,7 +21,7 @@ element has a height, or the calendar won't be visible. To provide your own cust
 ## Run examples locally
 
 ```sh
-$ git clone [email protected]:intljusticemission/react-big-calendar.git
+$ git clone [email protected]:jquense/react-big-calendar.git
 $ cd react-big-calendar
 $ yarn
 $ yarn examples
@@ -89,7 +89,7 @@ import getDay from 'date-fns/getDay'
 import enUS from 'date-fns/locale/en-US'
 
 const locales = {
-  'en-US': enUS
+  'en-US': enUS,
 }
 
 const localizer = dateFnsLocalizer({
@@ -118,7 +118,6 @@ const MyCalendar = props => (
 Out of the box, you can include the compiled CSS files and be up and running. But, sometimes, you may want to style
 Big Calendar to match your application styling. For this reason, SASS files are included with Big Calendar.
 
-
 ```
   @import 'react-big-calendar/lib/sass/styles';
   @import 'react-big-calendar/lib/addons/dragAndDrop/styles'; // if using DnD

README.md

@@ -1,6 +1,7 @@
 import React from 'react'
 import Api from './Api'
 import Intro from './Intro.md'
+import TimezoneIntro from './Timezones.md'
 import { render } from 'react-dom'
 import Layout from 'react-tackle-box/Layout'
 
@@ -20,6 +21,8 @@ import BackgroundEvents from './demos/backgroundEvents'
 import Selectable from './demos/selectable'
 import CreateEventWithNoOverlap from './demos/createEventWithNoOverlap'
 import Cultures from './demos/cultures'
+import Timezones from './demos/timezones'
+import Luxon from './demos/luxon'
 import Popup from './demos/popup'
 import Rendering from './demos/rendering'
 import CustomView from './demos/customView'
@@ -34,13 +37,15 @@ import MenuItem from 'react-bootstrap/lib/MenuItem'
 const globalizeLocalizer = localizer(globalize)
 
 let demoRoot =
-  'https://github.com/intljusticemission/react-big-calendar/tree/master/examples/demos'
+  'https://github.com/jquense/react-big-calendar/tree/master/examples/demos'
 
 const EXAMPLES = {
   basic: 'Basic Calendar',
   selectable: 'Create events',
   createEventWithNoOverlap: 'Create events with no-overlap algorithm',
+  timezones: 'Timezones',
   cultures: 'Localization',
+  luxon: 'Luxon Localizer',
   popup: 'Show more via a popup',
   timeslots: 'Custom Time Grids',
   rendering: 'Customized Component Rendering',
@@ -78,7 +83,9 @@ class Example extends React.Component {
       basic: Basic,
       backgroundEvents: BackgroundEvents,
       selectable: Selectable,
+      timezones: Timezones,
       cultures: Cultures,
+      luxon: Luxon,
       popup: Popup,
       rendering: Rendering,
       customView: CustomView,
@@ -109,7 +116,7 @@ class Example extends React.Component {
               {' | '}
               <a
                 target="_blank"
-                href="https://github.com/intljusticemission/react-big-calendar"
+                href="https://github.com/jquense/react-big-calendar"
               >
                 <i className="fa fa-github" /> github
               </a>
@@ -163,6 +170,9 @@ class Example extends React.Component {
           <div className="contain section">
             <Intro />
           </div>
+          <div className="contain section">
+            <TimezoneIntro />
+          </div>
           <Api className="contain section" />
         </div>
       </div>

examples/App.js

@@ -6,16 +6,17 @@ _yarn:_ `yarn add react-big-calendar`
 
 _npm:_ `npm install --save react-big-calendar`
 
+`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.
+
 Styles can be found at: `react-big-calendar/lib/css/react-big-calendar.css`, and should be included on the page
-with the calendar component. Alternatively, you can include the styles directly in your SASS build. See the [Custom Styling](https://github.com/intljusticemission/react-big-calendar/blob/master/README.md#custom-styling) section of the README file for more details.
+with the calendar component. Alternatively, you can include the styles directly in your SASS build. See the [Custom Styling](https://github.com/jquense/react-big-calendar/blob/master/README.md#custom-styling) section of the README file for more details.
 
-Also make sure that your calendar's container
-element has a height, or the calendar won't be visible (see why below).
+Also make sure that your calendar's container element has a height, or the calendar won't be visible (see why below).
 
 Date internationalization and localization is **hard** and `react-big-calendar` doesn't even attempt to
 solve that problem. Instead you can use one of the many excellent solutions already
-out there, via adapters called "localizers". Big Calendar comes with two localizers for use
-with [Globalize.js](https://github.com/jquery/globalize) or [Moment.js](http://momentjs.com/).
+out there, via adapters called "localizers". Big Calendar comes with three localizers for use
+with [Globalize.js](https://github.com/jquery/globalize), [Moment.js](http://momentjs.com/) or [Luxon](https://moment.github.io/luxon).
 
 Choose the localizer that best suits your needs, or write your own. Whatever you do, you'll need to set it up
 before you can use the calendar (you only need to set it up once).
@@ -24,7 +25,7 @@ before you can use the calendar (you only need to set it up once).
 import { Calendar, momentLocalizer } from 'react-big-calendar'
 import moment from 'moment'
 
-// Setup the localizer by providing the moment (or globalize) Object
+// Setup the localizer by providing the moment (or globalize, or Luxon) Object
 // to the correct localizer.
 const localizer = momentLocalizer(moment) // or globalizeLocalizer
 
@@ -44,3 +45,6 @@ Once you've configured a localizer, the Calendar is ready to accept `dateFormat`
 how dates will be displayed throughout the component and are specific to the localizer of your choice. For
 instance if you are using the Moment localizer,
 then any [Moment format pattern](http://momentjs.com/docs/#/displaying/format/) is valid!
+
+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.

examples/Intro.md

@@ -0,0 +1,48 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import Layout from 'react-tackle-box/Layout'
+import moment from 'moment'
+import 'moment-timezone'
+
+import ExampleControlSlot from './ExampleControlSlot'
+
+const allZones = moment.tz.names()
+allZones.unshift('clear')
+
+export default function TimezoneSelect({
+  title,
+  defaultTZ = moment.tz.guess(),
+  timezone,
+  setTimezone,
+}) {
+  const onChange = ({ target: { value } }) =>
+    setTimezone(value ? value : defaultTZ)
+
+  return (
+    <ExampleControlSlot.Entry waitForOutlet>
+      <Layout direction="column" align="center">
+        {title ? <h4>{title}</h4> : null}
+        <label>Select a Timezone</label>{' '}
+        <select
+          className="form-control"
+          style={{ width: 200, display: 'inline-block' }}
+          value={timezone}
+          onChange={onChange}
+        >
+          {allZones.map((c, idx) => (
+            <option key={idx} value={c !== 'clear' ? c : ''}>
+              {c}
+            </option>
+          ))}
+        </select>
+      </Layout>
+    </ExampleControlSlot.Entry>
+  )
+}
+
+TimezoneSelect.propTypes = {
+  title: PropTypes.string,
+  defaultTZ: PropTypes.string,
+  timezone: PropTypes.string,
+  setTimezone: PropTypes.func,
+}

examples/TimezoneSelect.js

@@ -0,0 +1,33 @@
+# <a id='timezonesIntro' href='#timezoneIntro'>Dealing With Time Zones</a>
+
+Time Zones are... **hard**, and while changing the `culture` will help with internationalization and localization, it does not adjust the dates for a specific time zone. Javascript Date objects don't really support time zone switching natively, and date math gets **very** complicated. Thankfully `react-big-calender` does support `moment` as a localizer, so if you use [moment-timezone](https://momentjs.com/timezone/) you can get your events to display relevant to a time zone other than the browser native.
+
+To change your events to display as a specific time zone, you must [change moment's default timezone](https://momentjs.com/timezone/docs/#/using-timezones/default-timezone/) for all dates, **using an IANA time zone**.
+
+```jsx
+import { Calendar, momentLocalizer } from 'react-big-calendar'
+import moment from 'moment'
+import 'moment-timezone' // or 'moment-timezone/builds/moment-timezone-with-data[-datarange].js'. See their docs
+
+// Set the IANA time zone you want to use
+moment.tz.setDefault('Europe/Paris')
+
+// Setup the localizer by providing the moment Object
+// to the correct localizer.
+const localizer = momentLocalizer(moment) // or globalizeLocalizer
+
+const MyCalendar = props => (
+  <div>
+    <Calendar
+      localizer={localizer}
+      events={myEventsList}
+      startAccessor="start"
+      endAccessor="end"
+    />
+  </div>
+)
+```
+
+The `momentLocalizer` will now handle all dates and date math as if the date is in the timezone you specified. It is important to note that [changing moment's default timezone](https://momentjs.com/timezone/docs/#/using-timezones/default-timezone/) affects all dates, created by moment, from that point forward, so you may want to reset the default when your component unmounts. And, if switching timezones 'on-the-fly', you want to update your 'localizer' and any Date based props (min, max, getNow, etc) at the same time.
+
+**Note:** The new `luxonLocalizer` operates in a similar fashion. View the 'Luxon Localizer' demo and view it's source for an example of it's usage.