英文:
How can I change the color of events of certain day regarding to their activities?
问题
[![示例图片][1]][1]
[1]: https://i.stack.imgur.com/oFRyo.png
在这个日历中，我想根据活动类型更改事件的颜色，例如长事件应该是绿色。
以下是我尝试获取的示例数据。
这是我从后端收到的数据。
```json
{
'title': '全天事件 非常长的标题',
'allDay': true,
'start': new Date(2023, 1, 1),
'end': new Date(2023, 1, 6),
'event': '常规'
},
{
'title': '长事件',
'start': new Date(2023, 1, 1),
'end': new Date(2023, 1, 1),
'event':'假日',
},
Front.js
<Calendar
views={["day", "agenda", "work_week", "month"]}
selectable
localizer={localizer}
defaultDate={new Date()}
defaultView="month"
events={eventsData}
style={{ height: "95%" }}
onSelectEvent={(event) => alert(event.title)}
onSelectSlot={handleSelect}
/>
英文:
So in this calendar, I want to change the color of event depending to their activities, so for example the long event should have a color green.
so this is the sample data i'm trying to get.
this is what I received from my backend.
{
'title': 'All Day Event very long title',
'allDay': true,
'start': new Date(2023, 1, 1),
'end': new Date(2023, 1, 6),
'event': 'regular'
},
{
'title': 'Long Event',
'start': new Date(2023, 1, 1),
'end': new Date(2023, 1, 1),
'event':'holiday',
},
Front.js
<Calendar
views={["day", "agenda", "work_week", "month"]}
selectable
localizer={localizer}
defaultDate={new Date()}
defaultView="month"
events={eventsData}
style={{ height: "95%" }}
onSelectEvent={(event) => alert(event.title)}
onSelectSlot={handleSelect}
/>
答案1
得分: 1
我认为你可以在事件对象上提供 color 和 bgcolor 属性以及其他属性，如果这个包不支持它，可以使用 Full Calendar，你肯定可以在完整的日历上这样做，
events=[
{
groupId: '2023-02-05',
title: '全天',
allDay: true,
backgroundColor: '#A685DB',
textColor: 'white',
borderColor: '#A685DB',
start: '2023-02-05T12:00',
},
{
groupId: '2023-02-05',
title: 'KLB003',
backgroundColor: '#E31BCF',
textColor: 'white',
borderColor: '#E31BCF',
start: '2023-02-05T14:00',
}
]
尝试按照这个结构提供。
英文:
I think you can provide color and bgcolor attributes along with other properties on event object,
If this package doesn't support's it, Use Full calendar, You surely can do that on full calendar,
events={[
{
groupId: '2023-02-05',
title: 'Full Time',
allDay: true,
backgroundColor: '#A685DB',
textColor: 'white',
borderColor: '#A685DB',
start: '2023-02-05T12:00',
},
{
groupId: '2023-02-05',
title: 'KLB003',
backgroundColor: '#E31BCF',
textColor: 'white',
borderColor: '#E31BCF',
start: '2023-02-05T14:00',
}]
Try supplying on this structure.
答案2
得分: 0
可以通过处理库提供的eventPropGetter函数，并返回需要应用的样式来实现。然后，您可以通过以下结构来决定哪个事件更短/更长：
const eventPropGetter = (event) => {
console.log("event", event.isLong);
if (event.isLong) {
return {
style: {
backgroundColor: "#f0ad4e",
borderRadius: "0px",
opacity: 0.8,
color: "white",
border: "none"
}
};
}
// 为短事件自定义样式
return {
style: {
backgroundColor: "#5cb85c",
borderRadius: "0px",
opacity: 0.8,
color: "white",
border: "none"
}
};
};
然后，您可以通过以下方式来定义事件，以确定哪些事件是较短的或较长的：
export const events = [
{
'title': '全天事件，非常长的标题',
'allDay': true,
'start': new Date(2023, 1, 1),
'end': new Date(2023, 1, 6),
'event': '常规',
// 这里还有一个键
'isLong': true
},
{
'title': '长事件',
'start': new Date(2023, 1, 1),
'end': new Date(2023, 1, 1),
'event':'假日',
// 这里还有一个键
'isLong': false
},
];
请注意，这是JavaScript代码的翻译，不包括任何其他内容。
英文:
It is possible by handling eventPropGetter function provided by lib and returing your style that needs to be applied.
const eventPropGetter = (event) => {
console.log("event", event.isLong);
if (event.isLong) {
return {
style: {
backgroundColor: "#f0ad4e",
borderRadius: "0px",
opacity: 0.8,
color: "white",
border: "none"
}
};
}
// Customize styles for short events
return {
style: {
backgroundColor: "#5cb85c",
borderRadius: "0px",
opacity: 0.8,
color: "white",
border: "none"
}
};
};
And then you only decide which event is shorter/longer by structuring like this,
export const events = [
{
'title': 'All Day Event very long title',
'allDay': true,
'start': new Date(2023, 1, 1),
'end': new Date(2023, 1, 6),
'event': 'regular',
//one more key here
'isLong': true
},
{
'title': 'Long Event',
'start': new Date(2023, 1, 1),
'end': new Date(2023, 1, 1),
'event':'holiday',
//one more key here
'isLong': false
},
];
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论