是否可以在FullCalendar中的[]事件中设置单个事件的颜色?
Is it possible to set colors per single event within events: [] in FullCalendar?
我在http://arshaw.com/fullcalendar/使用FullCalendar。
我正在用PHP建立一个events: []
列表:
<?php
$dbh = new PDO('mysql:host=localhost;dbname=calendar', 'user', 'pass');
$stmt = $dbh->prepare("SELECT * FROM holidays");
$stmt->execute();
$return_array = array();
$event_array;
while ($row = $stmt->fetch(PDO::FETCH_ASSOC)) {
$event_array = array();
$event_array['id'] = $row['id'];
$event_array['title'] = $row['id'] . " - " . $row['forename'] . " " . $row['surname'];
$event_array['start'] = $row['start'];
$event_array['end'] = $row['end'];
$event_array['allDay'] = true;
// what I want to be able to do
if ($row['department'] == 'UK') { $event_array['color'] = '#000000'; };
if ($row['department'] == 'US') { $event_array['color'] = '#000000'; };
else { $event_array['color'] = '#000000'; };
array_push($return_array, $event_array);
}
echo json_encode($return_array);
?>
我想知道是否有可能在数组中为每个单独的事件着色。我在http://arshaw.com/fullcalendar/docs/event_data/events_array/上看到可以设置颜色,但这些都是在整个eventSources: []
上设置的,而不是在相同的eventSource
中可以改变每个事件的颜色。
这是可能的吗?
我假设你的JS是正确显示你创建的json数组,不能告诉没有你的JS代码。
您可以使用一个名为className
的属性,它将指定添加到每个事件的类。
在你的例子中,你应该能够做这样的事情:
while ($row = $stmt->fetch(PDO::FETCH_ASSOC)) {
$event_array = array();
$event_array['id'] = $row['id'];
$event_array['title'] = $row['id'] . " - " . $row['forename'] . " " . $row['surname'];
$event_array['start'] = $row['start'];
$event_array['end'] = $row['end'];
$event_array['allDay'] = true;
// Apply a different class depending on the department
if ($row['department'] == 'UK') {
$event_array['className'] = 'uk_event';
} else if ($row['department'] == 'US') {
$event_array['className'] = 'us_event';
} else {
$event_array['className'] = 'general_event';
};
array_push($return_array, $event_array);
}
然后在显示日历的页面上,您可以使用一些CSS来样式化这些规则,例如:
.uk_event {
background-color:blue;
}
.us_event {
background-color:red;
}
.general_event {
background-color:black;
}
英国赛事用蓝色,美国赛事用红色等等…
看看我多年前用FullCalendar创建的日历,我必须更具体,并对子div应用样式更改:
.uk_event div {
background-color:blue;
}
我不确定现在是否有必要这样做,或者我当时为什么要那样做。可能是版本差异的事情,我不确定,尝试两者,看看是否工作。
这就是怎么做的大致思路
相关文章:
- 在onmouseover事件中更改图像,并为每个事件设置中断/间隔
- 创建元素并将事件设置为类时 JQuery 重复事件
- jQuery image.Load 事件不触发,如果 image.src 从 PageShow 事件设置并返回到同一页面
- 如何对链式事件设置条件
- 使用鼠标悬停/悬停事件设置隐藏元素的值
- 如何根据索引中控件的onchange事件设置mvc 5视图中隐藏字段的值
- 如何将事件设置为最顶级的父React样式
- 在jquery UI中为多个事件设置一个回调
- 对Textbox KeyDown事件设置jQuery自动完成
- 将单击事件设置为此事件添加的元素
- JQuery:基于点击事件设置属性
- 使用循环将事件设置为DOM对象
- 通过onclick事件设置变量
- 用CanJS为文档上触发的事件设置一个全局监听器/控制器
- 根据周视图中的第一个和最后一个事件设置minTime和maxTime
- 套接字.在客户端为该事件设置侦听器之前,服务器发出事件
- 为控制器中的存储事件设置侦听器
- 如何在html中使用onchange事件设置下拉值中的链接
- Javascript在构造函数中将dom事件设置为prototype方法
- 编写jQuery函数的好方法是为特定事件设置全局变量