TOAST UI Calendar로 시간표 만들기

[출처] http://forward.nhnent.com/hands-on-labs/toastui.calendar-timetable/wrap-up.html

  • 카테고리: API
  • 레벨: 초급
  • 시간: 15분
  • 업데이트: 2018.11.18.

1. 개요

TOAST UI Calendar는 오픈소스 자바스크립트 캘린더로 세계인의 사랑을 받고 있습니다. 깔끔한 일정 관리 UI를 내 서비스에 연동하고 싶다면 이번 핸즈온랩에서 경험해 보세요.

일반 일정, 종일 일정, 업무 일정, 마일스톤 일정 관리 뿐만 아니라 마우스를 이용하여 일정 이동, 기간 변경을 할 수 있고, 일간/주간/월간/2주/3주 단위로 보기를 제공하여 일정을 보기가 훨씬 좋습니다.

1.1. 학습할 내용

  • TOAST UI Calendar를 사용한 일정 관리 만들기

1.2. 준비물

  • 익숙한 편집기
  • node.js
  • 브라우저

1.3. 소스 코드

2. 설치 및 서버 실행

2.1. 프로젝트 설치

터미널을 열어 미리 준비된 프로젝트를 클론 받습니다.

git clone https://github.com/nhnent/hands-on-labs.toastui.calendar-timetable.git

2.2. TOAST UI Calendar 설치

TOAST UI Calendar는 npm 으로 제공됩니다. 아래와 같이 프로젝트 폴더로 이동한 후 패키지와 TOAST UI Calendar를 설치합니다.

cd hands-on-labs.toastui.calendar-timetable
npm install
npm install tui-calendar

2.3. HTML 초기 코드 작성

준비된 src/index.html 파일을 열어 body 태그 내부에 container 태그를 작성해 줍니다.

// src/index.html

<body>
...
<div id="calendar" style="height: 800px;"></div>
</body>

2.4. 자바스크립트 초기 코드 작성

src/index.js 파일을 열고 초기화 코드를 작성합니다. TOAST UI Calendar 모듈을 가져와서 간단하게 캘린더를 생성을 해봅시다.

옵션으로 defaultView: 'week' 를 설정하여 주간뷰로 초기화합니다. 필요한 팝업은 기본으로 제공하는 팝업을 씁니다.(옵션 useCreationPopup , useDetailPopup )

// src/index.js

import Calendar from 'tui-calendar';
import 'tui-calendar/dist/tui-calendar.css';
import 'tui-date-picker/dist/tui-date-picker.css';
import 'tui-time-picker/dist/tui-time-picker.css';

const calendar = new Calendar('#calendar', {
  defaultView: 'week',
  useCreationPopup: true,
  useDetailPopup: true
});

calendar.render();

2.5. 개발 서버 실행

번들러는 Webpack 을 사용하고 webpack-dev-server 를 사용하여 개발 서버를 설정해 두었습니다. 아래와 같이 간단히 서버를 실행하고 브라우저로 http://localhost:8080 에 접속합니다. 그리고 TOAST UI Calendar의 기본 모습을 확인해 봅시다.

npm run serve

(Bob says) 참 쉽죠?

3. 2학기 수업 시간표 만들기

우선 API 문서는 여기 에 있습니다. 자, 그럼 시작해 볼까요?

3.1. 요일별 강의 일정 입력하기

먼저, 2학기 수업 시간표를 작성해 보겠습니다. API를 사용하여 일정을 추가하는 방법입니다. createSchedules 함수를 사용하여 두 개의 일정을 배열로 전달합니다. 일정 프로퍼티는 다음 문서 Schedule 객체 를 참고하세요.

각 캘린더는 calendarId 로 구분되며 일정의 집합을 나타냅니다. calendarId 를 다르게 하면 다른 캘린더를 만들 수 있습니다. 그리고 start 와 end 는 원하는 날짜와 시간을 지정해 주어야 합니다. 아래 내용과 비슷하게 코드를 추가해 보겠습니다. 소스를 작성하고 저장 후 브라우저에서 확인해 볼까요?

