fullCalendar - addEventSource 带有颜色选项
我有一个功能可以动态地将事件添加到日历中。
function AddEventSourceDetailed(act_id) {
$('#calendar').fullCalendar('addEventSource', function (start, end, callback) {
var startTime = Math.round($('#calendar').fullCalendar('getView').start.getTime() / 1000);
var endTime = Math.round($('#calendar').fullCalendar('getView').end.getTime() / 1000);
time = endTime - startTime;
//alert(time);
if (time <= 604800) {
$.ajax({
type: 'POST',
url: '/Employee/GetScheduleDetailedArray/',
async: false,
dataType: "json",
data: {
// our hypothetical feed requires UNIX timestamps
start: Math.round(start.getTime() / 1000),
end: Math.round(end.getTime() / 1000),
id: '@Model.selectedUserId',
act: act_id
},
success: function (doc) {
callback(doc);
},
error: function (xhr, status, error) {
document.appendChild(xhr.responseText);
}
}); //end ajax
} else {
callback();
}
});
}
问题是我无法弄清楚以这种方式添加事件源时如何为事件源分配颜色。
====编辑=====
好吧,我找到了一种改变事件内部背景颜色的黑客方法,我使用 eventAfterRender 及其元素对象将其与我的事件列表进行比较有相关的颜色。我希望这会对某人有所帮助,直到我找到更好的方法
$('#calendar').fullCalendar({
height: 600,
width: 700,
header: {
right: 'prev,next today',
center: 'title',
left: 'month,agendaWeek,agendaDay'
},
eventAfterRender: function (event, element, view) {
for (x = 0; x < activityColors[0].length; x++) {
if (event.id == activityColors[0][x]) {
element.children().css({ "background-color": "#" + activityColors[1][x] })
}
}
}
});
I have a function that dynamically adds events to the calendar.
function AddEventSourceDetailed(act_id) {
$('#calendar').fullCalendar('addEventSource', function (start, end, callback) {
var startTime = Math.round($('#calendar').fullCalendar('getView').start.getTime() / 1000);
var endTime = Math.round($('#calendar').fullCalendar('getView').end.getTime() / 1000);
time = endTime - startTime;
//alert(time);
if (time <= 604800) {
$.ajax({
type: 'POST',
url: '/Employee/GetScheduleDetailedArray/',
async: false,
dataType: "json",
data: {
// our hypothetical feed requires UNIX timestamps
start: Math.round(start.getTime() / 1000),
end: Math.round(end.getTime() / 1000),
id: '@Model.selectedUserId',
act: act_id
},
success: function (doc) {
callback(doc);
},
error: function (xhr, status, error) {
document.appendChild(xhr.responseText);
}
}); //end ajax
} else {
callback();
}
});
}
The problem is I can't figure our how to assign a color to the event source when adding it this way.
====EDIT=====
Okay I found a hackish way to change the inside background color of events, I use the eventAfterRender and it's element object to compare it to a list of events that I have colors associated with. I hope this will kind of help someone until I find out a better way
$('#calendar').fullCalendar({
height: 600,
width: 700,
header: {
right: 'prev,next today',
center: 'title',
left: 'month,agendaWeek,agendaDay'
},
eventAfterRender: function (event, element, view) {
for (x = 0; x < activityColors[0].length; x++) {
if (event.id == activityColors[0][x]) {
element.children().css({ "background-color": "#" + activityColors[1][x] })
}
}
}
});
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
在你的函数中,ajax 调用的结果是什么?根据您在代码中的内容( success:function (doc) {callback(doc);} ),我想成功后您将收到以 json 编码的事件数组,因此添加颜色唯一需要的就是定义字段颜色,每个事件的服务器端脚本中的backgroundColor、borderColor、textColor。希望这有帮助。
Jan
编辑:我还注意到您在 else 分支中调用回调()函数,这确实是多余的。如果没有参数,调用回调是没有意义的,因为它不会执行任何操作(回调参数是要添加到 fullcalendar 的事件数组,因此没有参数 = 没有要添加的事件 = 与它甚至没有被调用相同)。
in your function, whats the a result of that ajax call? By what you have in code ( success:function (doc) {callback(doc);} ), I guess on success you are receiving array of events encoded in json, so only thing you need for adding colors is to define fields color, backgroundColor, borderColor, textColor in your server-side script for every event. Hope this helps.
Jan
EDIT: I also noticed that you are calling callback() function in else branch, which is really redundant. Without parameters, its pointless to call callback, because it will do nothing (callbacks parameter is array of events to be added to fullcalendar, so no paramater = no events to add = same as it wasnt even called).
您可以使用:
You can use: