[JavaScript] FullCalendar 캘린더 사용법 - (6. Event)

 

 

Events

 

 

 

Event Object

 일정관리 이벤트에 대한 정보를 저장하는 데 사용하는 JavaScript 개체.

var calendar = new Calendar(calendarEl, {
  timeZone: 'UTC',
  events: [
    {
      id: 'a',
      title: 'my event',
      start: '2018-09-01'
    }
  ]
})

 

일정관리 이벤트 개체의 모든 속성은 읽기 전용이므로 메소드를 사용하여 속성을 수정해야한다.

아래는 이벤트 개체에 있는 모든 속성 목록이다.

속성	설명
id	문자열. 이벤트의 고유 식별자
groupId	이벤트를 그룹화하기 위해 사용되는 식별자로서, 같은 groupId를 가진 이벤트는 하나의 그룹으로 간주
allDay	이벤트가 하루 종일 이벤트인지 여부
start	이벤트의 시작 날짜 및 시간
end	이벤트의 종료 날짜 및 시간
startStr	이벤트의 시작 날짜와 시간을 표시
endStr	이벤트의 종료 날짜와 시간을 표시
title	이벤트의 제목 또는 이름
url	이벤트와 연결된 URL
classNames	이벤트에 적용할  css클래스의 배열
editable	이벤트가 편집 가능한지 여부
startEditable	이벤트의 시작 시간을 편집할 수 있는지 여부
durationEditable	이벤트의 기간을 편집할 수 있는지 여부
resourceEditable	이벤트가  리소스에 대해 편집 가능한지 여부
display	이벤트의 표시 방법을 제어 (block, list, background 등)
overlap	이벤트가 겹치는지 여부를 확인하여 표시 순서를 조절
constraint	이벤트를 렌더링할 때 적용되는 드래그 및 리사이즈 제약 조건
backgroundcolor	이벤트의 배경색
borderColor	이벤트의 테두리 색상
textColor	이벤트 텍스트의 색상
extendedProps	사용자 정의 속성을 저장하는 객체
source	이벤트의 원본 데이터를 추적하기 위한 속성

Non-standard Fields

일부 특수한 필드를 사용하여 이벤트 객체에 추가 정보를 저장할 수 있다.

- extendedProps
   : 사용자 정의 속성을 저장하기 위한 객체이다.

     이 객체에 원하는 키-값 쌍을 추가하여 이벤트에 사용자 지정 정보를 저장할 수 있다.

var calendar = new Calendar(calendarEl, {
  events: [
    {
      title: 'BCH237',
      start: '2019-08-12T10:30:00',
      end: '2019-08-12T11:30:00',
     // 다른 이벤트 속성들...
     extendedProps: {
       description: "Additional information",
       referenceId: 12345,
       customData: { key: "value" }
     }
      description: 'Lecture'
    }
    // more events ...
  ],
  eventDidMount: function(info) {
    console.log(info.event.extendedProps);
    // {description: "Lecture", department: "BioChemistry"}
  }

});

 

 

Event Data Parsing

- eventDataTransform

  : 이벤트 데이터를 변환하고 가공하기 위한 콜백 함수.

    이 콜백 함수를 사용하여 원본 이벤트 데이터를 수정하거나 추가 데이터를 포함시킬 수 있다.

 

아래의 예시에서는 description 속성을 추가한다:

function(eventData) {
  eventData.description = "Additional description";
  return eventData;
}

 

- defaultAllDay

  : 종일 이벤트는 하루 동안 계속되는 이벤트로, 시간의 구체적인 범위가 없는 경우에 사용된다.

    기본값은 false이며, true로 설정하면 새로운 이벤트가 기본적으로 종일 이벤트로 생성된다.

    이는 사용자가 이벤트를 추가할 때 별도로 종일 이벤트로 설정하지 않아도 자동으로 종일 이벤트로 생성된다.

 

아래의 예시에서는 defaultAllDay를 true로 설정하여 새로운 이벤트가 종일 이벤트로 생성되도록 한다:

document.addEventListener('DOMContentLoaded', function() {
  var calendar = new FullCalendar.Calendar(calendarEl, {
    // 다른 설정들...
    defaultAllDay: true
  });
  calendar.render();
});

 

