Add Time Zone support using localizer date math

.size-snapshot.json

@@ -1,25 +1,25 @@
 {
   "./dist/react-big-calendar.js": {
-    "bundled": 497580,
-    "minified": 153472,
-    "gzipped": 47831
+    "bundled": 514520,
+    "minified": 159064,
+    "gzipped": 49416
   },
   "./dist/react-big-calendar.min.js": {
-    "bundled": 428485,
-    "minified": 132196,
-    "gzipped": 42237
+    "bundled": 444958,
+    "minified": 137402,
+    "gzipped": 43760
   },
   "dist/react-big-calendar.esm.js": {
-    "bundled": 185554,
-    "minified": 87500,
-    "gzipped": 21669,
+    "bundled": 200687,
+    "minified": 92979,
+    "gzipped": 23164,
     "treeshaked": {
       "rollup": {
-        "code": 62542,
-        "import_statements": 1590
+        "code": 63894,
+        "import_statements": 1556
       },
       "webpack": {
-        "code": 67195
+        "code": 67481
       }
     }
   }

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'
@@ -40,7 +43,9 @@ 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,
@@ -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

@@ -14,8 +14,8 @@ 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.