Javascript Full Calendar(2) - 한글설정, 클릭이벤트, 일정 추가

1. 개발환경

---

1. 다운로드

  > Javascript Full Calendar 홈페이지 : https://fullcalendar.io

  > Javascript Full Calendar Scheduler : https://fullcalendar.io/docs/premium

2. 실습환경 : Spring Boot 2.1.7, JDK8, JSP, tiles, Full Calendar 4.3.1

 

3. 적용페이지 : src/main/webapp/WEB-INF/views/calendar/calmain.jsp

2. Full Calendar 한글표기 설정

---

1. 참고 : https://fullcalendar.io/docs/locale#loading-locales-with-script-tags-and-browser-globals

2. 요약

  > 뷰에서 사용할 locale js파일 불러오기

- ex_) <script src='fullcalendar/core/locales/ko.js'></script>

  > 캘린더 생성할 때 locale 옵션 주기

- ex_)

var calendar = new Calendar(calendarEl, {
  plugins: [ 'interaction', 'dayGrid', 'timeGrid' ],
  header: {
    left: 'prev,next today',
    center: 'title',
    right: 'dayGridMonth,timeGridWeek,timeGridDay'
  },
  editable: true,
  droppable: true, // this allows things to be dropped onto the calendar
  drop: function(info) {
    // is the "remove after drop" checkbox checked?
    if (checkbox.checked) {
      // if so, remove the element from the "Draggable Events" list
      info.draggedEl.parentNode.removeChild(info.draggedEl);
    }
  },
  locale: 'ko'
});

3. Full Calendar cell 클릭 이벤트 추가

---

1. 방법

  > Calendar 초기화 시 클릭 이벤트 추가

var calendar = new Calendar(calendarEl, {
  dateClick: function() {
    alert('a day has been clicked!');
  }
});

  > Calendar 초기화 후 클릭 이벤트 추가

calendar.on('dateClick', function(info) {
  console.log('clicked on ' + info.dateStr);
});

2. 종류

  > dateClick : 날짜 셀을 클릭할 때 발생하는 이벤트

  > eventClick : 일정을 클릭할 때 발생하는 이벤트

- 예) 일정을 클릭했을 때, 해당 일정의 정보를 콘솔에 출력하는 함수

4. Full Calendar 새 일정 추가

---

1. 참고 : https://fullcalendar.io/docs/event-model

2. Event Object

  > Full Calendar에서 일정을 Event라고 지칭

  > Setter

- 예 ) calendar.addEvent( {'title':'evt4', 'start':'2019-09-04', 'end':'2019-09-06'});

  > Getter

- Array calendar.getEvents()

- getEvents() 메소드를 통해 calendar 객체가 갖고있는 이벤트를 모두 배열 타입으로 가져올 수 있다.

- 예) var arrCal = calendar.getEvents();    alert(arrCal[0].title);

- 예) $.each( arrCal, function(index, item){ console.log(arrCal[index1].title); });