fullCalendar로 캘린더 구현하기

uiop9900 commented 2 years ago

기획

스튜디오 예약시, 예약자들은 홈페이지의 캘린더를 통해 확정된 예약들을 캘린더로 확인하고 그걸 바탕으로 예약시간을 잡는다.

구현과정(1day)

1. fullCalendar를 다운받아 출력한다.

: 다운을 받은 후 따로 /static/fullcalendar 폴더를 만들고 그 안에 다운받은 fullcalendar의 main.css와 main.js를 넣어주고 import한다. 그리고 홈페이지에 나와있는 예제 코드를 가져온다.

<html lang='en'>
  <head>
    <meta charset='utf-8' />
    <link href='fullcalendar/main.css' rel='stylesheet' />
    <script src='fullcalendar/main.js'></script>
    <script>

      document.addEventListener('DOMContentLoaded', function() {
        var calendarEl = document.getElementById('calendar');
        var calendar = new FullCalendar.Calendar(calendarEl, {
          initialView: 'dayGridMonth'
        });
        calendar.render();
      });

    </script>
  </head>
  <body>
    <div id='calendar'></div>
  </body>
</html>

2. 설정들과 db연동하기

2-1. calendar객체와 bo.dao.mapper를 만들어서 예약이 확정될때마다 calendar에 확정예약db를 넣어준다.

2-2. calendarRestController에서 가공된 값을 json으로 내려준다

json으로 내려주기 위해 json으로 변환해주는 gralde 의존성을 추가한다. gradle은 추가 후에 항상 gradle-refresh를 해줘야 한다.

implementation group: 'com.googlecode.json-simple', name: 'json-simple', version: '1.1.1'

이때 RestController에서 gradle에 추가한 simple버전을 import해 SONArray, JSONObject에 값을 사용한다. (자동 import하게 되면 springboot버전으로 import되고 제대로 사용이 불가하다 - 삽질(2h)

2-3. json으로 내려준 값들을 캘린더에 보여지게 한다.

events: 안에 ajax를 통해 값들을 가지고 온다.

uiop9900 commented 2 years ago

json으로 값 담기

List<Map<String, Object>>를 json으로 변환하다.

삽질(3h)

gradle 의존성에 simple-Json을 추가해야 하는지 모르고 추가를 안한 상태에서 계속 json으로 변환하고자 시도했다.
gradle에 새로 추가한 simple-json이 아닌 spring boot~ json을 import해서 계속 JSONObject, jsonArray 사용이 정상적으로 작동하지 않았다.

uiop9900 commented 2 years ago

json내린 값을 calendar에 보여지게 하기

json으로 내려진 값을 알맞게 calendar에 보여지게 한다.

삽질(1h)

console.log로 restController에서 받은 json을 확인해보니 정상적으로 잘 내려졌지만 calendar에는 표시되지않았다.
내 마음대로 결과값을 변수에 저장해 내려보기도 하고 여러 시도를 했지만 결과적으로 실패

해결책

Githubissues.
Githubissues is a development platform for aggregating issues.

uiop9900 / poleWearShop