完整日历 V4 - 单击事件时,如何更改日期的颜色

问题描述 投票:0回答:2

我正在使用月视图。我显示所有日期,并且我想将每一天标记为“工作日”、“加班日”、“假期”等。

我将上面的每个标签都设置为事件,并且显示正常。我的下一个目标是选择日期并申请休假。当我单击一天时,它会触发 dateClick 并将背景颜色更改为绿色。如果我再次选择相同的日期,我会将背景颜色更改回白色。这给人一种用户选择/取消选择日期的感觉。可以像这样选择多个日期,颜色会变成绿色,并且我维护一个选定日期的列表。

if (info.dayEl.style.backgroundColor == 'green') {
    info.dayEl.style.backgroundColor = 'white';
  } else {
    info.dayEl.style.backgroundColor = 'green';
  }

问题:当我单击一天中的事件(例如加班等)时,我无法更改当天整个单元格的背景颜色。

当单击事件时, eventClick 会被触发,并且在该函数中我尝试通过执行以下操作来触发“选择”

this.fullCalendarMonthly.getCalendar().select(info.event.start);

但它不附带任何 html 元素和样式。

还有其他方法可以实现这一目标吗?

javascript angular fullcalendar fullcalendar-4
2个回答
0
投票

在事件单击时,我循环使用 css 类来完成它。

var week = info.el.closest(".fc-content-skeleton").closest(".fc-week");
var days = week.querySelectorAll(".fc-day");
days.forEach(day => {
  if (day.attributes["data-date"].value == currentDate) {
      day.style.backgroundColor = '#123';
  }
}); 

0
投票

从哪里可以下载不同版本的 fulcalendar?我使用的是 fullcalendar.min.js 版本 v3.4.0,不知道如何升级。 谢谢

© www.soinside.com 2019 - 2024. All rights reserved.