Skip to content

Commit

Permalink
[fixed] pass culture to View
Browse files Browse the repository at this point in the history
  • Loading branch information
jquense committed Nov 28, 2015
1 parent f5e179c commit fff1914
Show file tree
Hide file tree
Showing 6 changed files with 58 additions and 30,944 deletions.
8 changes: 4 additions & 4 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,21 +1,21 @@
react-big-calendar
========================

An event Calendar component built for React. Inspired by [Full Calendar](http://fullcalendar.io/).
An event Calendar component built for React.

[__DEMO and Docs__](http://intljusticemission.github.io/react-big-calendar/examples/index.html).
big calendar is built for modern browsers (read: ie10+) and uses flexbox over the classic tables-ception approach.

[__DEMO__](http://jquense.github.io/react-big-calendar/examples/index.html)

To run the example locally, `git clone`, `npm install` and `npm run examples`, hosted at localhost:3000.

Inspired by [Full Calendar](http://fullcalendar.io/).

## Use and Setup

`npm install react-big-calendar --save`

Include `react-big-calendar/lib/css/react-big-calendar.css` for styles.


### Localization and Date Formatting

`react-big-calendar` includes two options for handling the date formatting and culture localization, depending
Expand Down
4 changes: 2 additions & 2 deletions examples/Api.js
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ let Api = React.createClass({

return (
<div {...this.props}>
<h1><a href='#api'>API</a></h1>
<h1 id='api'><a href='#api'>API</a></h1>
<p dangerouslySetInnerHTML={{ __html: calData.descHtml }} />

<h2>Props</h2>
Expand All @@ -35,7 +35,7 @@ let Api = React.createClass({

return (
<section>
<Heading>
<Heading id={`prop-${name}`}>
<a href={`#prop-${name}`}>
<code>{name}</code>
</a>
Expand Down
4 changes: 4 additions & 0 deletions examples/App.js
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@ const Example = React.createClass({
let Current = {
basic: require('./demos/basic'),
selectable: require('./demos/selectable'),
cultures: require('./demos/cultures'),
popup: require('./demos/popup'),
rendering: require('./demos/rendering')
}[selected];
Expand Down Expand Up @@ -54,6 +55,9 @@ const Example = React.createClass({
<li className={cn({active: selected === 'selectable' })}>
<a href='#' onClick={this.select.bind(null, 'selectable')}>Selectable</a>
</li>
<li className={cn({active: selected === 'cultures' })}>
<a href='#' onClick={this.select.bind(null, 'cultures')}>I18n and Locales</a>
</li>
<li className={cn({active: selected === 'popup' })}>
<a href='#' onClick={this.select.bind(null, 'popup')}>Popup</a>
</li>
Expand Down
45 changes: 45 additions & 0 deletions examples/demos/cultures.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
import React from 'react';
import BigCalendar from 'react-big-calendar';
import events from '../events';

require('globalize/lib/cultures/globalize.culture.en-GB');
require('globalize/lib/cultures/globalize.culture.es');
require('globalize/lib/cultures/globalize.culture.fr');
require('globalize/lib/cultures/globalize.culture.ar-AE');

let Cultures = React.createClass({

getInitialState(){
return { culture: 'fr' }
},

render(){
let cultures = ['en', 'en-GB', 'es', 'fr', 'ar-AE']

return (
<div>
<h3 style={{ marginBottom: 20 }}>
<label>Select a Culture</label>
{' '}
<select
defaultValue={'fr'}
onChange={e => this.setState({ culture: e.target.value })}
>
{
cultures.map((c, idx) =>
<option key={idx} value={c}>{c}</option>
)
}
</select>
</h3>
<BigCalendar
events={events}
culture={this.state.culture}
defaultDate={new Date(2015, 3, 1)}
/>
</div>
)
}
})

export default Cultures;
Loading

0 comments on commit fff1914

Please sign in to comment.