'스프링부트(SpringBoot)로 풀캘린더 구현하기 - 1,2'로 기본적인 풀캘린더를 설정했다면, 일정 선택 이벤트, 일정 바 리사이즈, 일정 드래그 등등 이벤트를 다음으로 만들어보려고 합니다. 다양한 이벤트 중에서 일정 선택 이벤트에 해당하는 'select' 속성에 대해서 알아보겠습니다. 풀캘린더 'select' 속성FullCalendar '선택(select)' 속성은 사용자가 마우스 드래그 또는 터치 동작을 이용해 달력의 여러 날짜나 시간대를 강조 표시하고 특정 기간을 선택할 수 있도록 하는 기능입니다. 대표적으로 새로운 일정을 생성할 때 사용됩니다. selectable 속성'선택(select)' 기능을 사용하기 위해서는 일정을 선택할 수 있어야 하므로, 캘린더에서 사용자에게 날짜/시간대 선..

'스프링부트(SpringBoot)로 풀캘린더(FullCalendar) 구현하기 - 1' 게시글을 통해서 기본적인 캘린더를 구성하는 방법에 대해서 알아보았습니다. 풀캘린더 구현하기 두 번째 게시글에서는 첫 번째 게시글에서 마지막 방식에 해당하는 '일정 목록을 요청할 URL로 풀캘린더에 일정 추가하기'를 구체적인 방법과 흐름으로 확인해 보겠습니다. 풀캘린더 설정하기전체 소스 적용 화면 가장 먼저, 'events' 속성에 설정된 일정 목록을 조회하기 위한 요청 '/scheduleList.do'를 컨트롤러에서 직접 구성한 List 데이터를 응답으로 받아오는 형식으로 먼저 테스트해봅니다. 서버 설정하기1. 직접 구성한 List 데이터 응답으로 받기 컨트롤러에서 요청('/scheduleList.do..

풀캘린더 기본적인 여러 속성에 대해서 이전 게시글을 통해 알아봤다면, 스프링 부트를 활용해 풀캘린더를 구현해보도록 하겠습니다. 풀캘린더는 일정 관리 기능을 구현할 때 많이 사용하는 라이브러리로, 많은 기업들이 풀캘린더 라이브러리를 가져다 일정 관리 기능으로 활용하고 있는 만큼 직접 구현하고 사용해보는데 의미가 있습니다. 풀캘린더 설정하기캘린더 화면 만들기 캘린더 화면을 만들기 위해서는 JSP페이지를 이용해 캘린더가 보여질 페이지를 관련 스크립트, 스타일을 적용해 만들어야합니다. 그렇기 위해서는 스크립트, 스타일 정보를 CDN 또는 제공 파일을 통해 설정해야 합니다. 캘린더 화면을 구성하기 위해 기본적인 설정이 필요한데 각 설정에 따라 3가지 방식으로 캘린더 화면을 구성해보겠습니다.풀캘린더 기본 설..

풀캘린더(FullCalendar) 속성 - 6     FullCalendar JS를 활용하다 보면 굉장히 다양한 속성과 이벤트를 볼 수 있다. 여러 속성들이 어떤 특징들을 가지고 있는지, 풀캘린더가 가지고 있는 이벤트에는 어떤 것들이 있으며 해당 이벤트는 어떤 동작들을 포함하고 있는지 등등에 대해서 잘 모를 때가 많다. FullCalendar JS 공식 홈페이지에서 제공하는 Documents 파일을 보긴 하지만 Docs 문서들을 확인하는 게 아직 익숙지 않은 사람은 문서 보는 방법조차 어려울 수 있다. 그래서 FullCalendar JS에서 사용할 수 있는 속성들을 하나식 살펴보고자 한다. 물론 100% 모든 속성들을 전부 보면 좋겠지만, 가장 중요한 속성들 위주로 확인해 보고 그 외에 속성들은 직접 D..

풀캘린더(FullCalendar) 속성 - 4     FullCalendar JS를 활용하다 보면 굉장히 다양한 속성과 이벤트를 볼 수 있다. 여러 속성들이 어떤 특징들을 가지고 있는지, 풀캘린더가 가지고 있는 이벤트에는 어떤 것들이 있으며 해당 이벤트는 어떤 동작들을 포함하고 있는지 등등에 대해서 잘 모를 때가 많다. FullCalendar JS 공식 홈페이지에서 제공하는 Documents 파일을 보긴 하지만 Docs 문서들을 확인하는 게 아직 익숙지 않은 사람은 문서 보는 방법조차 어려울 수 있다. 그래서 FullCalendar JS에서 사용할 수 있는 속성들을 하나식 살펴보고자 한다. 물론 100% 모든 속성들을 전부 보면 좋겠지만, 가장 중요한 속성들 위주로 확인해 보고 그 외에 속성들은 직접 D..

풀캘린더(FullCalendar) 속성 - 3     FullCalendar JS를 활용하다 보면 굉장히 다양한 속성과 이벤트를 볼 수 있다. 여러 속성들이 어떤 특징들을 가지고 있는지, 풀캘린더가 가지고 있는 이벤트에는 어떤 것들이 있으며 해당 이벤트는 어떤 동작들을 포함하고 있는지 등등에 대해서 잘 모를 때가 많다. FullCalendar JS 공식 홈페이지에서 제공하는 Documents 파일을 보긴 하지만 Docs 문서들을 확인하는 게 아직 익숙지 않은 사람은 문서 보는 방법조차 어려울 수 있다. 그래서 FullCalendar JS에서 사용할 수 있는 속성들을 하나식 살펴보고자 한다. 물론 100% 모든 속성들을 전부 보면 좋겠지만, 가장 중요한 속성들 위주로 확인해 보고 그 외에 속성들은 직접 D..

풀캘린더(FullCalendar) 속성 - 2    FullCalendar JS를 활용하다 보면 굉장히 다양한 속성과 이벤트를 볼 수 있다. 여러 속성들이 어떤 특징들을 가지고 있는지, 풀캘린더가 가지고 있는 이벤트에는 어떤 것들이 있으며 해당 이벤트는 어떤 동작들을 포함하고 있는지 등등에 대해서 잘 모를 때가 많다. FullCalendar JS 공식 홈페이지에서 제공하는 Documents 파일을 보긴 하지만 Docs 문서들을 확인하는 게 아직 익숙지 않은 사람은 문서 보는 방법조차 어려울 수 있다. 그래서 FullCalendar JS에서 사용할 수 있는 속성들을 하나식 살펴보고자 한다. 물론 100% 모든 속성들을 전부 보면 좋겠지만, 가장 중요한 속성들 위주로 확인해 보고 그 외에 속성들은 직접 Do..

풀캘린더(FullCalendar) 속성 - 1     FullCalendar JS를 활용하다 보면 굉장히 다양한 속성과 이벤트를 볼 수 있다. 여러 속성들이 어떤 특징들을 가지고 있는지, 풀캘린더가 가지고 있는 이벤트에는 어떤 것들이 있으며 해당 이벤트는 어떤 동작들을 포함하고 있는지 등등에 대해서 잘 모를 때가 많다. FullCalendar JS 공식 홈페이지에서 제공하는 Documents 파일을 보긴 하지만 Docs 문서들을 확인하는 게 아직 익숙지 않은 사람은 문서 보는 방법조차 어려울 수 있다. 그래서 FullCalendar JS에서 사용할 수 있는 속성들을 하나식 살펴보고자 한다. 물론 100% 모든 속성들을 전부 보면 좋겠지만, 가장 중요한 속성들 위주로 확인해 보고 그 외에 속성들은 직접 D..

풀캘린더(FullCalendar) JS를 이용하여 캘린더 만들기 자바스크립트 기반의 오픈소스 FullCalendar는 다양한 시작을 제공합니다. ScriptTag, ES6 Build, TypeScript, React Connector(Next 지원), Vue Connector(Next 지원), Angular Connector 등 다양한 시작을 지원하지만 본 작성자가 소개할 방법은 스크립트 태그로 시작하는 방법을 제공하고자 합니다. 개발 환경 IDE ToolSTS 3.9.15(Eclipse 4.16)SpringFramework5.3.25JDK1.8Apache-Tomcat8.5FullCalendar JSfullcalendar-6.1.14ORMMybatisDatabaseOracle Databas..

FullCalendar란?FullCalendar JS는 'The Most Popular Javascript Calendar', 자바스크립트 기반 오픈소스 라이브러리로 일정관리 기능을 구현할 때 많이들 이용하게되는 라이브러리이다. FullCalendar JS가 없었다면 Calendar 자체를 Date객체 정보를 이용해서 직접 구현하고 각 날짜별 데이터를 핸들링해서 일정을 등록/수정/삭제 및 관리 해야할 것 입니다.FullCalendar JS는 그런 불편함들의 needs를 충분히 커버하고 있을만큼 기능적으로도 프로세스적으로도 잘 구성되어 있다고 생각된다. FullCalendar JS 라이브러리를 등록 후, 관련 HTML코드와 스크립트 구문 몇줄만 등록하면 예쁘고 잘 만들어진 달력이 출력된다.날짜를 클릭하는 ..