我想在DHTMLX控件事件调度程序中显示文本/背景上的不同颜色。所以下面是我的代码我只传递虚拟数据 -
public ActionResult Index()
{
var scheduler = new DHXScheduler(this);
scheduler.Skin = DHXScheduler.Skins.Flat;
scheduler.Config.multi_day = true;
scheduler.InitialDate = new DateTime(DateTime.Now.Year, DateTime.Now.Month, DateTime.Now.Day);
scheduler.LoadData = true;
scheduler.EnableDataprocessor = true;
return View(scheduler);
}
public ContentResult Data()
{
var data = new SchedulerAjaxData(
new List<CalendarEvent>{
new CalendarEvent{
id = 1,
text = "Sample Event",
start_date = new DateTime(2017, 04, 09, 3, 00, 00),
end_date = new DateTime(2017, 04, 09, 4, 00, 00)
},
new CalendarEvent{
id = 2,
text = "Event Anniversery",
start_date = new DateTime(2017, 04, 08, 6, 00, 00),
end_date = new DateTime(2017, 04, 08, 8, 00, 00)
},
new CalendarEvent{
id = 3,
text = "Third Event",
start_date = new DateTime(2017, 04, 07, 8, 00, 00),
end_date = new DateTime(2017, 04, 07, 9, 00, 00)
}
}
);
return (ContentResult)data;
}
请帮帮我。我没有在Google上找到任何结果。
答案 0 :(得分:0)
您是否查看了这篇文章http://scheduler-net.com/docs/custom-color.html?
简而言之,您可以将颜色存储在事件对象的属性中:
public class Event
{
public int id { get; set; }
public string text { get; set; }
public DateTime? start_date { get; set; }
public DateTime? end_date { get; set; }
public string color { get; set; }
public string textColor { get; set; }
}
数据:
new CalendarEvent{
id = 1,
text = "Sample Event",
start_date = new DateTime(2017, 04, 09, 3, 00, 00),
end_date = new DateTime(2017, 04, 09, 4, 00, 00),
color = "#FF0000",
textColor = "#FFFFFF"
}
或者您可以根据其他属性将css类附加到event元素:
使用Javascript:
scheduler.templates.event_class = function(start, end, event){
if(event.someProperty){
return "colored-event";
}
return "";
};
CSS:
/*event in day or week view*/
.dhx_cal_event.colored-event div{
background-color: #FF0000 !important;
color: #FFFFFF !important;
}
/*multi-day event in month view*/
.dhx_cal_event_line.colored-event{
background-color: #FF0000 !important;
color: #FFFFFF !important;
}
/*single-day event in month view*/
.dhx_cal_event_clear.colored-event{
color: #FF0000 !important;
}