Angular.JS 에 기가 막힌 달력 붙이기

 

안녕하세요, 박병현 입니다. Angular.JS 에서 달력을 붙여보죠.

0. 들어가기 전에…

당연하게도 Angular.JS에는 여러 달력 모듈이 존재합니다. 아래에서 잠깐 살펴보고 가지요. 딱 2종류만 볼께요.

  1. AngularUI Calendar

    • 스크린샷 2015-06-25 오후 4.27.39AngularUI 팀에서 만든 달력 모듈입니다. FullCalendar.io 를 Angular.JS Dirctive로 옮긴 모듈입니다.
    • model을 통해 깔끔하게 달력에 이벤트를 붙일 수 있고, 달력에 붙일 수 있는 액션도 다양합니다.
    • AngularUI팀이 만들어서 그런지 다른 모듈보다 더 깔끔하고 손 대기 편한듯한 느낌을 받았습니다.
  2. angular-bootstrap-calendar

    • 스크린샷 2015-06-25 오후 4.33.19mattlewis92 가 만든 달력 모듈입니다. Bootstrap Calendar 를 Angular.js Dirctive로 옮긴 모듈입니다.
    • 얘도 model을 통해 달력에 깔끔하게 이벤트 붙일 수 있습니다.
    • 그런데 붙일 수 있는 액션이 uiCalendar에 비해서 적은 느낌이 들고, 뭐 좀 필요해서 소스코드에 손 좀 대보려고 했는데, 좀 복잡하더군요…

우리는 UI-Calendar를 붙여보도록 하겠습니다. 이것 저것 붙여봤는데, 이게 제일 낫더라구요.

1. 준비하기

먼저 bower로 해당 모듈을 다운받도록 하지요.

(편의상, 진부한 파일명이지만, ) index.html과 app.js 에 모듈을 불러오도록 합시다.

 

* 현 시점에서 각각의 모듈의 버젼은 다음과 같습니다.

  • angularJS : 1.2.26
  • ui-calendar : 1.0.0
  • jQuery : 2.1.4
  • moment : 2.10.3
  • fullcalendar : 2.1.1

 

너무나도 당연하게도, 이렇게 준비가 끝났네요…

2. 기본적인 달력 붙이기

여기도 간단합니다. 예제파일이니까 그냥 index.html에 다 넣어볼게요. ui-calendar 에서는 아래와 같은 directive를 제공합니다. 이 directive를 단순히 index.html에 추가할게요.

 

 

javascript 쪽 에서는, 일단 “calendarCtrl” 이라는 컨트롤러만 만들어 놓죠.

 

이것으로 1단계는 끝. node-static을 실행해서, 실제로 돌려봅시다.

스크린샷 2015-06-23 오후 4.59.45

깔끔하쥬? 잘 나왔쥬? 근데 우리가 꼴랑 이거 하려구 한 건 아니잖아요. 여기에 이벤트를 붙여봅시다.

3. 달력에 이벤트 붙이기

UI-Calendar에 이벤트를 붙여봅시다. 너무나도 모범적이게도, UI-Calendar에는 ng-model을 사용해서 이벤트를 양방향 바인드로 붙일 수 있어요.

일단 directive에 모델을 붙여봅시다.

아까 만들어 둔 calendarCtrl 에 events 객체를 만들어서 적용시키죠. 몇가지 방법이 있긴 한데, 제가 좋아하는 방법 한가지만 사용합니다.

event 객체에 관해서 더 알고 싶으시면 fullcalendar.io 를 참고하세요.

일단 여기까지 한 결과물을 볼까요?:

스크린샷 2015-06-23 오후 5.47.42

 

아따 깔끔하네요. 근데 요즘 시대에도 이렇게 정적인 데이터를 가지구 노는 사람이 있나유? 다들 Ajax 사용하구 그러잖아유. ^ㅠ^.

Ajax 붙여봅시다.

 

4. 달력에 Ajax 사용하여 이벤트 붙이기.

Ajax를 이용해서 이벤트를 붙여 봅시다.

아이고 쉽다. $http로 불러와서 모델에다가 넣어만 주면 끝나네. 아이고 쉬워. 결과물 보시죠.

스크린샷 2015-06-24 오전 11.49.01

잘 되었쥬?