- defaultAllDayEventDuration

 :  새로운 종일 이벤트가 기본적으로 가지는 기간을 제어하는 속성이다.

    해당 속성을 이용하여 새로운 종일 이벤트의 기본 기간을 설정할 수 있다. 값은 일 수를 나타내는 정수로 설정된다.

    기본값은 '1'이며 이는 새로운 종일 이벤트의 기간이 하루로 설정됨을 의미한다.

 

아래 예시에서는 defaultAllDayEventDuration를 3으로 설정하여 종일 이벤트의 기본 기간을 3일로 설정한다.

document.addEventListener('DOMContentLoaded', function() {
  var calendar = new FullCalendar.Calendar(calendarEl, {
    // 다른 설정들...
    defaultAllDayEventDuration: 3
  });
  calendar.render();
});

 

- defaultTimedEventDuration

 : 시간이 있는 이벤트의 기본 지속 시간을 설정하는데 사용되는 속성이다.

   기본적으로 fullcalendar에서 이벤트 지속시간은 1시간이다.

   해당 속성을 이용하여새로운 이벤트를 생성할 때 기본적으로 설정되는 지속 시간을 변경 할 수 있다. 

 

아래 예시에서는 defaultTimedEventDuration을 3시간으로 설정한다.

document.addEventListener('DOMContentLoaded', function() {
  var calendar = new FullCalendar.Calendar(calendarEl, {
	defaultTimedEventDuration: '03:00:00' // 3시간
  });
  calendar.render();
});

 

- forceEventDuration

 : 이벤트의 지속 시간을 강제로 설정하는 옵션이다. 이벤트의 지속 시간을 강제로 설정할 수 있다.

   예를 들어, defaultTimedEventDuration 속성이 1시간으로 설정되어 있다면,

    forceEventDuration이 활성화되면 모든 이벤트의 지속 시간은 1시간으로 고정된다.

 

아래 예시는 forceEventDuration을 true로 설정하여 이벤트의 지속 시간을 강제로 설정한다.

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

 

 

Methods

- Calendar::getEvents

   : 현재 캘린더에 표시된 이벤트의 배열을 반환

var calendar = new FullCalendar.Calendar(calendarEl, {
  // 캘린더 설정들...
});

var events = calendar.getEvents();
console.log(events);

 

- Calendar::getEventById

  : 지정된 이벤트 ID에 해당하는 이벤트를 가져올 수 있다.

     반환된 이벤트 객체를 사용하여 해당 이벤트의 속성이나 메서드에 접근할 수 있다.

var event = calendar.getEventById(eventId);
if (event) {
  console.log(event.title); // 이벤트 제목 출력
  event.setProp('title', 'New Title'); // 이벤트 제목 변경
}

 

- Calendar::addEvent  
 :  캘린더에 새로운 이벤트를 추가할 수 있으며, 이를 통해 동적으로 이벤트를 생성하고 표시할 수 있다.

    이벤트의 속성은 필요에 따라 더 많이 추가할 수도 있다.

    새로운 이벤트를 추가하기 위해 addEvent 메서드를 호출하여 event 객체를 전달한다.

var event = {
  title: 'Meeting',  // 이벤트 제목
  start: '2023-05-01T10:00:00',    // 이벤트 시작 날짜/시간
  end: '2023-05-01T12:00:00'       // 이벤트 종료 날짜/시간
};

calendar.addEvent(event);

 

- Event::setProp

 : 이벤트 개체의 날짜와 관련되지 않은 속성을 수정한다.

    그러면 이벤트가 다시 랜더링된다. 동일한 groupId를 공유하는 다른 이벤트가 있는 경우 해당 이벤트의 속성도 동일하게 수정된다.

event.setProp('backgroundColor', 'red');
event.setProp('title', 'New Title');

 

- Event::setExtendedProp

 : 벤트 객체의 확장된 속성을 설정하는 데 사용된다. 확장된 속성은 사용자가 이벤트 객체에 추가적인 데이터를 저장할 수 있는 커스텀 속성이다.

아래 예시는 확장된 속성을 { key: 'value' }로 설정한다. 이를 통해 사용자 정의 데이터를 이벤트 객체에 추가할 수 있다.

let event = {
  title: 'Event 1',
  start: '2023-06-01T10:00:00'
};

event.setExtendedProp('customData', { key: 'value' });

 

- Event::setStart

 : 이벤트 객체의 시작 날짜/시간을 설정한다.

