the color of the dynamically generated galendar does not apply to the schedule.

[qkrtngus2085]

hello.
I'm currently using the calendar from toast-ui.

dynamically generated calendars will pop up correctly.

however, the color of the schedule generated by that label is not displayed correctly.
The color of the generated calenadr is red, but the color of the schedule generated by that calenadr appears green.

When you refresh the page, it looks correctly.

watch: {
    labelCalendarList (valueList) {
        valueList.map ((value) => {
            this.$refs.tuiCalendar.invoke("setCalendarColor", value.id, {
                color: value.color,
                borderColor: value.borderColor,
                bgColor: value.bgColor,
            }); 
        });
    }
}

The problem was resolved through the code.

[jungeun-cho]

@qkrtngus2085
Set the calendarId to a nonzero number.

or

How about setting a calendarId as a string?

The calendarId should match the calendarId in the schedule data!

scheduleList: [
  {
     id: '1',  // scheduleId
     calendarId: '0', // calendarId (nonzero number or string)
     title: 'TOAST UI Calendar Study',
     category: 'time',
     dueDateClass: '',
     start: today.toISOString(),
     end: getDate('hours', today, 3, '+').toISOString()
  },
  {
    id: '2', // scheduleId
    calendarId: '1',  // calendarId
    title: 'Practice',
    category: 'milestone',
    dueDateClass: '',
    start: getDate('date', today, 1, '+').toISOString(),
    end: getDate('date', today, 1, '+').toISOString(),
    isReadOnly: true
  },
...
labelCalendarList: [
  {
    id: '0',  // calendarId
    name: 'Company',
    color: '#000',
    borderColor: '#ffe082',
    bgColor: '#ffe082'
  },
  {
    id: '1', // calendarId
    name: 'Family',
    color: '#000',
    borderColor: '#c0ef97',
    bgColor: '#c0ef97'
  }
]
...

[mariusa]

Hi,

Is this related to nhn/tui.calendar#432 ?

In your example above it seems it works (as it should).