如何在DHTMLX控件事件调度程序中设置文本颜色和背景

时间:2017-04-08 07:02:34

标签: asp.net-mvc dhtmlx dhtmlx-scheduler

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

1 个答案:

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