let calendar = new FullCalendar.Calendar(calendarEl, {
  events: [
    {
      title: 'Event 1',
      start: '2023-06-01T10:00:00',
      end: '2023-06-01T12:00:00'
    }
  ]
});

let event = calendar.getEventById('event-id');

if (event) {
  event.setStart('2023-06-02T14:00:00');
}

 

- Event::setEnd

 : 이벤트 객체의 종료 날짜/시간을 설정한다.

let calendar = new FullCalendar.Calendar(calendarEl, {
  events: [
    {
      title: 'Event 1',
      start: '2023-06-01T10:00:00',
      end: '2023-06-01T12:00:00'
    }
  ]
});

let event = calendar.getEventById('event-id');

if (event) {
  event.setEnd('2023-06-02T14:00:00');
}

 

- Event::setDates

 : 이벤트 객체의 시작 및 종료 날짜/시간을 한 번에 설정한다.

let calendar = new FullCalendar.Calendar(calendarEl, {
  events: [
    {
      title: 'Event 1',
      start: '2023-06-01T10:00:00',
      end: '2023-06-01T12:00:00'
    }
  ]
});

let event = calendar.getEventById('event-id');

if (event) {
  event.setDates('2023-06-02T14:00:00', '2023-06-02T16:00:00');
}

 

- Event::setAllDay

 : 이벤트 객체의 all-day 속성을 설정한다.

    true일 경우 이벤트를 종일 이벤트로 설정하고, false일 경우 시간 지정 이벤트로 설정한다.

    false로 변환하는 경우 이벤트의 시작 및 종료 날짜가 00:00:00으로 설정된다.

let calendar = new FullCalendar.Calendar(calendarEl, {
  events: [
    {
      title: 'Event 1',
      start: '2023-06-01',
      allDay: true
    }
  ]
});

let event = calendar.getEventById('event-id');

if (event) {
  event.setAllDay(false);
}

 

- Event::moveStart

 : 이벤트의 시작 날짜를 특정 기간만큼 이동한다. 이벤트의 종료 날짜를 수정하지 않는다. 

let calendar = new FullCalendar.Calendar(calendarEl, {
  events: [
    {
      title: 'Event 1',
      start: '2023-06-01T10:00:00',
      end: '2023-06-01T12:00:00'
    }
  ]
});

let event = calendar.getEventById('event-id');

if (event) {
  // 이벤트 객체의 시작일을 1일 이전으로 이동시킨다.
  event.moveStart(-1, 'days');
}

 

- Event::moveEnd

 : 특정 기간만큼 이벤트의 종료 날짜를 이동합니다. 이벤트의 시작 날짜는 동일하게 유지된다.

let calendar = new FullCalendar.Calendar(calendarEl, {
  events: [
    {
      title: 'Event 1',
      start: '2023-06-01T10:00:00',
      end: '2023-06-01T12:00:00'
    }
  ]
});

let event = calendar.getEventById('event-id');

if (event) {
  // 이벤트의 종료 날짜를 1일 이후로 이동 시킨다.
  event.moveEnd(1, 'days');
}

 

- Event::moveDates

 : 이벤트 시작 및 종료 날짜를 특정 기간만큼 이동한다.

let calendar = new FullCalendar.Calendar(calendarEl, {
  events: [
    {
      title: 'Event 1',
      start: '2023-06-01T10:00:00',
      end: '2023-06-03T12:00:00'
    }
  ]
});

let event = calendar.getEventById('event-id');

if (event) {
  // 이벤트 기간을 2일 이전으로 이동시킨다.
  event.moveDates(-2, 'days');
}

 

- Event::formatRange

 : 이벤트의 날짜를 문자열 형식으로 지정한다.

let calendar = new FullCalendar.Calendar(calendarEl, {
  events: [
    {
      title: 'Event 1',
      start: '2023-06-01T10:00:00',
      end: '2023-06-01T12:00:00'
    }
  ]
});

let event = calendar.getEventById('event-id');

if (event) {
  let range = {
    start: event.start,
    end: event.end
  };

  // 이벤트의 날짜/시간 범위를 "YYYY-MM-DD HH:mm" 형식으로 형식화한다.
  let formattedRange = calendar.formatRange(range, { 
    timeZone: 'local',
    format: 'YYYY-MM-DD HH:mm'
  });
}

 

- Event::remove

 : 이벤트를 제거한다.

