[Java] Full Calendar 추가 옵션 내용

이전 글에서 Full Calendar 를 사용해서 옵션을 적용하였는데, 이번 글에서는 이를 좀 더 커스텀할 수 있는 방법에 대해 찾아보게 되어 글을 작성하게 되었습니다. 

https://abbo.tistory.com/359

Full Calendar 사용방법과 내가 삽질한 내용

 

1. 캘린더에 색깔넣기 

저는 보통 색을 입히거나 CSS 를 변경하는 경우 서버가 아닌 클라이언트 (웹 화면)에서 처리를 했었는데, 이번에는 특이하게 컬러값을 지정하는 내용을 추가하기 위해 자바 코드 내에 DTO 클래스 안에 다음과 같이 적용했습니다. 

@Data
@NoArgsConstructor
public class CalendarResult {
    private Long id;
    private String title; // 캘린더에 보여지는 내용
    private String start; // 시작 일자
    private String end;   // 종료 일자
    private String url;   // 누르면 이동하는 url
    private String color; // 색깔값 (hexa 가능 = #123456)
}

이렇게 하니 바로 적용이 잘 되었습니다. 

 

 

2. 새 탭에서 내용이 표시되도록 하기 

이 부분은 자바스크립트 내에 옵션을 적용하면서 콜백 함수를 추가하였습니다. 찾아본 방법으로는 'fullcalendar url target _blank' 과 'full calendar url new tab' 정도가 있습니다. 

let calendarOptions = function(date, events) {
  reload();
  return {
    header: {
      // left: 'prev,next today',
      left: null,
      center: 'title',
      // right: 'month,basicWeek,basicDay',
      right: null,
    },
    defaultDate: date,
    navLinks: true, // can click day/week names to navigate views
    editable: true,
    eventLimit: true, // allow "more" link when too many events
    events: events,
    eventClick: function(e) {
      if(e.url) {
        window.open(e.url, "_blank");
        return false;
      }
    },
    monthNames: ["01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12"],
    monthNamesShort: ["01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12"],
    dayNames: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
    dayNamesShort: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
    buttonText: {
      today: "오늘",
      month: "월별",
      week: "주별",
      day: "일별",
    }
  }
};

 

 

3. 화면 클리어 하기 

제가 찾아본 방법으로는 아래와 같습니다. 검색한 방법으로는 'full calendar clear', 'full calendar init', 'full calendar refresh' 등과 같은 키워드로 검색을 해보았습니다. 

// fullCalendarReload($('#calendar'), option);
function fullCalendarReload(calendarDOM, events) {
  calendarDOM.fullCalendar('removeEvents');
  calendarDOM.fullCalendar('removeEventSource', events);
  calendarDOM.fullCalendar('addEventSource', events);
  calendarDOM.fullCalendar('refetchEvents');
}

참조: https://stackoverflow.com/questions/18727954/how-to-reload-fullcalendar-contact-when-the-value-of-a-menu-change-using-jquery

How to reload FullCalendar Contact when the value of a menu change using jQuery?