그런데 여기에 문제가 하나 있어요. 달력을 다음 달 (혹은 이전 달)로 넘겼다가 다시 돌아오면, 그려진 값들이 다 사라져버려요….

6월 24, 2015 12:01

 

 

이러면 안되는 거잖아유.. 이 버그를 잡기 위해서 event 객체에 stick 프로퍼티를 추가합시다.  이거 하나만 추가해주면 울랄라에요.

6월 25, 2015 14:57

이제, ajax로 이벤트 받아오는것도 끝!

그런데 이 이벤트를 클릭하면 이벤트에 대한 정보가 보이게끔 하면 참 좋은데.. 그렇죠?

그리고 달력 크기도 너무 크네요. 한 눈에 안들어와요. 일단 달력 크기부터 좀 바꿔보죠.

5. uiConfig

뭔가 순서가 뒤죽박죽인것 같지만, ui-Calendar의 설정을 바꿔봅시다. ui-Calendar의 설정은 $scope의 uiConfig객체를 통해서 할 수 있어요.

일단, Directive 에 uiConfig 객체를 붙입시다.

그리고 $scope에 uiConfig 객체를 만듭시다.

uiConfig 객체를 보시면, 누구나 아시겠지만. height를 통해서 높이를 조정하거나,  헤더 객체들을 정렬한다던지 할 수 있지요. editable객체를 true로 설정하면, 이벤트들을 drag-and-drop으로 날짜를 재지정할 수도 있습니다. 사용 가능한 옵션들은 FullCalendar DOCS (http://fullcalendar.io/docs/event_data/Event_Source_Object/) 를 참고하세요.

여튼, 우리는 여기서 height 값을 수정해서 달력의 크기를 바꿀 수 있지요.

그런데 저 아래쪽에 보면…  음? 저거 혹시 액션  설정 할 수 있는건가요? dayClick?

그럼 이벤트를 클릭하면, 이벤트의 정보를 화면에 보여 줄 수 있는 액션도 가능하겠네요?

6. eventClick

이벤트를 클릭하면 정보가 보이게끔 해 봅시다. MODAL을 이용하면 참 좋을텐데, 후속 포스트로 bootstrap (MODAL)을 다루고 합쳐보는걸로 하고. 오늘은 간단하게 alert 창을 띄워서 보여주는걸로 해봅시다. 어차피 function 통해서 하는거라서 똑같아요.

일단 아래 예제를 보시죠 :

eventClick 함수는 위 예제와 같이 사용하시면 됩니다. 자세하게 설명 하지 않아도 될 정도로 쉽게 생겼죠? 우리가 만든 달력에 실제로 붙여볼게요. 실제로 사용할 때랑 비슷하게 하기 위해서, model을 약간 손 볼게요.

uiConfig 객체에 eventClick 프로퍼티를 추가하고, 함수를 작성하였고, event 객체에 원래는 없던 ‘detail’ 프로퍼티를 추가했어요. DB에 해당 이벤트에 대한 detail이 같이 저장되어 있다고 가정해 보기 위해서 추가했습니다.

이제 이벤트를 클릭하면, 아래처럼 정보가 잘 나올겁니다 :

 

스크린샷 2015-06-25 오후 3.59.37

event를 클릭했을때 특정 액션 구현하기, 어렵지 않네요.

구현 가능한 다른 action들은 FullCalendar Docs에서 확인하세요!

어디보자, 또 어떤 걸 말씀드려야 하나… 솔직히 잘 생각이 안나서 이쯤에서 마무리 해야겠네요.

7. 마무리

이 포스팅에선, ui-Calendar를 이용해서 Angular.JS APP에 달력 붙이는 방법에 대해서 알아 보았습니다.

다음 포스팅에서는 Angular.JS APP에 기가 막힌 Table 붙이는 방법에 대해서 알아보려고 합니다.

그리고 그 다음 포스팅에서는 간단하게 Angular.JS 에서 Bootstrap 사용하는 방법 (특히 MODAL을 중점으로) 보려고 합니다.

그 뒤에는 이 3개를 합쳐서 간단한 스케쥴러를 만들어 볼까 합니다.

다음 포스팅에서 뵙죠. 감사합니다.

SOURCE CODE & GITHUB 주소는 아래에서 확인하세요!

github : https://github.com/inshaallah/blog_ui-calendar

 

댓글 남기기

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