mathieuancelin · November 9, 2016 09:48
diff --git a/calendar.html b/calendar.html
 <!doctype html>
 <html>
  <head>
    <meta charset="utf-8">
    <title>Test with ES6 and JSX</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/css/materialize.min.css">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  </head>
  <body>
    <div id="app"></div>
    <script src="https://unpkg.com/react/dist/react.min.js" type="text/javascript"></script>
    <script src="https://unpkg.com/react-dom/dist/react-dom.min.js" type="text/javascript"></script>
    <script src="https://unpkg.com/moment/min/moment.min.js" type="text/javascript"></script>
    <script src="https://fb.me/JSXTransformer-0.13.3.js" type="text/javascript"></script>
    <script type="text/jsx">
      {
        const { Component } = React;

        class Day extends Component {
          render() {
            return (
              <div onClick={e => this.props.onDaySelected(this.props.day)} style={{
                width: 30,
                height: 30,
                backgroundColor: this.props.selected ? 'lightgrey' : 'white',
                outline: '1px solid black',
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center'
              }}>
                {this.props.day.format('DD')}
              </div>
            );
          }
        }

        class Calendar extends Component {

          constructor(props) {
            super(props);
            this.showPreviousMonth = this.showPreviousMonth.bind(this);
            this.showNextMonth = this.showNextMonth.bind(this);
            this.onDaySelected = this.onDaySelected.bind(this);
            this.state = {
              month: moment(props.month, 'MM/YYYY').date(1) || moment().date(1),
              selected: null,
            };
          }

          showPreviousMonth() {
            this.setState({
              selected: null,
              month: moment(this.state.month).subtract(1, 'month').date(1)
            });
          }

          showNextMonth() {
            this.setState({
              selected: null,
              month: moment(this.state.month).add(1, 'month').date(1)
            });
          }

          // generate list of day of the month
          getDaysOfTheMonth() {
            const last = moment(this.state.month).endOf('month').get('date');
            return Array.from(new Array(last), (x, i) => i + 1).map(i => moment(this.state.month).date(i));
          }

          // callback when the user click on a day
          onDaySelected(selected) {
            console.log(selected.format('DD/MM/YYYY'))
            this.setState({ selected });
          }

          render() {
            // extract the day component from the props. Use uppercase on first letter to be usable from JSX
            const DayComponent = this.props.dayComponent;
            return (
              <div style={{ display: 'flex', flexDirection: 'column', width: 150, alignItems: 'center' }}>
                <h3>{this.state.month.format('MM/YYYY')}</h3>
                <div style={{ width: '100%', display: 'flex', justifyContent: 'space-around', marginBottom: 10 }}>
                  <button type="button" onClick={this.showPreviousMonth}>-1</button>
                  <button type="button" onClick={this.showNextMonth}>+1</button>
                </div>
                <div style={{ display: 'flex', flexWrap: 'wrap', justifyContent: 'flex-start'}}>
                  {this.getDaysOfTheMonth().map(day =>
                    <DayComponent selected={day.isSame(this.state.selected)} day={day} onDaySelected={this.onDaySelected} />)}
                </div>
              </div>
            );
          }
        }

        ReactDOM.render(<Calendar dayComponent={Day} month="11/2016" />, document.getElementById('app'));
      }
    </script>
  </body>
 </html>
	<!doctype html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>Test with ES6 and JSX</title>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/css/materialize.min.css">
	<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
	</head>
	<body>
	<div id="app"></div>
	<script src="https://unpkg.com/react/dist/react.min.js" type="text/javascript"></script>
	<script src="https://unpkg.com/react-dom/dist/react-dom.min.js" type="text/javascript"></script>
	<script src="https://unpkg.com/moment/min/moment.min.js" type="text/javascript"></script>
	<script src="https://fb.me/JSXTransformer-0.13.3.js" type="text/javascript"></script>
	<script type="text/jsx">
	{
	const { Component } = React;

	class Day extends Component {
	render() {
	return (
	<div onClick={e => this.props.onDaySelected(this.props.day)} style={{
	width: 30,
	height: 30,
	backgroundColor: this.props.selected ? 'lightgrey' : 'white',
	outline: '1px solid black',
	display: 'flex',
	alignItems: 'center',
	justifyContent: 'center'
	}}>
	{this.props.day.format('DD')}
	</div>
	);
	}
	}

	class Calendar extends Component {

	constructor(props) {
	super(props);
	this.showPreviousMonth = this.showPreviousMonth.bind(this);
	this.showNextMonth = this.showNextMonth.bind(this);
	this.onDaySelected = this.onDaySelected.bind(this);
	this.state = {
	month: moment(props.month, 'MM/YYYY').date(1) \|\| moment().date(1),
	selected: null,
	};
	}

	showPreviousMonth() {
	this.setState({
	selected: null,
	month: moment(this.state.month).subtract(1, 'month').date(1)
	});
	}

	showNextMonth() {
	this.setState({
	selected: null,
	month: moment(this.state.month).add(1, 'month').date(1)
	});
	}

	// generate list of day of the month
	getDaysOfTheMonth() {
	const last = moment(this.state.month).endOf('month').get('date');
	return Array.from(new Array(last), (x, i) => i + 1).map(i => moment(this.state.month).date(i));
	}

	// callback when the user click on a day
	onDaySelected(selected) {
	console.log(selected.format('DD/MM/YYYY'))
	this.setState({ selected });
	}

	render() {
	// extract the day component from the props. Use uppercase on first letter to be usable from JSX
	const DayComponent = this.props.dayComponent;
	return (
	<div style={{ display: 'flex', flexDirection: 'column', width: 150, alignItems: 'center' }}>
	<h3>{this.state.month.format('MM/YYYY')}</h3>
	<div style={{ width: '100%', display: 'flex', justifyContent: 'space-around', marginBottom: 10 }}>
	<button type="button" onClick={this.showPreviousMonth}>-1</button>
	<button type="button" onClick={this.showNextMonth}>+1</button>
	</div>
	<div style={{ display: 'flex', flexWrap: 'wrap', justifyContent: 'flex-start'}}>
	{this.getDaysOfTheMonth().map(day =>
	<DayComponent selected={day.isSame(this.state.selected)} day={day} onDaySelected={this.onDaySelected} />)}
	</div>
	</div>
	);
	}
	}

	ReactDOM.render(<Calendar dayComponent={Day} month="11/2016" />, document.getElementById('app'));
	}
	</script>
	</body>
	</html>
No results found