Open shilongdai opened 5 years ago
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;
}
@shilongdai
Did you match the calendarId
prop 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?
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.
@shilongdai
The value of item.archtype.id
and course's item.id must be the same.
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
}
]
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.
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.