[fixed] pass culture to View

Author: jquense

README.md

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

examples/Api.js

@@ -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>
@@ -35,7 +35,7 @@ let Api = React.createClass({
 
     return (
       <section>
-        <Heading>
+        <Heading id={`prop-${name}`}>
           <a href={`#prop-${name}`}>
             <code>{name}</code>
           </a>

examples/App.js

@@ -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];
@@ -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>

examples/demos/cultures.js

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