更改Fullcalendar中过去事件的颜色

我正试图实现这个解决方案，以"灰显"Fullcalendar中过去的事件，但我运气不佳。不过，我对Javascript不是很精通，所以我认为我犯了一些愚蠢的错误。

我已经将建议的代码放入fullcalendar.js中，在第4587行的daySegHTML(segs)调用中。

我在函数的初始var列表的末尾添加了前两行(我想，为什么不呢)——所以类似于这样的内容：

...
var leftCol;
var rightCol;
var left;
var right;
var skinCss;
var hoy = new Date;// get today's date
hoy = parseInt((hoy.getTime()) / 1000); //get today date in unix
var html = '';
...

然后，就在下面，我在循环中添加了另外两行：

for (i=0; i<segCnt; i++) {
seg = segs[i];
event = seg.event;
classes = ['fc-event', 'fc-event-skin', 'fc-event-hori'];
if (isEventDraggable(event)) {
classes.push('fc-event-draggable');
}
unixevent = parseInt((event.end.getTime()) / 1000); //event date in Unix
if (unixevent < hoy) {classes.push('fc-past');} //add class if event is old
if (rtl) {
if (seg.isStart) {
classes.push('fc-corner-right');
}
...

运行此代码会导致呈现的日历中不显示任何事件，并显示错误消息：Uncaught TypeError:无法调用null 的方法"getTime">

所指的"null"显然是event.end.getTime()。但我不确定我是否理解到底出了什么问题，或者事情是如何执行的。正如所写的，它似乎应该起作用。在代码的这一点上，据我所知，event.end包含一个有效的IETF时间代码，但由于某种原因，当我试图通过getTime()运行它时，它"不存在"？

这对我来说不是一个关键任务的调整，但仍然很好——我也想了解发生了什么，我做错了什么！非常感谢您的帮助！

如果您在谷歌日历中使用FullCalendar2，则需要使用以下代码版本。这使用Moment.js进行一些转换，但由于FC2需要它，您已经在使用它了。

eventRender: function(event, element, view) {                   
var ntoday = new Date().getTime();
var eventEnd = moment( event.end ).valueOf();
var eventStart = moment( event.start ).valueOf();
if (!event.end){
if (eventStart < ntoday){
element.addClass("past-event");
element.children().addClass("past-event");
}
} else {
if (eventEnd < ntoday){
element.addClass("past-event");
element.children().addClass("past-event");
}
}
}

根据FullCalendar v1.6.4

在css中设置过去事件的样式：

.fc-past{background-color:red;}

在css中设置未来事件的样式：

.fc-future{background-color:red;}

没有必要摆弄fullcalendar.js。只需添加一个回调，如：

eventRender: function(calev, elt, view) {
if (calev.end.getTime() < sometime())
elt.addClass("greyclass");
},

你只需要为.grayclass.定义正确的CSS

每个事件都有一个与其关联的ID。最好根据ID维护所有事件的元信息。如果要从后端数据库中弹出事件，请在表中添加一个字段。对我来说效果最好的是只依赖回调来获取事件ID，然后设置/重置从我自己的数据存储中获取的属性。为了给你一些视角，我将粘贴在我的代码片段的一部分下面。关键是要针对EventDAO类满足您的所有需求。

public class EventDAO
{
//change the connection string as per your database connection.
//private static string connectionString = "Data Source=ASHIT\SQLEXPRESS;Initial Catalog=amit;Integrated Security=True";
//this method retrieves all events within range start-end
public static List<CalendarEvent> getEvents(DateTime start, DateTime end, long nParlorID)
{
List<CalendarEvent> events = new List<CalendarEvent>();
// your data access class instance
clsAppointments objAppts = new clsAppointments();
DataTable dt = objAppts.SelectAll( start, end);
for(int i=0; i<dt.Rows.Count; ++i)
{
CalendarEvent cevent = new CalendarEvent();
cevent.id = (int)Convert.ToInt64(dt.Rows[i]["ID"]);
.....            
Int32 apptDuration = objAppts.GetDuration();    // minutes
string staffName =  objAppts.GetStaffName();
string eventDesc = objAppts.GetServiceName();
cevent.title = eventDesc + ":" + staffName;
cevent.description = "Staff name: " + staffName + ", Description: " + eventDesc;
cevent.start = (DateTime)dt.Rows[i]["AppointmentDate"];

cevent.end = (DateTime) cevent.start.AddMinutes(apptDuration);
// set appropriate classNames based on whatever parameters you have.
if (cevent.start < DateTime.Now)
{
cevent.className = "pastEventsClass";
}
.....
events.Add(cevent);
}
}
}

高级步骤如下：

将属性添加到cevent类中。可以称之为className或任何你想要的东西
在EventDAO类中填写，同时获取所有事件。使用数据库或您维护的任何其他本地存储来获取元信息
在jsonresponse.ashx中，检索className并将其添加到返回的事件中

jsonresponse.ashx:的示例片段

return    "{" +
"id: '" + cevent.id + "'," +
"title: '" + HttpContext.Current.Server.HtmlEncode(cevent.title) + "'," +
"start:  " + ConvertToTimestamp(cevent.start).ToString() + "," +
"end: " + ConvertToTimestamp(cevent.end).ToString() + "," +
"allDay:" + allDay + "," +
"className: '" + cevent.className + "'," +
"description: '" + 
HttpContext.Current.Server.HtmlEncode(cevent.description) + "'" +  "},";

改编自@MaxD下面的代码是我用来将过去的事件涂成灰色的。

Json 中的全日历拉入JS

events: '/json-feed.php',
eventRender: function(event,element,view) {
if (event.end < new Date().getTime())
element.addClass("past-event");   
},
other options ....

"event.end"在我的Json是一个完整的日期时间"2017-10-10 10:00:00">

CSS

.past-event.fc-event, .past-event .fc-event-dot {
background: #a7a7a7;
border-color: #848484
}

eventDataTransform = (eventData) => {
let newDate = new Date();
if(new Date(newDate.setHours(0, 0, 0, 0)).getTime() > eventData.start.getTime()){            
eventData.color = "grey";        
}else{
eventData.color = "blue";    
}
return eventData;
}
//color will change background color of event
//textColor to change the text color

改编自@Jeff的原始答案，只需检查是否存在结束日期，如果使用，则使用开始日期。有一个allDay键(true/false)，但仍然可以在没有结束日期的情况下创建非allDay事件，因此它仍然会抛出一个null错误。以下代码对我有效。

eventRender: function(calev, elt, view) {
var ntoday = new Date().getTime();
if (!calev.end){
if (calev.start.getTime() < ntoday){
elt.addClass("past");
elt.children().addClass("past");
}
} else {
if (calev.end.getTime() < ntoday){
elt.addClass("past");
elt.children().addClass("past");
}
}
}

好的，这是我现在得到的，正在工作(有点)：

eventRender: function(calev, elt, view) {
var ntoday = new Date();
if (calev.start.getTime() < ntoday.getTime()){
elt.addClass("past");
elt.children().addClass("past");
}
}

在我的样式表中，我发现我需要重新设计外部和内部元素的样式来更改颜色；从而进行CCD_ 8相加。

我上班的唯一时间检查是看开始时间，因为没有全天活动的结束时间，但这显然会给多日活动带来问题。

还有其他可能的解决方案吗？

相关内容

最新更新

热门标签：