How to set text color and background in DHTMLX control event scheduler

Question

I want to show different color on text/background in DHTMLX control event scheduler. So below is my code I am passing just dummy data-

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

Please help me. I did not find any result on Google.

score 0 · Answer 1 · answered Apr 10 '17 at 08:48

Have you checked this article http://scheduler-net.com/docs/custom-color.html ?

In short, you can either store color in properties of event object:

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

Data:

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

Or you can attach css class to event element based on some other property:

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

How to set text color and background in DHTMLX control event scheduler

1 Answers1