[FullCalendar] 풀캘린더(FullCalendar) 속성 - 2

자바스크립트 기반의 오픈소스 FullCalendar

 

 

 

 

 

 

풀캘린더(FullCalendar) 속성 - 2

 

 

 

 

---

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

 

 

 

 

 

events

' 달력에 표시 될 이벤트 개체의 배열  '

---

FullCalendar에 일정 데이터를 나타낼 때 events 속성을 통해서 설정할 수 있다. events 속성은 일정 값들을 배열 형태로 관리한다. 배열 형식에 맞춰 'title', 'start', 'end', 'allDay' 등등과 같은 속성들이 포함된 객체 정보들을 활용하여 일정을 표시한다. 그리고 배열의 마지막 이벤트 뒤에는 쉼표가 꼭 없어야 한다. (Internet Explorer에서 에러가 발생)

위 내용에 대한 부분도 현재 시점에서 봤을 때에는 IE가 서비스 종료가 된지 이미 오래전이라 문제는 없겠지만, 아직도 IE를 사용하는곳이 있을 수 있다. 그렇기 때문에 공식문서에서 이야기하는 내용을 알고만 있자!

 

var calendar = new Calendar(calendarEl, {
  events: [
    {
      title  : 'event1',
      start  : '2010-01-01'
    },
    {
      title  : 'event2',
      start  : '2010-01-05',
      end    : '2010-01-07'
    },
    {
      title  : 'event3',
      start  : '2010-01-09T12:30:00',
      allDay : false // will make the time show
    }
  ]
});

 

 

위 소스는 FullCalendar JS 공식문서에서 제공하는 예시이다. Calendar 객체를 생성할 때, events 속성에 배열 형태를 만들고 해당 값으로 객체들을 만들어간다. 객체 안에서 사용중인 여러 속성들이 존재하는데 각각의 속성들은 아래 표를 통해서 확인할 수 있도록 하자.

 

events 속성 확장형

var calendar = new Calendar(calendarEl, {

  eventSources: [

    // your event source
    {
      events: [ // put the array in the `events` property
        {
          title  : 'event1',
          start  : '2010-01-01'
        },
        {
          title  : 'event2',
          start  : '2010-01-05',
          end    : '2010-01-07'
        },
        {
          title  : 'event3',
          start  : '2010-01-09T12:30:00',
        }
      ],
      color: 'black',     // an option!
      textColor: 'yellow' // an option!
    },
    // any other event sources...
    {
    	events: [{...},{...}]
	},
    {
    	events: [{...},{...}]
    }
  ]

});

 

이벤트 확장형 옵션에 해당하는 이벤트 소스는 이벤트 소스 옵션들을 설정할 수 있는데, 여러 이벤트 소스를 지정하고 특정 옵션을 특정 이벤트에만 적용하려는 경우에 유용한다. 그렇기 때문에 기존 events 속성과는 작성 방식이 조금 다르다. eventsSources 속성을 이용하여 여러 events를 객체형태로 만들어서 등록한다.

 

events 속성안에 여러 객체정보들을 만들 때 사용가능한 속성이 존재한다. 해당 일에 나타날 일정 내용들은 여러 속성정보에 해당하는 'id', 'groupId', 'allDay', 'start', 'end', 'startStr', 'endStr' 등등과 같은 속성정보를 통해서 나타낼 수 있다.

 

