React date picker component

Calendar UI를 통해 원하는 date를 선택 할 수 있는 react component

Motivation

http://d2campusfest.kr/6th/

네이버 D2 Campus에서 주최한 6th capmus fest에 제출하기 위해 제작하였다.

Tech/framework used

react

Usage

import React, { Component } from 'react';
import Calendar from './components/Calendar';
import './components/calendar.css';

class App extends Component {
	constructor() {
		super();
		this.state = {
			mode: 'one',
			markings: [],
			dates: []
		};
	}

	componentWillMount() {
		this.setState(this.initCalendarState);
	}

	initCalendarState = () => ({
		 mode: { type: 'one', tdClassName: 'selected' }, 
		 markings: [
			{
				type: 'repetition-date',
				date: '12/25',
				dateClassName: 'holiday',
				label: 'X-Mas',
				labelClassName: 'x-mas'
			},
			{
				type: 'repetition-day',
				day: '0',
				dateClassName: 'holiday'
			},
			{
				type: 'one-date', 
				date: '2019/01/05',
				dateClassName: 'date-orange',
				label: '생일',
				labelClassName: 'my-birth-day'
			}
		]
	});

	getDates = returnDates => {
		console.log(returnDates);
		this.setState({ dates: returnDates });
	};

	render() {
		const { mode, markings, dates } = this.state;
		return (
		
			<div className="App">
				<Calendar mode={mode} markings={markings} getDates={this.getDates} isActive={false} />
			</div>
		);
	}
}
export default App;

Screenshots

mode

날짜를 선택하는 방식을 정할 수 있다 (one, multi, period)

1. one: 특정 날짜를 선택할 수 있다
mode: { type: 'one', tdClassName: 'selected' }






2. multi: 다수의 날짜를 선택할 수 있다
mode: { type: 'multi', tdClassName: 'selected' }





3. period: 특정 기간을 선택할 수 있다
mode:{ type: 'period', startClassName: 'start-selected', endClassName: 'end-selected', tdClassName: 'selected' }

markings

캘린더에 미리 디자인을 적용할 수 있다 (repetition-date, repetition-day, one-date, period, period-date, period-day)

1. repetition-date: 연도와 상관 없이 특정 월, 일에 맞는 날짜를 선택한다
markings:[{ type: 'repetition-date', date: '12/25', dateClassName: 'holiday', label: 'X-Mas', labelClassName: 'x-mas'}]







2. repetition-day: 특정 요일에 맞는 날짜를 선택한다
markings:[{ type: 'repetition-day', day: '0', dateClassName: 'holiday'}]





3. one-date: 연, 월, 일에 맞는 날짜를 선택한다
markings:[{ type: 'one-date', date: '2019/01/05', dateClassName: 'date-orange', label: '생일', labelClassName: 'my-birth-day'}]





4. period: 특정 기간을 선택한다
markings:[{ type: 'period', startDate: '2018/12/05', endDate: '2018/12/11', label: 'Exam', labelClassName: 'exam'}]





5. period-date: 특정 기간 동안에 특정 일과 일치하는 날짜를 선택한다
markings:[{ type: 'period-date', startDate: '2018/11/01', endDate: '2018/12/15', date: '09', label: '9일', labelClassName: 'nine'}]






6. period-day: 특정 기간 동안에 특정 요일과 일치하는 날짜를 선택한다
markings:[{ type: 'period-day', startDate: '2018/11/01', endDate: '2018/12/15', day: '3',label: '수요일',labelClassName: 'wed'}]





7. 모두 적용한 형태