let calendar = new FullCalendar.Calendar(calendarEl, {
  events: [
    {
      id: 'event1',
      title: 'Event 1',
      start: '2023-06-01T10:00:00',
      end: '2023-06-01T12:00:00'
    },
    {
      id: 'event2',
      title: 'Event 2',
      start: '2023-06-02T14:00:00',
      end: '2023-06-02T16:00:00'
    }
  ]
});

// ID가 "event1"인 이벤트를
let event = calendar.getEventById('event1');

if (event) {
  // 캘린더에서 제거
  event.remove();
}

 

- Event::getResources

 : 지정된 이벤트와 연결된 리소스를 가져온다.

var calendar = new Calendar(calendarEl, {
  resources: [
    { id: 'a', title: 'Resource A' },
    { id: 'b', title: 'Resource B' }
  ],
  events: [
    { id: '1', title: 'Event 1', start: '2020-06-01', resourceId: 'a' }
  ]
});

var event = calendar.getEventById('1');
var resources = event.getResources();
var resourceIds = resources.map(function(resource) { return resource.id });

console.log(resourceIds); // [ 'a' ]

 

- Event::setResources

 : 지정된 이벤트와 연결된 리소스를 설정한다.

리소스 ID배열을 사용 할 수 있다.

var event = calendar.getEventById('1');
event.setResources([ 'a' ]); // 단일 리소스 설정
event.setResources([ 'a', 'b' ]); // 다중 리소스 설정

리소스 개체의 배열을 사용 할 수 있다.

var resourceA = calendar.getResourceById('a');
var resourceB = calendar.getResourceById('b');

var event = calendar.getEventById('1');
event.setResources([ resourceA, resourceB ]);

 

- Event::toPlainObject

 : FullCalendar 이벤트 객체를 일반 JavaScript 객체로 변환하는 데 사용된다.

    이 메서드를 사용하여 FullCalendar 이벤트 객체를 직렬화하거나 다른 컴포넌트에 전달할 수 있다.

 

CallBacks

- eventAdd

 : 이벤트가 추가되었을 때 실행되는 콜백 함수. 이벤트 객체를 활용하여 추가된 이벤트에 대한 처리를 수행할 수 있다.

아래 코드는 eventAdd콜백을 사용하여 새로운 이벤트가 추가될 때마다 콘솔에 이벤트의 제목을 출력한다.

let calendar = new FullCalendar.Calendar(calendarEl, {
  events: [
    // 기존 이벤트들
  ],
  eventAdd: function (event) {
    console.log('Added event:', event.title);
  }
});

 

- eventChange

 : 이벤트가 변경되었을 때 실행되는 콜백 함수. 이벤트 객체들을 활용하여 변경된 이벤트에 대한 처리를 수행할 수 있다.

아래 코드는 eventChange콟3ㅐㄱ을 사용하여 이벤트가 변경될 때마다 콘솔에 이벤트의 제목을 출력한다.

let calendar = new FullCalendar.Calendar(calendarEl, {
  events: [
    // 기존 이벤트들
  ],
  eventChange: function (event, oldEvent) {
    console.log('Changed event:', oldEvent.title, 'to', event.title);
  }
});

 

- eventRemove

: 이벤트가 제거되었을 때 실행되는 콜백 함수. 제거된 이벤트에 대한 처리나 사용자 정의 동작을 수행할 수 있다.

아래 코드는 eventRemove콜백을 사용하여 이벤트가 제거될 때마다 콘솔에 이벤트 제목을 출력한다.

let calendar = new FullCalendar.Calendar(calendarEl, {
  events: [
    // 기존 이벤트들
  ],
  
  // event : 제거된 이벤트 객체
  // element : 해당 이벤트를 나타내는 HTML요소
  eventRemove: function (event, element) {
    console.log('Removed event:', event.title);
  }
});

 

- eventSet

 : 이벤트 데이터가 초기화되거나 변경된 후 실행되는 콜백 함수. 설정된 이벤트들에 대한 처리나 사용자의 정의 동작을 수행할 수 있다.

아래 코드는 eventSet콜백을 사용하여 이벤트가 설정될 때마다 콜솔에 설정된 이벤트들의 개수를 출력한다.

let calendar = new FullCalendar.Calendar(calendarEl, {
  eventsSet: function (events) {
  // event : 이벤트 개체의 배열
    console.log('Number of events:', events.length);
  }
});