Event API와 Event 표시용 Library의 데이터 양식 통일하기

[ucharles]

문제

Event API의 데이터 출력 양식과 Event를 화면에 표시하는 Library의 데이터 입력 양식이 서로 다름.
화면단에 API 데이터를 올바르게 표시하기 위해선 입출력 데이터 양식을 확인해야함.

데이터 양식 정리

Event API

const eventSchema = new Schema(
  {
    title: { type: String },
    startTime: {
      type: Date,
      required: true,
    },
    endTime: {
      type: Date,
      required: true,
    },
    creator: { type: mongoose.Types.ObjectId, ref: "User" },
    calendar: { type: mongoose.Types.ObjectId, ref: "Calendar" },
  },
  { timestamps: true }
);

FullCalendar

• id: String. event의 고유 식별자.
• start: Date object. 이벤트의 시작. 현재의 timezone에 따름.
• end: Date object. 이벤트의 끝. 현재의 timezone에 따름. null 가능.
• backgroudColor: String. CSS color format 사용 가능. #f00, #ff0000, rgb(255,0,0), or red.
• borderColor: String. CSS color format 사용 가능.
• textColor: String. CSS color format 사용 가능.

react-calendar-timeline

item object 와 group object 가 존재함.
각 객체의 key를 따로 정의할 수 있음.

{
  groupIdKey: 'id',
  groupTitleKey: 'title',
  groupRightTitleKey: 'rightTitle',
  itemIdKey: 'id',
  itemTitleKey: 'title',    // key for item div content
  itemDivTitleKey: 'title', // key for item div title (<div title="text"/>)
  itemGroupKey: 'group',
  itemTimeStartKey: 'start_time',
  itemTimeEndKey: 'end_time',
}

[ucharles]

react-calendar-timeline에서는 각 key를 따로 정의할 수 있지만,
FullCalendar에서는 그런 기능이 딱히 보이지 않음.

FullCalendar를 사용할 때는 프론트에서 알맞게 데이터를 가공하기로 한다.
close 하겠습니다.