根据事件类型(循环事件)、单元格bg颜色的不同，角8\primeng/满日历样式不同。
这是我如何在我的角度8应用程序使用完整日历：
calendar.component.ts：
export class MyCalendarComponent implements OnInit {
public plantedActivities: PlantedActivityModel[]
public actuatorActivities: ActuatorActivityModel[]
events
options
constructor(
private service: CalendarService,
) {
}
ngOnInit() {
this.events = [];
this.options = {
plugins: [dayGridPlugin, timeGridPlugin, interactionPlugin],
defaultDate: '2020-03-01',
header: {
left: 'prev,next',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay'
},
editable: true,
dateClick: (e) => {
console.log(e)
},
eventClick: (e) => {
console.log(e)
}
};
this.service.currentAll.subscribe(res => {
this.plantedActivities = res.plantedActivities
for (let plantActivity of this.plantedActivities) {
this.events = [... this.events,
{
"title": "Planted: " + plantActivity.plant.englishName,
"start": plantActivity.date,
type: 'plant'
}];
}
this.actuatorActivities= res.actuatorActivities
for (let actuatorActivity of this.actuatorActivities) {
this.events = [... this.events,
{
"title": actuatorActivity.actuator.title + ": " + actuatorActivity.action_took,
"start": actuatorActivity.date,
type: 'actuator'
}]
}
}
}calendar.component.html
<div class="container">
<p-fullCalendar [events]="events" [options]=options></p-fullCalendar>
</div>我很难找到一种控制不同事件类型的样式的方法，。
我尝试过使用ng-满历和/或ngx-全历，但是我在日历ui本身上面临着不同的问题，它不会像它所想的那样加载，所以ngx-全历我更喜欢使用primeng满日历，因为除了不同类型的事件 (bg单元格颜色、事件颜色、事件bg颜色.)的样式以外，我还遇到了其他任何问题.
我想我应该做这样的事：
this.options = {
...
eventColor: this.eventColor(),
eventTextColor: "#fff",
};this.eventColor()将根据事件的类型返回颜色，但我不知道如何在函数中传递事件参数。有什么办法吗？
，我想我也可以通过迭代日历上的事件来解决这个问题，在它们被初始化之后，是否有一种循环的方法？
另外，我不知道热到改变一个事件的单元格bg颜色。
回答 3
Stack Overflow用户
发布于 2020-03-17 11:22:24
var calendar = new Calendar(calendarEl, {
events: [
// my event data
],
eventColor: '#378006'
});
This may help you
Got from https://fullcalendar.io/docs/eventColor
--> For single date color (Below code)
dayRender: function (date, cell) {
var today = $.fullCalendar.moment();
var end = $.fullCalendar.moment().add(7, ‘days’);
if (date.get(‘date’) == today.get(‘date’)) {
cell.css(“background”, “#e8e8e8”);
}
},Stack Overflow用户
发布于 2020-03-17 13:29:26
不是解决我的问题，但经过大量搜索，我找不到答案，所以我决定使用jQuery wayout。
所以，我使用的是jQuery的完整日历，我推荐它，因为没有很多关于角度方式的文档。
您可以按照本教程将完整的日历与jQuery集成到您的角度应用程序中。
这样做后，解决方案很简单。我刚用了eventRender
$("#calendar").fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
navLinks: true,
editable: true,
eventLimit: true,
events: _this.events,
eventTextColor: "white",
eventRender: function (event, element) {
if (event.type == "planted") {
element.css('background-color', '#08b394');
} else {
element.css('background-color', '#2a7568');
}
}
});Stack Overflow用户
发布于 2020-12-23 14:42:03
不知道这是否仍然对您有帮助，但我遇到了同样的问题，我通过使用一组表示组的类来解决这个问题。
在我的用例中，我有4个“组”的日期，其中我有一个可变数量的"subGroups“。在subGroups对象上，我定义了一个属性，并将其设置为“红色”或“绿色”这样的颜色。因此，每个子组都有自己的(硬编码)颜色。
然后，当设置完整日历所称的所有“事件”时，我遍历所有组，然后在这些子组中设置子组和事件，并在创建“事件”时设置eventColor: subgroup.color。这确保了存储在子组中的所有事件都具有父subGroup的颜色。
https://stackoverflow.com/questions/60721219
复制相似问题
腾讯云开发者
