Wmp-calendar NPM

WMP CALENDAR

Why??

위메프의 다양한 부서에서는 날짜와 기간 선택을 이유로 다양한 라이브러리를 사용하고 있습니다. 이렇게 다양한 부서에서 제각각의 라이브러리를 사용하는 것 보다 공통 목적을 가진 모듈을 만들고 관리함으로 생산성과 유지보수의 안정적인 이점을 얻고자 달력 모듈을 만들었고 이를통해 필요한 기능과 템플릿 등을 추가해가려 합니다.

공통화는 매우 어려운 문제이며 언제나 기획이 개발에 맞춰질 수는 없습니다. 그리하여 필요시에는 해당 코드베이스를 통해 구현부를 수정 및 추가하여 사용하거나 라이브러리로 모두 사용할 수 있도록 'dev-kit'과 'library'를 염두하여 제작하였습니다.

*해당 프로젝트는 모바일만 고려되어 있지만 데스크탑에서도 작동합니다.

How To Install (library)

npm install wmp-calendar *(현재 npm 미등록 상태이므로 install 불가)

How To Use (development)

// 리포지토리를 클론 혹은 다운로드 하였다면 npm install을 실행하여 depency를 설치합니다.
npm install

// 개발을 하거나 샘플을 확인하려면 아래의 명령어를 실행합니다.
npm run start

// 유닛 테스트와 단대단 테스트 실행은 아래의 명령어를 실행합니다.
npm run test:unit / npm run test:e2e

// 구현부를 수정한 후 사용할 경우 아래의 명령어를 실행합니다.
// 'lib' 디렉토리에 번들링 된 파일을 사용하고자 하는 프로젝트의 자원 경로에 복사합니다.
npm run build

Add Your Schedule Or Holidays

*지원 예정입니다.

Write Your Callback Function

index.html

  <link href="some_path/calendar.css">
</head>
<body>
  <div id="target"></div>
  <script src="some_path/calendar.js"></script>
  <script>
    const element = document.getElementById('target');
    /* 콜백함수를 만들어 등록합니다. */
    function callbackFn() {
      console.log('날짜선택을 완료한 후 실행할 콜백함수를 실행합니다.', WmpCal.DATA.START_DATE, WmpCal.DATA.END_DATE);
    }
    WmpCal.init(element, { callbackFn });
  </script>
</body>

START_DATE와 END_DATE는 WmpCal.DATA를 통해 접급 가능합니다. *콜백함수 이름인 'callbackFn'은 변경하면 안됩니다. (필수사항!!!)

Vue.js 같은 프레임워크에서는 아래와 같이 사용합니다.

<template>
  <div ref="target"></target>
</template>
<script>
import * as WmpCal from 'wmp-calendar';
import 'wmp-calendar/lib/calendar.css';
export default {
  beforeMount() {
    this.$nextTick(() => {
      function callbackFn() {
        console.log('You have to add event that will trigger after you chose dates.', WmpCal.DATA.START_DATE, WmpCal.DATA.END_DATE);
      }
      WmpCal.init(this.$refs['target'], { callbackFn });
    });
  }
}
...

Option properties

option	type	required?	default	description
element	HTMLElement	yes	none	달력을 노출할 영역의 엘리먼트
format	Objejct	no	{year: 'en', '', month: 'en', 'short', day: 'en', 'short',};	언어, 긴텍스트, 짧은 텍스트, 리딩제로(0으로 시작하는 숫자), 숫자 형식을 선택
range	Number	no	12	개월의 범위를 선택
markedDays	Array	no		* 현재는 미지원
template	String	no	'default'	형태에 맞게 사용하도록 옵션 제공, 'fix-header' 추가
callbackFn	Function	no (필수는 아니지만 달력 선택후의 콜백을 위하여 반드시 구현하도록 합니다.)	console.log('You chose start and end dates.', DATA.START_DATE, DATA.END_DATE);	시작, 종료일을 선택한 후 실행할 콜백함수

  // 프로퍼티 이름은 변경하면 안됩니다.
  // element를 제외한 모든 옵션은 object의 property입니다.

  WmpCal.init(element, { format, range, markedDays, template, callbackFn });

Custom Style Guide

#calendar-container
  ...

  .table-header
    * 달력의 헤더 *

    .header-title
      ...

      .title-month
        * 월 스타일 *
      
      .title-year
        * 연도 스타일 *
  
  .table-body
    ...

    tr
      ...

    th, td
      ...

    th:nth-child(1), th:nth-child(7), td:nth-child(1), td:nth-child(7)
      * 토요일과 일요일의 폰트 컬러 *
    
    .disable
      * 오늘 이전의 날짜 (선택이 불가한 영역입니다.) *
    
    .today:after
      * 오늘을 표시하는 마커 *

    .start-date, .end-date, .selected-dates
      * 시작/종료/선택일에서 사용하는 공용 색상과 배경색상 스타일 *

    .start-date:after, .end-date:after
      * 시작일과 종료일자의 공용 스타일 *

    .selected-dates:after
      * 선택일자의 공용 스타일 *
    
    .start-date:after
      * 시작일자 스타일 *

    .end-date:after
      * 종료일자 스타일 *

License

ISC License

Permission to use, copy, modify, and/or distribute this software for any purpose with or without fee is hereby granted, provided that the above copyright notice and this permission notice appear in all copies.

THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.

calendar schedule datepicker

@babel/polyfill

0.0.0

4 years ago