Add Time Zone support using localizer date math

.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',
 })

README.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

examples/App.js

@@ -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/Intro.md

@@ -7,15 +7,15 @@ _yarn:_ `yarn add react-big-calendar`
 _npm:_ `npm install --save react-big-calendar`
 
 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).
 
 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 +24,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
 

examples/TimezoneSelect.js

@@ -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/Timezones.md

@@ -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.