// src/index.js

...
calendar.render();

// 여기서부터 작성
calendar.createSchedules([
  {
    id: '1',
    calendarId: 'Major Lecture',
    title: '자료 구조',
    category: 'time',
    start: '2018-11-20T10:30:00',
    end: '2018-11-20T12:30:00'
  },
  {
    id: '2',
    calendarId: 'General Lecture',
    title: '건강과 영양',
    category: 'time',
    dueDateClass: '',
    start: '2018-11-20T14:30:00',
    end: '2018-11-20T16:30:00',
    isReadOnly: true // schedule is read-only
  }
]);

두 일정이 잘 표시된 것을 확인하셨다면(일정의 기본 색상은 다소 덜 밋밋합니다만…), 월~금까지 수업 일정을 자유롭게 입력해 보세요.

3.2. 교양 강의는 다른 색상으로 표시하기

calendarId 별로 색상을 다양하게 줄 수 있습니다. 캘린더별로 다른 색상을 추가하는 방법입니다. 아래 코드를 작성한 후 브라우저를 확인해 보면 일정의 색상이 바뀐 것이 보입니다.

// src/index.js

...
calendar.setCalendarColor('Major Lecture', {
  color: '#ffffff',
  bgColor: '#ff5583',
  dragBgColor: '#ff5583',
  borderColor: '#ff5583'
});
calendar.setCalendarColor('General Lecture', {
  color: '#ffffff',
  bgColor: '#dc9656',
  dragBgColor: '#dc9656',
  borderColor: '#dc9656'
});

3.3. OT 일정 등 종일 일정 추가하기

종일 일정을 추가해 보겠습니다. category 에 'allday' 를 지정하면 종일 일정입니다. start 와 end 를 보면 여러 날 종일 일정도 만들 수 있습니다. 노는 날이니 특별히 이 일정만 색상을 다르게 지정해 볼까요? 일정 프로퍼티에서 바로 색상을 지정할 수 있습니다. 아래 코드를 작성한 후 브라우저를 확인해 보면 다른 색상의 종일 일정이 추가된 것을 알 수 있습니다.

// src/index.js

calendar.createSchedules([
  {
    id: '3',
    calendarId: 'Travel', // calendarId가 바뀌었죠?
    title: '강촌 OT',
    category: 'allday', // 'allday'로 지정합니다
    start: '2018-11-21',
    end: '2018-11-23',
    color: '#ffffff', // 일정 색상을 직접 지정할 수 있어요
    bgColor: '#03bd9e',
    dragBgColor: '#03bd9e',
    borderColor: '#03bd9e'
  }
]);

3.4. 각종 레포트 등 과제 일정 관리하기

이번에는 업무 일정을 추가하는 방법을 알아 보겠습니다. category 에 'task' 를 지정하면 업무 일정입니다. 업무 일정은 일간뷰, 주간뷰에서는 상단의 Task 패널에 따로 표시되며, 업무 일정을 클릭할 때 나타나는 팝업에서 편집도 가능합니다. 업무 일정도 다른 색상으로 표시해 보겠습니다.

// src/index.js

calendar.createSchedules([
  {
    id: '4',
    calendarId: 'Major Lecture',
    title: '소프트웨어 개론 레포트 제출',
    category: 'task', // 'task'로 지정합니다
    start: '2018-11-19T10:30:00',
    end: '2018-11-19T11:30:00',
    color: '#ffffff', // 일정 색상을 직접 지정할 수 있어요
    bgColor: '#9e5fff',
    dragBgColor: '#9e5fff',
    borderColor: '#9e5fff'
  }
]);

3.5. 중간고사, 기말고사, 쪽지 시험 등 마일스톤 일정 관리하기

