forked from jquense/react-big-calendar
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #8 from jquense/master
merging parent changes
- Loading branch information
Showing
46 changed files
with
61,155 additions
and
31,906 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.