Javascript jQuery完整日历：从前端为每个事件设置不同的颜色

以下是我使用插件的方式：

jQuery（文档）.ready（函数（）{
jQuery（“#预订日历”）.fullCalendar({
标题：{
左：“上一个，下一个”，
中心：'标题'，
右图：“月，基本周，基本日”
},
是的，
事件：'/bookingsfeed.php'
});
jQuery（“#单元选择器”）.change（function（）{
公寓=jQuery（this）.val（）
jQuery（“#预订日历”）.fullCalendar（'removeEvents'）
jQuery（“#预订日历”）.fullCalendar（'addEventSource'{
url:“/bookings feed.php”，
键入：“POST”，
数据：{
公寓：公寓
}
})
})
})

这就是它的样子：

正如你所看到的，跟踪一个事件的开始和结束有点困难，所以我想改变每个事件的颜色

这里的问题是，每个事件可能在不同的周内被拆分（如示例中），每个周都有不同的DOM事件（这很有意义），并且它们没有任何相关的类

---

如何使每个事件的颜色不同？

要使每个事件的颜色不同，有几种方法可以解决您的问题

更新事件提要“/bookings feed.php”，并向事件对象添加颜色（背景和边框）、背景颜色、文本颜色或边框颜色

分离并更新事件源以使用eventSources。它允许您按颜色和文本颜色对事件进行分组

$（“#日历”）.fullCalendar({
事件来源：[
//您的事件源
{
events:[//将数组放入'events'属性中
{
标题：“事件1”，
开始：“2010-01-01”
},
{
标题：“事件2”，
开始日期：“2010-01-05”，
完：2010-01-07
},
{
标题：“事件3”，
开始：“2010-01-09 12:30:00”，
}
],
颜色：'黑色'，//一个选项！
textColor:'黄色'//一个选项！
}
//任何其他事件源。。。
]
});您可以尝试使用eventAfterRender回调。检查

这样，您将获得“整个”事件，并根据随机选择操纵其颜色

为了让你有个想法，我使用了这个回调，但是颜色会根据事件发生的那天而改变。如果事件已计划、正在发生或已经发生，则颜色会更改

eventAfterRender: function (event, element, view) {
        var dataHoje = new Date();
        if (event.start < dataHoje && event.end > dataHoje) {
            //event.color = "#FFB347"; //Em andamento
            element.css('background-color', '#FFB347');
        } else if (event.start < dataHoje && event.end < dataHoje) {
            //event.color = "#77DD77"; //Concluído OK
            element.css('background-color', '#77DD77');
        } else if (event.start > dataHoje && event.end > dataHoje) {
            //event.color = "#AEC6CF"; //Não iniciado
            element.css('background-color', '#AEC6CF');
        }
    },

eventAfterRender:函数（事件、元素、视图）{
var dataHoje=新日期（）；
if（event.startdataHoje）{
//event.color=“#FFB347”//Em andamento
css（'background-color'，'#FFB347'）；
}else if（event.startdataHoje&&event.end>dataHoje）{
//event.color=“#AEC6CF”//Não iniciado
css（'background-color'，'#AEC6CF'）；
}
},
事件列表对象，其中有“开始”、“结束”、“重叠”、“渲染”等属性，您还有一个名为“颜色”的属性，可以在其中指定事件的颜色

查看下面使用颜色属性的演示代码：

        events: [
            {
                start: '2017-11-24',
                end: '2017-11-28',
                overlap: false,
                rendering: 'background',
                color: '#257e4a'
            },
            {
                start: '2017-11-06',
                end: '2017-11-08',
                overlap: false,
                rendering: 'background',
                color: '#ff9f89'
            }]

我这里的问题是，我没有访问后端实现的权限，所以我正在寻找一个只支持前端的实现。。。这就是为什么我需要选择DOM元素。。。无论如何谢谢你！有什么想法吗？例如，在上面3周的活动中，你希望同一个活动在3周的每一周都有不同的颜色？还是每个活动只需要一种颜色？您想要特定事件类型的颜色还是随机颜色？如果您没有任何后端访问权限，可以解析事件提要并手动添加颜色？我希望同一事件的每个实例都具有随机颜色（是的，事件持续3周）。谢谢！有趣的是，当我应用（缓存的）随机颜色（element.css（'color'，mycachedrandomcolor）；）时，每一行（即使来自同一事件）都会得到不同的颜色；知道为什么吗？这很奇怪。。。也许可以尝试eventRender回调
        events: [
            {
                start: '2017-11-24',
                end: '2017-11-28',
                overlap: false,
                rendering: 'background',
                color: '#257e4a'
            },
            {
                start: '2017-11-06',
                end: '2017-11-08',
                overlap: false,
                rendering: 'background',
                color: '#ff9f89'
            }]