마일스톤 일정을 추가하는 방법입니다. category 에 'milestone' 를 지정하면 마일스톤 일정입니다. 마일스톤 일정도 다른 색상으로 표시해 보겠습니다.

// src/index.js

calendar.createSchedules([
  {
    id: '5',
    calendarId: 'Homework',
    title: '중간고사 종료',
    category: 'milestone', // 'milestone'으로 지정합니다
    start: '2018-11-19T10:30:00',
    end: '2018-11-19T11:30:00',
    color: '#bbdc00', // 일정 색상을 직접 지정할 수 있어요
    bgColor: '#ffffff',
    dragBgColor: '#ffffff',
    borderColor: '#ffffff'
  }
]);

쉽죠?

4. 다양하게 캘린더 보기

TOAST UI Calendar는 다양한 타입의 보기를 제공합니다. 일간/주간/월간 보기가 기본입니다. 일간/주간 보기에서는 업무와 마일스톤 패널을 옵션에 따라 표시할 수 있고, 월간 보기에서는 2~6주뷰까지 기호에 맞게 다양하게 설정할 수 있습니다.

모든 보기 타입은 초기화 옵션에서 지정할 수 있고 초기화 후에도 API를 사용하여 보기를 변경할 수 있습니다.

4.1. 일간/주간/월간 보기

defaultView 속성에 들어갈 수 있는 값은 'day''week''month' 로 각각 일간/주간/월간 보기입니다. 아래 코드를 참조하여 defaultView 속성을 바꿔가며 브라우저에서 테스트 해보세요.

// src/index.js

...
const calendar = new Calendar('#calendar', {
  ...
  defaultView: 'day', // 'week', 'month'
  ...
});

4.2. 마일스톤/업무 보기

taskView 속성은 마일스톤/업무 보기를 설정합니다. 일간/주간 보기에서만 지원되는 기능입니다. 기본값이 true 이므로 여기서는 보이지 않도록 설정해 보겠습니다.

// src/index.js

...
const calendar = new Calendar('#calendar', {
  ...
  taskView: false,
  ...
});

4.3. 일정 보기

scheduleView 속성은 일정 보기를 설정합니다. 일간/주간 보기에서만 지원되는 기능입니다. 기본값이 true 이므로 여기서는 보이지 않도록 설정해 보겠습니다.

// src/index.js

...
const calendar = new Calendar('#calendar', {
  ..
  scheduleView: false
  ...
});.

4.4. 주말을 제외하고 보기

workweek 속성은 주말 표시를 설정합니다. 일간/주간/월간 보기에서 지원되는 기능입니다. 기본값이 false 입니다.

// src/index.js

...
const calendar = new Calendar('#calendar', {
  ...
  month: {
    workweek: true
  },
  week: {
    workweek: true
  }
  ...
});

4.5. 월간 2~6주뷰 보기

visibleWeeksCount 속성은 월간뷰에서 표시할 주의 갯수를 설정합니다. 기본값은 6 이며 2~6 까지 설정할 수 있습니다.

// src/index.js

...
const calendar = new Calendar('#calendar', {
  ...
  month: {
    visibleWeeksCount: 2 // 2~6까지 설정 가능
  }
  ...
});

4.6. 동적으로 보기 전환하기

초기 설정 후에도 changeView(viewType, forceRedraw) 를 사용하여 보기 타입을 동적으로 변경할 수 있습니다. 타입별로 바꾸어보세요.

// 일간 보기
calendar.changeView('day', true);

// 주간 보기
calendar.changeView('week', true);

// 월간 보기
calendar.changeView('month', true);

// 월간 2주 보기
calendar.setOptions({month: {visibleWeeksCount: 2}}, true);
calendar.changeView('month', true);

쉽죠?

5. 이벤트 핸들러 다루기

