[FullCalendar v6] 09. Event Color (이벤트에 배경색 넣기)

 

이벤트에 배경색을 넣는 방법은 여러가지가 있는데,

나는 서버 쪽에서 만든 이벤트 목록을 바로 보여주기 때문에 Event Object로 배경색을 설정해보겠다.

 

 

app.get("/events", (req, res) => {
    const events = [
        {
            title: "출근",
            start: "2024-08-03T09:00:00", // 시간까지 표시하려면 이렇게 표현!
            end: "2024-08-03T18:00:00",
            backgroundColor: "green",
            borderColor: "green",
            textColor: "white",
            display: "block",             // 종일 이벤트가 아닌 경우에는 display가 dot-list 형식으로 나와 배경색을 적용 X
                                          // 배경색이 적용될 수 있도록 display block 설정
        },
        {
            title: "개똥이랑 점심약속",
            start: "2024-08-08",
            end: "2024-08-09", // end 에 해당하는 날짜는 exclusive 날짜이다. (포함되지 않음)
            backgroundColor: "purple",
            borderColor: "purple",
            textColor: "white"
        },
    ];

    res.json(events);
});

 

 

 

 

<< 결과물 >>