번호	속성	내용
1	id	- 이벤트의 고유 식별자
2	groupId	- 이벤트를 한꺼번에 처리할 수 있도록 그룹핑 된 식별자
3	allDay	- 해당 뷰의 'allDay'인 하루종일 이벤트를 표시할지 여부를 결정 - 상태 값이 'true'인 경우 시간 텍스트가 함께 표시되지 않는다.
4	start	- 현재 timeZone을 따르는 날짜 객체 - 시작일을 표시
5	end	- 현재 timeZone을 따르는 날짜 객체 - 종료일을 표시하고 지정되지 않는 경우 null ** 배타적, 종료일이 '2024-06-19'일 때 종료되는 시점은 '2024-06-20'이 되기 전이다.
6	startStr	- 시작일의 문자열 표현(ISO8601) - 시작일에 포함시킬 텍스트(하루 종일 진행되는 경우 시간 부분이 없음.)
7	endStr	- 종료일의 문자열 표현(ISO8601) - 종료일에 포함시킬 텍스트(하루 종일 진행되는 경우 시간 부분이 없음.)
8	title	- 이벤트에 표시될 텍스트(일정명)
9	url	- 사용자가 이벤트를 클릭할 때 방문하게 될 URL - 동작 제어의 자세한 내용은 eventClick callback 참조
10	classNames	- class명 문자열 배열 - 랜더링된 이벤트에 첨부할 className을 결정
11	editable	- 특정 이벤트에 대해 편집 가능한 설정을 재정의하는 값(true/false) - true일 경우, 일정 bar를 선택하거나 드래그 할 수 있다. - false일 경우, 일정 bar를 선택하거나 드래그할 수 없다.
12	startEditable	- 특정 이벤트에 대한 eventStartEditable 설정을 재정의 하는 값(true/false) - 드래그를 통해 이벤트의 시작 시간을 편집할 수 있도록 허용
13	durationEditable	- 특정 이벤트에 대한 eventDurationEditable 설정을 재정의 하는 값(true/false) - 크기 조정을 통해 이벤트 기간을 편집할 수 있도록 허용
14	resourceEditable	- 특정 이벤트에 대한 eventResourceEditable 설정을 재정의 하는 값(true/false) - 사용자가 리소스 간에 이벤트를 드래그할 수 있는지 여부를 결정
15	display	- 이벤트의 랜더링 유형 - 랜더링 유형은 'auto', 'block', 'list-item', 'background', 'inverse-background', 'none' 이 있다. - auto : default, daygrid에 있을 때 하루 종일 또는 며칠 동안 진행되는 경우 이벤트를 단색 직사각형으로 랜더링 한다. 시간이 지정된 이벤트인 경우 점으로 랜더링된다. - block : daygrid에 있는 경우 이벤트를 단색 직사각형으로 랜더링한다. - list-item : daygrid에 있는 경우 이벤트를 점으로 랜더링한다. - background : 배경 하이라이트로 나타나는 이벤트, 정사각형에 색깔만 표시됨. - inverse-background : background와 비슷하지만, 반대쪽 공간을 배경 하이라이트로 나타낸다. - none : 이벤트를 랜더링하지 않는다.
16	overlap	- 특정 이벤트에 대한 eventOverlap 설정을 재정의하는 값 - false인 경우, 해당 이벤트가 다른 이벤트 위로 드래그/크기 조정되는 것을 방지한다. - false인 경우, 다른 이벤트가 해당 이벤트 위로 드래그/크기 조정되는 것을 방지한다.
17	constraint	- 특정 이벤트에 대한 eventConstraint 재정의 - 이벤트 드래그 및 크기 조정을 특정 시간 창으로 제한한다. - 일정 주별, 시간별, groupId 등으로 범위를 제한하여 이벤트를 제한한다.
18	backgroundColor	- 특정 이벤트에 대한 eventBackgroundColor 재정의 - 캘린더의 모든 이벤트에 대한 배경색을 설정한다. - '#f00', '#ff0000', '.rgb(255,0,0)', 'red'와 같은 CSS 색상 형식을 사용할 수 있다.
19	borderColor	- 특정 이벤트에 대한 eventBorderColor 재정의 - 캘린더의 모든 이벤트에 대한 테두리 색상을 설정한다. - '#f00', '#ff0000', '.rgb(255,0,0)', 'red'와 같은 CSS 색상 형식을 사용할 수 있다.
20	textColor	- 특정 이벤트에 대한 eventTextColor 재정의 - 캘린더의 모든 이벤트에 대한 텍스트 색상을 설정한다. - '#f00', '#ff0000', '.rgb(255,0,0)', 'red'와 같은 CSS 색상 형식을 사용할 수 있다.
21	extendedProps	- 구문 분석 중에 지정된 기타 속성을 보유하는 일반 객체 - 명시적으로 지정된 ExtendedProps Hash의 속성과 기타 비표준 속성을 받는다.
22	source	- 해당 이벤트가 발생한 이벤트 소스에 대한 참조 - addEvent를 통해 이벤트가 동적으로 추가되고 source 매개변수가 지정되지 않은 경우 null

 

