[FullCalendar v6] 08. Event Sources (이벤트 목록 가져오기)

 

(서버) API 서버 구성하기

데이터를 보내줄 Node.js 서버를 만들어보자. (Express 프레임워크를 사용)

 

1) Node.js 서버를 구성할 디렉토리를 생성

: 나는 Fullcalendar 프로젝트의 서브 디렉토리 'server'를 생성했다.

 

2) npm init 실행

: 여러가지 질문이 떴는데 그냥 다 Enter 키 눌러서 기본값으로 셋팅되도록 했다.

 

3) express, cors 설치

> npm install express cors

 

 

4) app.js 작성

// app.js (Node.js)

const express = require("express");
const app = express();
const port = 3000;		// 원하는 포트번호로 진행해도 무방.
const cors = require('cors');

app.use(cors());

app.get("/", (req, res) => {
  res.send("Hello World!");
});

app.listen(port, () => {
  console.log(`Example app listening at http://localhost:${port}`);
});

 

 

5) 잘 실행되는지 확인 (http://localhost:3000 에서 확인)

: Hello World! 가 빈 페이지에 출력되면 성공이다!

 

 

 

(클라이언트) Event Sources를 fetch 하기

var calendar = new Calendar(calendarEl, {
  events: "http://localhost:3000"
});

 

이렇게 코드를 작성하고 index.html 을 브라우저에서 새로고침하면

 

 

이런식으로 start 와 end 쿼리파람을 자동으로 생성해서 요청한다.

현재 뷰에 보이는 모든 Date 들을 기준으로 start 와 end 를 만드는 듯 하다.

뷰 모드를 "주" 로 바꿨다가 화살표로 주 이동도 해보고 다시 "월" 모드로 바꾸니

여러 번의 요청을 하는 걸 Network 탭에서 확인할 수 있다.

 

 

여러번 요청이 들어가고 있다!!

 

 

 

 

(서버) 이벤트 데이터 내보낼 준비하기

클라이언트의 요청을 받아 Event Source 를 내보내는 라우터를 하나 추가해보자.

그 경로는 /events 로 할 것이다.

 

그리고 클라이언트가 start 와 end 범위를 넘겨줄텐데, 그에 맞는 Event 목록을 필터링해서 서버가 내보내야 하는 작업도 필요하다!

(주로 DB에서 데이터를 가져올 때)

 

나는 지금 간단 예제를 진행하는 경우라 DB 연결은 제외했고,

수동으로 Event 배열을 만들어서 내보낼 것이다.

 

app.get("/", (req, res) => {
	...
});

app.get("/events", (req, res) => {
    const events = [
        {
            title: "출근",
            start: "2024-08-03T09:00:00", // 시간까지 표시하려면 이렇게 표현!
            end: "2024-08-03T18:00:00",
        },
        {
            title: "개똥이랑 점심약속",
            start: "2024-08-08",
            end: "2024-08-09", // end 에 해당하는 날짜는 exclusive 날짜이다. (포함되지 않음)
        },
    ];

    res.json(events);
});

 

내보내는 event 의 타입은 FullCalendar가 정의한 Event Object 에 맞춰서 내보내야 한다!

>> https://fullcalendar.io/docs/event-object

 

 

(클라이언트) 서버가 보낸 Event 목록 받아내기

events: {
  url: "http://localhost:3000/events",
  failure: function() {
    alert("이벤트 목록을 가져오다가 문제가 발생했습니다.");
  },
}

 

failure 도 제공해주길래 써보기 위해 형태를 조금 바꾸었다.

 

 

 

 

응답 값을 보니 서버에서 작성한 Events 배열대로 잘 들어오는 것을 확인할 수 있다.

 

 

 

 

 

 

그리고 달력 뷰에도 일정이 자동으로 들어가지는 걸 확인!

 

 

 

 

 

// 전체코드는 아래 링크에서 확인해주세요.

https://github.com/yanghyeonjin/fullcalendar-v6-practice

GitHub - yanghyeonjin/fullcalendar-v6-practice: fullcalendar 라이브러리 v6 버전 맛보기