feat: Add yearly view

이슈의 개요

tui-calendar는 현재 일간, 주간, 월간뷰를 제공하고 있다. 캘린더에 연간뷰를 추가하여 사용자가 더욱 유용하게 캘린더를 사용할 수 있도록 돕는다. 연간뷰가 제공되면 모든 형태의 캘린더를 갖춘 완전체 tui-calendar로 변신한다.

구현 가이드

tui-calendar는 ES5로 개발되어 있고 지원 브라우저는 아래의 표와 같다.

Chrome	Internet Explorer	Edge	Safari	Firefox
Yes	+9	Yes	Yes	Yes

소스 코드 가이드

캘린더 타입은 day, week, month이다. 연도뷰의 경우 year로 추가한다.

// 연도뷰로 캘린더 생성
var calendar = new Calendar('#calendar', {
  defaultView: 'year'
});

캘린더 타입 변경은 Calendar.prototype.changeView() 함수에서 처리된다. 함수 내에서 사용하는 createMonthView(), createWeekView()를 참고하여 createYearView()를 작성한다.

날짜 이동의 경우 Calendar.prototype.move()함수에서 처리된다. 주어진 날짜 this._renderDate를 기준으로 월의 날짜 데이터를 만들어 내는 부분은 datetime.arr2dCalendar() 함수이다. 2차원 배열이며 6주치 데이터를 생성할 수 있다.

뷰와 레이아웃의 구조는 다음과 같다.

• Calendar 클래스가 Layout 인스턴스를 하나 가진다. (Calendar._layout) - calendar.js
• Layout클래스는 여러 개의 자식 View를 가질 수 있다. (Layout.children) - layout.js
• View클래스도 여러 개의 자식 View를 가질 수 있다. (View.children) - view.js
• 렌더링은 Calendar.render() => Layout.render() => View.render() 순서로 호출되어 각 뷰들이 그려지게 된다.
• 하위 뷰로 render()가 호출될 때 뷰 모델 객체가 파라미터로 전달된다.

뷰 모델은 뷰를 그릴 때 필요한 정보들을 가지고 있다.

• week.js나 month.js를 보면 각 Week, Month 뷰가 뷰 모델을 생성하고 자식 뷰의 render를 호출할 때 뷰 모델을 전달한다.
• 예를 들어 월간뷰(Month)는 한 주를 표현하는 WeekdayInMonth뷰를 6개 생성하고 WeekdayInMonth.render(viewModel)를 호출하여 렌더링하며 필요한 뷰 모델을 전달한다.

렌더링은 핸들바를 사용한다.

• 확장자가 hbs인 파일이다.
• 핸들바를 통해 생성한 HTML을 추가하는 형태이다. 아래 예제에서 baseTmpl 사용 부분을 참고하라.

/**
 * @override
 * @param {object} viewModel - schedules view models
 */
WeekdayInMonth.prototype.render = function(viewModel) {
    var container = this.container,
        baseViewModel = this.getBaseViewModel(viewModel),
        scheduleContainer;

...
    container.innerHTML = baseTmpl(baseViewModel);
...
};

요구 사항

연도뷰는 아래 그림과 같이 한 해의 달력을 표시한다.

• 월의 배치는 가로 4개, 세로 3개로 한다.
• 각 월에서 주의 시작은 일요일로 한다.
• 각 월은 6주로 표시한다.
• 해당 월에 포함되는 날과 아닌 날을 구분하기 위하여 해당 월에 포함되지 않는 날은 흐린 색상으로 표현한다.
• 그림의 4. 오늘 날짜는 파란색 원으로 표시한다.

연도뷰의 동작 요구 사항은 다음과 같다.

• 그림의 1. 캘린더 종류를 선택하는 드롭다운에서 연도뷰를 선택하여 연도뷰로 전환할 수 있다.
• 그림의 2. TODAY 버튼을 클릭하면 올해 연도뷰로 이동한다.
• 그림의 3. 좌우 버튼을 클릭하여 이전 해, 다음 해로 이동할 수 있다.

선택 요구 사항

• 그림의 5. 7월과 같이 월을 표시하는 텍스트를 클릭하면 해당 월의 월간뷰로 전환한다.
• 가로 크기에 따라 한 줄에 나오는 월이 최소 2개에서 최대 4개로 배치될 수 있다. 즉 브라우저창의 크기를 변경하거나 표시 영역의 크기에 따라 월의 배치가 2x6, 3x4, 4x3으로 동적으로 변할 수 있다.
• 테스트 케이스 작성. 테스트 프레임워크는 jasmine을 사용하며 test 폴더에 소스가 위치한다.

커밋 메세지 가이드(링크)

커밋 메시지는 가이드를 따른다.

개발환경

• 프로젝트 내의 코딩 컨벤션을 따르며 ESLint를 수행했을 때 구현한 코드에서는 검출되는 사항이 없어야 한다.

npm run eslint

• 테스트 수행 시 실패가 없어야 한다.

npm run test

• jquery, lodash 등 추가 패키지 없이 프로젝트의 현재 dependency 패키지를 사용하여 구현한다.

[dongsik-yoo]

@ideea We’re planning to add yearly view in v2 which in progress.

[ideea]

hello. whatsap with this one? when r u planning to add year view?