set calendars by asynchronous request，the view doesn't change,but when i call getOptions function, the calendars is right

[DamonSnow]

Version

"@toast-ui/vue-calendar": "^1.0.3",

Test Environment

windows 10

Current Behavior

code of template

<calendar ref="tuiCalendar"
                          style="height: 800px;"
                          :calendars="calendarList"
                          :schedules="scheduleList"
                          :view="view"
                          :month="month"
                          :week="week"
                          :taskView="taskView"
                          :scheduleView="scheduleView"
                          :theme="theme"
                          :disableDblClick="disableDblClick"
                          :isReadOnly="isReadOnly"
                          :template="template"
                          :useCreationPopup="useCreationPopup"
                          :useDetailPopup="useDetailPopup"
                          @beforeCreateSchedule="onBeforeCreateSchedule"
                          @clickSchedule="onClickSchedule"
                          @beforeUpdateSchedule="onBeforeUpdateSchedule"
                />

and data is blow

calendarList: [
                    {
                        "id": 1,
                        "name": "My Calendar",
                        "color": "#FFFFFF",
                        "bgColor": "#9E5FFF",
                        "dragBgColor": "#9E5FFF",
                        "borderColor": "#9E5FFF"
                    },
                    {
                        "id": 2,
                        "name": "Company",
                        "color": "#FFFFFF",
                        "bgColor": "#00A9FF",
                        "dragBgColor": "#00A9FF",
                        "borderColor": "#00A9FF"
                    }
                ],
                scheduleList: [
                    {
                        id: '1',
                        calendarId: '1',
                        title: 'my schedule',
                        category: 'time',
                        dueDateClass: '',
                        start: '2019-03-18T22:30:00+09:00',
                        end: '2019-03-19T02:30:00+09:00'
                    },
                    {
                        id: '2',
                        calendarId: '2',
                        title: 'second schedule',
                        category: 'time',
                        dueDateClass: '',
                        start: '2019-03-20T17:30:00+09:00',
                        end: '2019-03-22T17:31:00+09:00'
                    }
                ],
                view: 'month',
                taskView: false,
                scheduleView: ['time'],
                theme: theme.theme,
                month: {
                    daynames: [this.$t("Sun"),this.$t("Mon"),this.$t("Tue"),this.$t("Wed"),this.$t("Thu"),this.$t("Fri"),this.$t("Sat")],
                    narrowWeekend: true,
                    startDayOfWeek: 1, // monday
                    visibleScheduleCount: 4
                },
                week: {
                    narrowWeekend: true,
                    daynames: [this.$t("Sun"),this.$t("Mon"),this.$t("Tue"),this.$t("Wed"),this.$t("Thu"),this.$t("Fri"),this.$t("Sat")],
                },
                disableDblClick: false,
                isReadOnly: false,
                template: {
                    milestone: function (schedule) {
                        return `<span style="color:red;">${schedule.title}</span>`;
                    },
                    milestoneTitle: function () {
                        return 'MILESTONE';
                    },
                    allday: function (schedule) {
                        return schedule.title;
                    },
                },
                useCreationPopup: false,
                useDetailPopup: false,

then the code of mounted

mounted: function () {
            calendars().then(res => {
                console.log(res.data.data)
                this.calendarList = res.data.data
            })
            console.log(this.calendarList);
            this.setRenderRangeText()
        },

the return of data is below

{
    "data": [
        {
            "id": 1,
            "name": "My Calendar",
            "color": "#FFFFFF",
            "bgColor": "#9E5FFF",
            "dragBgColor": "#9E5FFF",
            "borderColor": "#9E5FFF"
        },
        {
            "id": 2,
            "name": "Company",
            "color": "#FFFFFF",
            "bgColor": "#00A9FF",
            "dragBgColor": "#00A9FF",
            "borderColor": "#00A9FF"
        }
    ]
}

so the color of schedule text must be black,but the color of text is white

so i use console.log(this.$refs.tuiCalendar.invoke('getOptions')) to print the options, the result is below:

Expected Behavior

can you help me to figure out?

[jungeun-cho]

@DamonSnow
Why should the calendar text color be black?

        {
            "id": "1",    // The id is a string.
            "name": "My Calendar",
            "color": "#FFFFFF", // white!!
            "bgColor": "#9E5FFF",
            "dragBgColor": "#9E5FFF",
            "borderColor": "#9E5FFF"
        },
        {
            "id": "2",
            "name": "Company",
            "color": "#FFFFFF", // white!!
            "bgColor": "#00A9FF",
            "dragBgColor": "#00A9FF",
            "borderColor": "#00A9FF"
        }

Basically,
Calendar list information exists and creates a schedule.
If you already have a schedule and want to change the style of your calendar, use setCalendarColor

            this.$refs.tuiCalendar.invoke('setCalendarColor', '1', {
                color: '#000',    // black!!
                bgColor: '#9E5FFF',
                borderColor: '#9E5FFF'
            });

            this.$refs.tuiCalendar.invoke('setCalendarColor', '2', {
                color: '#fff',
                bgColor: '#00A9FF',
                borderColor: '#00A9FF'
            });

Check https://nhnent.github.io/tui.calendar/latest/Calendar#setCalendarColor

[DamonSnow]

thanks for you answer, this is vary helpful!