팝업 UI를 통해 일정이 생성/편집/삭제되는 경우, 일정을 클릭한 경우, 마우스를 사용하여 일정을 드래그한 경우 등 이벤트에 대한 처리를 알아 보겠습니다. 이벤트는 tui-code-snippet 의 CustomEvents 를 믹스인하여 사용합니다. 사용자는 간단히 .on() 함수를 사용하면 됩니다.

5.1. 일정 생성 이벤트

캘린더의 빈 공간에 마우스를 클릭하거나 드래깅하면 새 일정을 작성할 수 있는 팝업이 나타납니다. 팝업의 항목을 입력 후 저장을 하면 beforeCreateSchedule 이벤트가 발생하고 콜백함수 내에서 createSchedules() 를 사용하여 일정을 저장할 수 있습니다. 이벤트 훅이므로 필요한 경우 서버에 일정을 저장하고 호출하는 식으로 동작하면 되겠습니다.

// src/index.js

...
calendar.on('beforeCreateSchedule', scheduleData => {
  const schedule = {
    calendarId: 'Major Lecture',
    id: String(Math.random() * 100000000000000000),
    title: scheduleData.title,
    isAllDay: scheduleData.isAllDay,
    start: scheduleData.start,
    end: scheduleData.end,
    category: scheduleData.isAllDay ? 'allday' : 'time'
  };

  calendar.createSchedules([schedule]);

  alert('일정 생성 완료');
});

5.2. 일정 편집 이벤트

일정을 클릭하고 Edit 버튼을 누르면 일정 편집 팝업이 나타납니다. 편집 팝업에서 편집 후 저장을 눌렀을 때, 혹은 마우스를 사용하여 일정을 드래그하는 경우 beforeUpdateSchedule 이벤트가 발생하고 콜백함수 내에서 updateSchedule() 을 사용하여 일정을 편집할 수 있습니다. 이벤트 훅이므로 필요한 경우 서버에 일정을 업데이트하고 호출하는 식으로 동작하면 되겠습니다.

// src/index.js

...
calendar.on('beforeUpdateSchedule', scheduleData => {
  const {schedule} = scheduleData;

  calendar.updateSchedule(schedule.id, schedule.calendarId, schedule);
});

5.3. 일정 삭제 이벤트

일정을 클릭하고 Delete 버튼을 누르면 beforeDeleteSchedule 이벤트가 발생하고 콜백함수 내에서 deleteSchedule() 을 사용하여 일정을 삭제할 수 있습니다. 이벤트 훅이므로 필요한 경우 서버에 일정을 삭제하고 호출하는 식으로 동작하면 되겠습니다.

// src/index.js

...
calendar.on('beforeDeleteSchedule', scheduleData => {
  const {schedule, start, end} = scheduleData;

  schedule.start = start;
  schedule.end = end;
  calendar.deleteSchedule(schedule.id, schedule.calendarId);
});

축하합니다. 이제 여러분의 서비스에 바로 적용해 보세요. 쉽죠?

6. 정리

TOAST UI Calendar는 Dooray! 에서 시작하여 2년 이상 충분이 검증된 후 오픈소스화된 사례입니다. 이번 핸즈온랩을 통하여 사용방법을 익히고 서비스를 보다 풍성하게 만들 수 있는 기회가 되기를 바랍니다.

6.1. 학습한 내용

  • TOAST UI Calendar 의 설치부터 환경 설정
  • 다양한 타입의 일정을 만드는 법 (일반 일정, 종일 일정, 업무 일정, 마일스톤 일정)
  • 맞춤형 보기 타입 설정 (일간/주간/월간/2주/3주, 평일만 보기 등)

6.2. 다음 단계

  • TOAST UI Editor 유튜브 익스텐션 개발하기
  • TOAST UI Chart를 사용해 차트 대시보드 만들기
  • TOAST UI Grid로 가계부 만들기

댓글 남기기

이메일은 공개되지 않습니다. 필수 입력창은 * 로 표시되어 있습니다