스케줄러 (Spring + MyBatis) - fullcalendar로 달력 출력

기능 - 달력 출력

 

 

자바스크립트 라이브러리 fullcalendar 다운로드

http://fullcalendar.io/

FullCalendar - JavaScript Event Calendar

 

demos 폴더의 background-events.html 을 커스텀하여 사용하겠습니다.

 

background-events.html 파일의 소스를 가져와서 jsp파일로 변환 후 packages 폴더 복사

 

 

background-events.html 파일의 default 설정

<script>

  document.addEventListener('DOMContentLoaded', function() {
    var calendarEl = document.getElementById('calendar');

    var calendar = new FullCalendar.Calendar(calendarEl, {
      plugins: [ 'interaction', 'dayGrid', 'timeGrid', 'list' ],
      header: {
        left: 'prev,next today',
        center: 'title',
        right: 'dayGridMonth,timeGridWeek,timeGridDay,listMonth'
      },
      defaultDate: '2019-06-12',
      navLinks: true, // can click day/week names to navigate views
      businessHours: true, // display business hours
      editable: true,
      events: [
        {
          title: 'Business Lunch',
          start: '2019-06-03T13:00:00',
          constraint: 'businessHours'
        },
        {
          title: 'Meeting',
          start: '2019-06-13T11:00:00',
          constraint: 'availableForMeeting', // defined below
          color: '#257e4a'
        },
        {
          title: 'Conference',
          start: '2019-06-18',
          end: '2019-06-20'
        },
        {
          title: 'Party',
          start: '2019-06-29T20:00:00'
        },

        // areas where "Meeting" must be dropped
        {
          groupId: 'availableForMeeting',
          start: '2019-06-11T10:00:00',
          end: '2019-06-11T16:00:00',
          rendering: 'background'
        },
        {
          groupId: 'availableForMeeting',
          start: '2019-06-13T10:00:00',
          end: '2019-06-13T16:00:00',
          rendering: 'background'
        },

        // red areas where no events can be dropped
        {
          start: '2019-06-24',
          end: '2019-06-28',
          overlap: false,
          rendering: 'background',
          color: '#ff9f89'
        },
        {
          start: '2019-06-06',
          end: '2019-06-08',
          overlap: false,
          rendering: 'background',
          color: '#ff9f89'
        }
      ]
    });

    calendar.render();
  });

</script>

 

 

defaultDate 속성을 삭제하면 현재 날짜로 focus됨.

defaultDate: '2019-06-12',  //삭제

 

locale : "ko" 속성을 추가하면 한글로 출력됨.

locale : "ko",  //추가

 

 

view 파일에 소스 추가

<div id='calendar' style="position : relative;">
	<div>
		<button class = "add-button" type = "button" 
        	onclick="click_add();">일정 추가</button>
	</div>
</div>

 

 

css 추가

.add-button {
    position: absolute;
    top: 1px;
    right: 230px;
    background: #2C3E50;
    border: 0;
    color: white;
    height: 35px;
    border-radius: 3px;
    width: 157px;
}