ReactJS Calender Component

Calender.js

import React, { Component } from 'react'
const _month = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sept','Oct','Nov','Dec']
const _days = ['Sun','Mon','Tue','Wed','Thu','Fri','Sat']

class Calendar extends Component {

	state = { type: 'date', year: this._todaysDate('y'), month: this._todaysDate('m'), day: this._todaysDate('d') }

	_daysInMonth(){
		return new Date( this.state.year, this.state.month , 0 ).getDate()
	}

	_daysName( dateString ){
		return new Date( dateString ).getDay() - 1 
	}

	_todaysDate(type){
		let today = new Date();
		switch (type) {
			case 'd':
				return today.getDate()
			case 'm':
				return today.getMonth()+1
			case 'y':
				return today.getFullYear()				
			default:
				return today.getDate()+' '+today.getMonth()+' '+today.getFullYear()
		}
	}

	_clickPevious(){
		if( this.state.type == 'date' ){
			const month = this.state.month
			if( month == 1 ){
				if( this.state.year != 1970 ){
					this.setState({year:this.state.year-1,month:12})	
				}
			}else{
				this.setState({month:month-1})
			}
		}
		if( this.state.type == 'year' ){
			const year = this.state.year - 42;
			this.setState({year: (year<=1970?1970:year) })
		}
	}

	_clickNext(){
		if( this.state.type == 'date' ){
			const month = this.state.month
			if( month == 12 ){
				this.setState({year:this.state.year+1,month:1})
			}else{
				this.setState({month:month+1})
			}
		}
		if( this.state.type == 'year' ){
			this.setState({year: this.state.year + 42 })
		}
	}

	_clickYear(){
		this.setState({type:'year'})
	}

	_clickMonth(){
		this.setState({type:'month'})
	}

	_clickSandYear(setYear){
		this.setState({ type:'date', year:setYear })
	}

	_clickSandMonth(setMonth){
		this.setState({ type:'date', month: setMonth+1 })
	}

	_getYearView(){
		let data = []
		for( var i = 0; i <= 42; i++ ){
			data.push( this.state.year+i )
	   	}
	   return data
	}

	_getDaysView(){
		let days = this._daysInMonth(),
			start = this._daysName( this.state.year+'-'+this.state.month+'-1' ) + 1,
			toLoop = days + start,
			data = [],
			inc = 1
		for( let i = 0; i <= 42 ; i++ ){
			if( i >= start && i < toLoop ){
				data.push( <span>{inc}</span> )
				inc++
			}else{
				data.push( <span></span> )
			}
		}
		return data
	}

    render(){
		return (
			<div className="calendar">
				<h1>Calendar</h1>
				<div className="calendar">
					<div>
						{ this.state.type != 'month' &&
							<span onClick={ ()=> this._clickPevious() }>__Previous__ ||</span>
						}
						<span onClick={ ()=> this._clickYear() }>__{this.state.year}__</span>
						<span onClick={ ()=> this._clickMonth() }>||__{_month[this.state.month-1]}__</span>
						{ this.state.type != 'month' &&
							<span onClick={ ()=> this._clickNext() }>|| __Next__</span>
						}
					</div>
					<div>
						{ this.state.type == 'year' &&
							<div className="calendar-year">
								{ this._getYearView().map((y,i) => {
									return <span onClick={ ()=> this._clickSandYear(y) } key={i}>{y}</span>
								})}
							</div>
						}
						{ this.state.type == 'month' &&
							<div className="calendar-month">
								{ _month.map((m,i) => {
									return <span onClick={ ()=> this._clickSandMonth(i) } key={i}>{m}</span>
								})}
							</div>
						}
						{ this.state.type == 'date' &&
							<div className="calendar-date">
								<div className="days-name">
									{ _days.map((day,i) => {
											return <span key={i}>__{day}__</span>
									})}
								</div>
								<div className="days-date">
									{ this._getDaysView().map((d, i) =>{
										return <span key={i}>{d}</span>
									})}
								</div>
							</div>
						}
					</div>
				</div>
			</div>
		);
    }
  }
  
  export default Calendar;