[FullCalendar v5] Event Sources

events (as a json feed)

이벤트를 서버로부터 가져올 때 사용한다.

Node.js 서버 구성하기

테스트를 위해 데이터를 보내줄 Node 서버를 만들어보자.

// app.js
const express = require("express");
const app = express();
const port = 3000;

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

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

이벤트 데이터 준비

app.get("/events", (req, res) => {
  // 이벤트 데이터
  const events = [
    {
      title: "Event 1",
      start: "2020-12-05T09:00:00", // 시간까지 표시하려면 이렇게 표현!
      end: "2020-12-05T18:00:00",
    },
    {
      title: "Event 2",
      start: "2020-12-08",
      end: "2020-12-10", // 2020-12-10을 제외한 날까지 범위가 형성된다.
    },
  ];

  res.json(events);
});

클라이언트에서 데이터 받기

events: {
  url: "http://localhost:3000/events",
  method: "GET",
  failure: function () {
    alert("there was an error while fetching events!");
  },
}

---

• 전체 코드
• https://github.com/yanghyeonjin/panda-fullcalendar-v5