如何設置DHTMLX控件事件調度程序中的文本顏色和背景

Question

我想在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上沒有找到任何結果。

Answer 1

您是否檢查了此文章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類基於一些其他財產事件元素：

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; 
}