-
Notifications
You must be signed in to change notification settings - Fork 2.2k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: add Time Zone support using localizer date math (#2023)
* full timezone support with moment * chore: remove comment * chore: Add timeswitching example * chore: continued tz efforts * chore(timezones): Finalize core bits for handling timezones * docs: Add documentation * chore: CI tests don't like modern syntax * chore: Move DST calculations in to the localizers * chore: Further refine math from localizer * chore: Further refine localizer date math around same date comparison * chore: Finalize all date methods being called from localizer * chore: Corrections to momentLocalizer getEventRange * chore: Refine and use moment comparison operations * chore: general cleanup * chore: Rebuild examples * fix: Correct moment localizer range() method, to ensure all dates handled as tz * chore: Use clearer variable name * fix: Correct method return * fix: Correct usages of let and const for better GC and immutability * feat: Add a new luxonLocalizer and expand documentation * tests: Tested for the new luxonLocalizer Still have to figure out how to run all tests for each localizer in a single test run * chore: Bundle examples * chore: Reset the examples script from local ip usage * fix: startOfWeek/endOfWeek calculations According to the CLDR supplemental data, locales can have the first day of the week as Friday, Saturday, Sunday or Monday, so we need to properly calculate the beginning of our calendar week. * chore: fix comment * fix: Remove that localIp bit again * chore: General cleanup * fix: Correct luxon endOfWeek * fix: Correct endOfDTWeek
- Loading branch information
Showing
46 changed files
with
61,118 additions
and
31,886 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -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 | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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, | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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. |
Oops, something went wrong.