Calendar Color not working as specified in the API documentation

[shilongdai]

Version

"@toast-ui/react-calendar": "1.0.3"

Test Environment

OpenSUSE, 60.8.0esr

Current Behavior

The color of the individual schedules does not change based on the color set in the corresponding calendar. The default greenish color is used all the time.

 render() {
        let calendars = [];
        for (let item of this.props.courses) {
            let calColor = getRandomColor();
            calendars.push({
                id: item.id,
                name: item.subject + item.courseNumber.toString(),
                bgColor: calColor,
                borderColor: calColor
            });
        }

        let schedules = [];
        let currentScheduleId = 0;
        for (let item of this.props.sections) {
            let duration = getScheduleDuration(item);
            for (let timeframe of duration) {
                schedules.push({
                    id: currentScheduleId++,
                    trueId: item.id,
                    calendarId: item.archtype.id,
                    title: item.archtype.subject + item.archtype.courseNumber + "-" + item.section,
                    category: "time",
                    start: timeframe.start.toISOString(),
                    end: timeframe.end.toISOString(),
                    isReadOnly: true
                });
            }
        }

        return (
            <Calendar usageStatistics={false} defaultView={"week"} disableDblClick={true} disableClick={true}
                      isReadOnly={true} taskView={false} scheduleView={true} useDetailPopup={true} calendars={calendars}
                      schedules={schedules}/>
        )
    }

In this screenshot, the COMP 410 and COMP 411 should be colored differently since they are on two different calendars.

Expected Behavior

I expected the background color of all the schedules under the same calendar to be the randomly generated color as suggested by the example at: https://nhn.github.io/tui.calendar/latest/CalendarProps in the code snippet above.

[shilongdai]

Get Random Color Code:

function getRandomColor() {
    var letters = '0123456789abcdef';
    var color = '#';
    for (var i = 0; i < 6; i++) {
        color += letters[Math.floor(Math.random() * 16)];
    }
    return color;
}

[jungeun-cho]

@shilongdai Did you match the calendarIdprop value of the schedule with the id value of the calendar?

for (let item of this.props.courses) {
            let calColor = getRandomColor();
            calendars.push({
                id: item.id, // string?
                name: item.subject + item.courseNumber.toString(),
                bgColor: calColor,
                borderColor: calColor
            });
        }

...
 schedules.push({
                    id: currentScheduleId++,
                    trueId: item.id,
                    calendarId: item.archtype.id, // string?

Is the value of item.archtype.id a string?

[shilongdai]

Thanks for the quick response. The item.id in the loop for the calendar does match with the item.archtype.id in the schedule loop, and that is enforced by the backend database. The ids are integers but I have tried to convert them to string. After converting to string, the behaviour did not change.

[jungeun-cho]

@shilongdai The value of item.archtype.id and course's item.id must be the same.

[shilongdai]

As I said previously, they are the same

render() {
        let calendars = [];
        let colors = {};
        console.log("Adding Calendars");
        for (let item of this.props.courses) {
            let calColor = getRandomColor();
            calendars.push({
                id: item.id.toString(),
                name: item.subject + item.courseNumber.toString(),
                bgColor: calColor,
                borderColor: calColor,
                color: calColor
            });
            colors[item.id] = calColor;
        }
        console.log(calendars);

        let schedules = [];
        let currentScheduleId = 0;
        console.log("Adding Schedules");
        for (let item of this.props.sections) {
            let duration = getScheduleDuration(item);
            for (let timeframe of duration) {
                schedules.push({
                    id: currentScheduleId++,
                    trueId: item.id.toString(),
                    calendarId: item.archtype.id.toString(),
                    title: item.archtype.subject + item.archtype.courseNumber + "-" + item.section,
                    category: "time",
                    start: timeframe.start.toISOString(),
                    end: timeframe.end.toISOString(),
                    isReadOnly: true,
                    bgColor: colors[item.id],
                    borderColor: colors[item.id],
                    color: colors[item.id]
                });
            }
        }
        console.log(schedules);

        return (
            <Calendar usageStatistics={false} defaultView={"week"} disableDblClick={true} disableClick={true}
                      isReadOnly={true} taskView={false} scheduleView={true} useDetailPopup={true} calendars={calendars}
                      schedules={schedules}/>
        )
    }

Console Output:

Adding Calendars
[
  {
    "id": "409",
    "name": "COMP410",
    "bgColor": "#dc9d00",
    "borderColor": "#dc9d00",
    "color": "#dc9d00"
  }
]
Adding Schedules
[
  {
    "id": 0,
    "trueId": "8221",
    "calendarId": "409",
    "title": "COMP410-001",
    "category": "time",
    "start": "2019-09-23T17:25:23.782Z",
    "end": "2019-09-23T18:40:23.782Z",
    "isReadOnly": true
  },
  {
    "id": 1,
    "trueId": "8221",
    "calendarId": "409",
    "title": "COMP410-001",
    "category": "time",
    "start": "2019-09-25T17:25:23.782Z",
    "end": "2019-09-25T18:40:23.782Z",
    "isReadOnly": true
  }
]

[jungeun-cho]

Can you write in detail so I can reproduce it? Is there a codepen or jsfiddle link?