APISpring Boot, Thymeleaf, MariaDB, Html, JavaScript, JPA용IDE IntelliJ, Sequel Ace, VisualStudioCode발 OS Mac M2
목차 Full Calendar API 사용법 상세 옵션
사실 처음 달력 스케줄러 프로젝트를 진행하면서 아래와 같이 달력부터 직접 디자인하고 일정 추가 및 삭제 등의 기능까지 모두 구현하고자 했다.
인기글
![IOT전등스위치-[아이오스위처]의 설치가 간단하므로 추천드립니다](https://avicswp.cdn3.cafe24.com/roland/v-8hd/v-8hd_top.png "IOT전등스위치-[아이오스위처]의 설치가 간단하므로 추천드립니다")
실제, 이러한 포맷까지 html로 작성을 마쳤지만, 일정 추가 시에 달력에 표기하는 부분이 정말 쉽지 않았다.정확히는 뒤를 생각 없이 어떻게든 만들자 다시 뒤집어 일정을 추가하기 쉬운 모양을 만들어야 했다.이미 처음의 프로젝트인지라 해당 화면을 만들어 달 이동/전달의 색 변경 등을 작업하는 데 너무 오래 걸렸지만 이를 다시 일정 추가까지 고려하고+주전, 일력까지 만들기로 생각하면 너무 시간의 소비가 심해서 이것 저것 찾아보면”Full Calendar”라는 오픈 API을 많이 쓰고 있으니 그것을 쓰고 보자!와 다시 바꾸게 됐다.그래도 만든 게 아까우니까 앞으로 포스팅을 할 예정이다.1. Full Calendar API사용법의 기능 설명에서 업데이트까지 정말 잘되어 있다고 하지만 봐도 무슨 말인지 전혀 몰랐다 나… 그렇긴 처음 소개 화면에서 javascript를 사용하여 주신 페이지가
<!DOCTYPE html><docal lang=’en’><head><document charset=’utf-8’/><script src=’https://cdn.jsdelivr.net/npm/[email protected]/index.global.min.js’></script>document.addEventListener(‘DOMContentLoaded’), function(){var calcalElar El=document.getElementById(‘);varCal= 새로운 완전.캘린더(calendarEl,{initialView:’dayGridMonth’});calendar.()render;};</script></head><body><divid=’callos’></div></body></callosion>
이런 구성이라 하는데 지금 만드는 마친 뒤, 음악이야.정말 다 먹게 하는 수준이다~라고 납득할 수 있지만 처음 이를 본때는 무엇이야;;그래서 데이터는 어떻게 가지고 온다그대로 FullCalendar.Calendar(~)이를 선언하면 좋을까?뭔가 생각하고 멘털 붕괴의 도가니였다.아마 위의 소스를 그대로 붙이고 실천하고 보며 달력에 사용되는 js는 상기의 script주소(<script src=’https://cdn.jsdelivr.net/npm/[email protected]/index.global.min.js></script>)에서 가져오는 것으로 함부로 dayGridMonth달력을 생성한다.(보통 우리가 알고 있는 달력의 형태)하여튼, 제가 사용한 다양한 기능이 이미 작성된 내용을 보면 이해하기 쉬울 것이다.나도 누군가가 어떻게 만들어 썼는지 보이고 준 포스팅을 봐야 겨우 이해해서 작업을 할 수가 있었으니까!또 GitHub에도 소스의 설명과 사례가 세분화되고 있지만 워낙 레파지토리가 많아 나도 잠시 망설이고 찾았다.fullcalendar-docs의 편에 들어가서 확인하고 보라.FullCalendar생성에 관한 전문(함수 내용은 요약)이런 구성이라는데 지금 다 만들고 나면 아이지야. 정말로 전부 먹여주는 수준이구나~ 라고 납득할수있지만, 처음 이걸 봤을때는 뭐야;; 그래서 데이터는 어떻게 가지고 와. 그대로 Full Calendar. Calendar(~~~) 이것을 선언하면 좋을까?? 뭘까 하는 생각에 멘붕의 도가니였다. 아마도 상기 소스를 그대로 붙여 실행해 보면 풀 캘린더에 사용되는 js는 상기 script src=’https://cdn.jsdelivr.net/npm/fullcalendar @6.1.8/index.global.min.js></script>)에서 가져오기 때문에 마음대로 dayGridMonth 캘린더를 생성해 줄 것이다. (보통 우리가 알고 있는 달력의 형태) 어쨌든 내가 사용한 여러 기능들이 이미 작성된 내용을 보면 이해하기 쉬울 것이다.나도 누군가가 어떻게 만들고 썼는지 보여준 포스팅을 보고 겨우 이해하고 작업을 진행할 수 있었으니까! 게다가 깃허브에도 소스 설명과 예가 세분화되어 있는데, 워낙 저장소가 많아서 나도 잠시 망설이다가 찾았다. fullcalendar-docs 쪽으로 들어가서 확인해 보면 된다.Full Calendar 생성 전문(함수내용 요약)2. 상세옵션 전문은 위와 같으며, 내가 사용한 것에 한해 상세옵션을 설명한다.대부분 주석을 달았기 때문에 아마 어느 정도는 이해할 수 있을 것이고 그림으로 기능을 간단히 설명하려고 한다. 2-1. headerToolbar상기의 소스를 기준으로 생성되는 화면이다 삼등분으로{start/center/end}구간이며, 각 구간에 필요한 구성 요소를 넣으면 좋지만 start에 들어가는 모양은 많다.나는 달력, 타임 라인에서 볼 수 있는 주간력, 일력을 넣은 것으로 날짜만 보고 싶다면 dayGridWeek, dayGridDay에서 추가하면 된다.주석에도 적어 둔 것처럼 “”속에 모든 요소를 다 넣지만 month/week/day처럼 찍어 표기하려면 today</>처럼 표시하려면 공간에서 요소를 구분하면 된다.추가로 커스텀 버튼도 추가 가능한데, 예를 들면 위 주석 처리 부분을 customButtons로 가정하여headerToolbar: {start:’dayGridMonth, timeGridWeek, timeGridDay’, // headerToolbar에 버튼 추가 center: ‘title’, end: ‘addEventButton today prev, next’ // 공백-버튼표시,-붙여 생성}, customButtons: {addEventButton: {/추가한 버튼 설정: >, // 버튼내용click: function() {// 버튼클릭시 이벤트 추가…}위와 같이 end 구간에 내가 만드는 커스텀 버튼의 이름을 넣으면 된다.그리고 해당 버튼이 동작하는 function은 아래와 같이 json 형식으로 끼워 넣으면 끝. 2-2. navLinks & display Event TimenavLinks는 이미지처럼 날짜를 클릭할 때 이동할 수 있는 하이퍼링크 표시가 되고누르면 이와 같이 해당 day측으로 이동하는 기능을 활성화하는 기능이다.추가적으로 default는 일정 시작 시간이 보이지 않지만 보이도록 설정하고자 할 경우 display Event Time:true로 설정하면 된다. 시간 표기법도 옵션을 주면 좋겠지만, 그렇게까지는 필요가 없기 때문에 나는 작업하지 않았다. 2-3.dateClick: function(info)이는 selectable:true에서 먼저 설정해야 적용할 수 있지만, 어느 날짜를 클릭할 수 있도록 하는 옵션에 dateClick:function()을 추가하면서 스케줄을 등록할 수 있도록 내가 구현한 것이다.본문에서 생략된 메소드 내용::모달 창을 이용해서 작성하고 클릭 시에 뒤는 blur/전환 창에서 전을 표시하는 방식으로 진행됐다.만약, 전환 창을 어떻게 표시하는지 궁금하다면 별도의 포스팅에서 다룰 예정이다. 2-4.event이 행사는 달력 화면에 어떤 스케줄이 있는지를 나타내는 데이터를 넣어 보내는 역할을 한다. json형식으로 전달 받지 않으면 fullcalendar에서 데이터를 퍼싱하고 표시할 수 없다.이벤트에도 넣는 데이터가 생각보다 많지만, 정해진 규칙을 가지는 값도 있다(allDay, color, start, end등), 자신이 원하는 기타 값을 넣지 못한 extended Props도 있다.Json Data의 예イベント: { “allDay”: false,extendedProps”:{“scdId”: “jinoh”, id”:1, scdWkno”:1}, color”: “skyblue”, display”: “block”, start”: “2023-07-14T15時15時00分”, description”: “refresh test1”, end “2023-07-14T17時00分00分00分”, title「」: “트스테}이 }}이때 전달하는 데이터가 중요한 이유는 아래에서 설명하는 eventClick 이벤트를 진행하여 전달하는 info에 포함되어 들어오므로 필요한 데이터를 전달할 때부터 잘 넣어 보내도록 하자. 참고로 나는 해당 event의 내용을 DB에서 가져와 가공하여 전달해야 했기 때문에 스케줄을 먼저 받아와서 request.done이 되면 fullcalendar를 만들 수 있도록 작업하였다.$(함수){ar request = = $.ajax({ype: “get”,rl:”/Calendar/schedules”});request.done(関数(データ){ ···});컨트롤러로 데이터를 가공한 방법은 향후 포스팅에서 다룰 예정입니다. 2-5. eventClick:function(info)앞서 말한 생성된 이벤트를 클릭하였을 때 일정을 수정하거나 삭제할 수 있도록 하는 이벤트가 필요한 경우 event Click : function() 안에 작성하면 된다.info는 내가 fullcalendar 생성 당시 보낸 eventjson 모양을 얘가 가지고 있고 그걸 던져준다.그렇기 때문에 그 안에서 필요한 데이터를 가공하고자 한다면const eventId = info.event.extendedProps.scdId;const id = info.event.extendedProps.id ; variyymmdd_s = info.event.start.toISOString(0,10); variyyymmdd_e = info.event.end.toISOString(0,10); varihmss_s = info.event.start.toISOString(19).extendedProps.description; 확장플롭스설명;대충 이런 바람에 가져다 쓸 수 있다.event json의 형태를 보면 안다 시 피 info.event.~~형식이나 한가지 주의해야 할 점은 description을 밝힌 별도 선언하고 보낸 친구였는데, 실제로 json에 전달되고 fullcalendar가 가지고 있는 형태에는 extendedProps속에 있어서 위와 같이 가져오면 좋다.이 정도면 FullCalendar에서 쓸 만한 기능은 써먹은 것 같다. json데이터의 가공과 extended Props에서 가장 망설인 것에 정리를 겸하고 다른 사람에게도 도움이 될 겸 포스팅했다.처음에는 공포였지만, 왜 다들 정말 자세히 일러준 API인가요~라고 하는지 알 것 같았다.