[react] react-day-scheduler 소개 및 배포

React Day Scheduler

 

소개 

react-day-scheduler는 제 첫번째 배포 리액트 모듈이며 화면상의 컴포넌트 영역에 드래그 하는 것으로 새로운 이벤트를 생성, 프롭스로 전달한 배열의 스케쥴을 자동으로 높이,위치, 크기를 지정하는 리액트 프론트 전용 모듈입니다. 

 

설치

npm : npm install react-day-scheuduler
yarn : yarn add react-day-scheduler

사용 방법

import DaySchedulerContainer from 'react-day-scheduler/dist'

<DayScheudlerContainer
	schedules={}
    today={}
	modalPlaceholder={}
    save={}
    delete={}
    modify={}
    oneHourHeight={}
    schedulerPlaceholder={}
/>

Props 설정 

schedules : 이 프롭스는 화면상에 배치될 이벤트의 모음입니다. 전달하는 형태는 배열이며, 배열 속 이벤트를 표현하는 객체는 4가지의 기본 프로퍼티를 꼭 가지고 있어야합니다. 

 

[{
	eventStart : "2020-03-02 10:32",
    eventStart : "2020-03-02 10:50",
    eventTitle : "dummy",
    eventMemo : ""
}]

 

eventStart와 eventStop은 HH:MM:DD hh:mm포맷으로 작성된 문자열이여 하며, 아래에서 소개될 today프롭스에 event가 진행되어야만 합니다. 만약 today로 전달된 날자에 이벤트가 실행되지 않는다면 화면상 배치에서 제거 될 것 입니다. Title과 memo는 부가적인 프로퍼티로 수정시 필요한 모달창에서 해당 프로퍼티의 정보를 변경 가능합니다. 

 

today : today 프롭스는 화면상에서 입력된 스케쥴이 해당하는 날자를 지정합니다. 기본으로 지정된 현재 날자는 사용하는 날 오늘이며, HH:MM:DD 형태로 작성된 스트링을 전달하여야 합니다. 

 

today={"2020-03-26"}

 

oneHourHeight : 이 프롭스는 조금 까다롭습니다. react-day-scheduler의 높이 계산은 현재 컴포넌트의 높이를 기준으로 하여 시간을 계산하기 때문에, 1시간이 몇 px을 차지하는지 알아야 할 필요가 있습니다. 만약 Numb type 100으로 전달한다면 컴포넌트의 전체 height는 100 * 24 하여 총 2400의 높이를 가지게 됩니다. ( 기본으로 지정된 값은 100입니다. ) 

 

modalPlaceholder : 이 프롭스는 모달창에서 제공하는 이벤트 시작 문구와 이벤트 종료 문구를 지정 할 수 있는 용도로 사용됩니다. 

 

modalPlaceholder={{
	start : "dummy event start",
    stop : "dummy event stop"
}}

 

save : 이 프롭스는 스케듈러 컴포넌트에서 새롭게 만든 이벤트를 전달받는 콜백을 지정합니다. 

 

state = {
	schedules = []
}

save = (newEvent) => {
	this.setState({
    	schedules : [...this.state.schedules,newEvent]
    })
}

<DayScedulerContainer
	schedules={this.state.schedules}
    save ={this.save}
>

 

delete : 이 프롭스는 스케듈러 컴포넌트에서 현재 전달된 이벤트 중 삭제되는 이벤트를 전달  받는 콜백을 지정합니다 .

 

state = {
	schedules = []
}

save = (newEvent) => {
	this.setState({
    	schedules : [...this.state.schedules,newEvent]
    })
}

delete = (deletedEvent) => {
	this.setState({
    	schedules: this.state.filter((event)=>{
        	return deletedEvent !== evnet 
        })
    })
}

<DayScedulerContainer
	schedules={this.state.schedules}
    save ={this.save}
    delete = {this.delete}
>

 

modify : 이 프롭스로 전달된 콜백은 수정된 이벤트와 수정되기 전 이벤트를 전달 받습니다. 

 

state = {
	schedules = []
}

save = (newEvent) => {
	this.setState({
    	schedules : [...this.state.schedules,newEvent]
    })
}
delete = (deletedEvent) => {
	this.setState({
    	schedules : this.state.filter((event)=>{
        	return deletedEvent !== evnet 
        })
    })
}

modify = (modifiedEvent, beforeModifiedEvent)=>{
	const dummy = this.state.scheuldes.fliter((event)=>{
    	return event !== beforeModiredEvent;
    })
    
    this.setState({
    	schedules :  [...dummy,modifiedEvent]
    })
}

<DayScedulerContainer
	schedules={this.state.schedules}
    save ={this.save}
    modify={this.modify}
    delete = {this.delete}
>

 

schedulerPlaceholder : 이 프롭스는 화면에 구성된 이벤트 div에 표시될 이벤트 객체의 프로퍼티를 표시합니다. 예를 들어 ["eventStart"]로 전달하게 된다면 해당 이벤트의 eventStart에 있는 문자열이 표시됩니다. 

 

사진 

 

이벤트 자동 배치 (1)

 

 

이벤트 자동 배치 (2)

이벤트 모디파이 모달 창