var calendar = new FullCalendar.Calendar(calendarEl, {
    initialView : 'dayGridMonth',
    events: [
        {
            title: '일정명입니다.',
            start: '2024-06-19T09:00:00',
            end: '2024-06-19T12:50:00',
            startStr: 'Start 텍스트',	// 일정 bar에 출력이 되지는 않음
            endStr: 'End 텍스트',		// 일정 bar에 출력이 되지는 않음
            classNames:['custom-className1','custom-className2'],
            editable: false,
            display: 'block',	// 직사각형 bar가 나타난다.
            overlap: false,
            backgroundColor: 'red',
            borderColor: 'blue',
            textColor: 'white'
        }
    ]
});

 

위 와 같은 속성들을 활용하여 캘린더의 events 속성의 객체정보를 만들 수 있다. 일정명은 '일정명입니다.', 시작일과 종료일은 '2024년 6월 19일 오전 9시부터 2024년 6월 19일 오후 12시 50분', 시작 문자열과 끝 문자열은 'Start 텍스트', 'End 텍스트', 해당 일정 bar에 생성될 class는 'custom-className1', 'custom-className2', 드래그 및 크기 조정 불가능, 일정 보여지는 view 옵션은 직사각형 bar가 나타날 'block', 이벤트와 이벤트가 겹치지 않게 하기 위한 overlap false 등등의 설정들을 이용해서 events 객체정보를 설정했다.

 

events 속성을 활용해 일정 객체 생성

 

각 설정에 의해서 만들어진 캘린더 View이다. 보통은 저렇게 많은 속성 정보를 활용하기 보다는 값으로서 출력할 수 있는 형태의 속성들을 활용하여 캘린더 일정을 핸들링한다. 그렇지만, 각 속성들의 설정에 따라서 events 속성이 가지고 있는 일정 배열의 데이터를 좀 더 detail하게 관리할 수 있는 장점은 있을 수 있다. 아래의 events 속성이 여러 속성들에 의해서 설정된 데이터의 현황이다. 

 

 

events 속성의 배열 형태의 값으로 1개의 일정 데이터를 추가하였다. 배경색 설정, 테두리 색 설정, class명을 'custom-className'으로 2개 설정하였고, 보여지는 방식, 편집 여부, 시작일, 종료일, 일정명 등등을 여러 속성정보를 통해 설정하면 calendar 객체안에 events 속성 정보를 열어보면 왼쪽과 같이 데이터의 현황을 확인할 수 있다.

우리가 여러 속성들을 관리하고 여러 속성들을 통해서 원하는 갑을 컨트롤 하는 건, 가장 큰 궁극적인 목적은 일정 데이터를 출력하기 위한 값을 설정하는데에 있지만, 데이터 출력 이외에 다양한 속성 정보를 통해 다양한 기능들로의 핸들링을 하기 위해서이기도 하다. events 속성은 내가 배열의 형태로 추가한 여러 일정 데이터를 index의 형태로 관리하는데, groupId 형태로 묶어서도 컨트롤을 할 수도 있고, 각 className으로도 핸들링 할 수도 있을것이다. 더 다양한 속성정보와 속성 정보에 따른 내용은 본 작성글 1,2 또는 공식문서를 통해서 확인할 수 있도록 합시다.

 

 

 

 

ㅁㅁㅁ

 

 

---

추후 여러 속성들 추가적으로 작성 예정

 

 

 

 

 

 

FullCalendar JS를 소개하는 내용은, FullCalendar 공식 홈페이지에 내용을 적극 참고하여 작성된 글임을 명시합니다. 모든 내용은 공식 홈페이지 메인 내용 및 Documents를 기반으로 작성하였습니다.

 

 

 

 

 

@Junesker

---