在ASP.NET MVC中,我创建了CalendarEvent的集合。我的C#日历事件看起来就像一个添加了EventType属性的jQuery完整日历事件。通过这种方式,我可以创建一堆CalendarEvents,并将它们发送到视图中,让jQuery Full Calendar显示它们。
公共类CalendarEvent{
public int id { get; set; } //FC Title - Employee Name, Type of Day
public string title { get; set; }
public bool allDay { get; set; }
public string start { get; set; } //required
public string end { get; set; } //required
public string url { get; set; } //optional
public string className { get; set; }
public bool editable { get; set; }
public bool startEditable { get; set; }
public bool durationEditable { get; set; }
public string color { get; set; }
public string backgroundColor { get; set; }
public string borderColor { get; set; }
public string textColor { get; set; }
public string EventType { get; set; }
}
在完整日历事件Render中,如果EventType=="ApprovedVacationDay",我会尝试更改事件的背景色。当我调试javascript时,我注意到属性EventType不可用。当我通过fiddler查看对象时,我确实看到了属性EventType。是否有方法访问和评估EventType属性,并根据该值更改事件的颜色?
$('#calendar').fullCalendar({
dayClick: function (date, allDay, jsEvent, view) {
//alert(date.toString());
//Add the date to the list of dates to be requested
// if their is no event on date and it's a selectable date
// Go to the server and see if the day is selectable (basic rules)
// Not a holday, You dont have a day selected that day already
$(this).css('background-color', 'yellow');
},
dayRender: function (daysOfWeek, cell) {
$(cell).addClass('fc-state-highlight');
},
header: {
left: 'prev,next today',
center: 'title',
//right: 'month,agendaWeek,agendaDay'
right: 'month,agendaWeek'
},
editable: false,
events: function (start, end, callback)
{
var clockNo = $("#hiddenClockNo").val();
// UNDONE This should not be hard set
clockNo = 88888;
var url = '@Url.Action(@"GetJSONVacationRequests?ClockNo=")';
url = url + clockNo;
url = decodeURIComponent(url);
$.getJSON(url, function (locationsArray) {
var result = $(locationsArray).map(function () {
return {
title: this.title,
start: this.start,
end: this.end,
allDay: this.editable
};
}).toArray();
callback(result);
});
},
eventRender: function (event, element) {
element.css('background-color', 'yellow');
debugger;
if(event.EventType =="ApprovedVacationDay")
{
element.css('background-color', 'green');
}
}
});
更改:
return {
title: this.title,
start: this.start,
end: this.end,
allDay: this.editable,
};
收件人:
return {
title: this.title,
start: this.start,
end: this.end,
allDay: this.editable,
EventType: this.EventType
};