How can I change the background color of specific dates?

Suite and Optimus Suite 5
#1

Hello everyone,

Iv’e been looking to incorporate a calendar into my web app and came across dhtmlx which is amazing in my opinion. I just have a problem because what I am trying to achieve is a lot more simple then any of the calendar samples I have seen in here.

I’m trying to simply add 2 different colors to the background of specific dates. Green and Red. Iv’e explored the API and could not find anything that will help me achieve this very simple feature.

So by default the current date on the calendar is blue or whenever you click on a date that date gets a circle background of blue. I do not need any of that I just want a simple calendar with absolutely no interaction where I can set the background color of specific dates.

After reading over the API I saw that you can set a specific Date, Holiday or SensitiveRange like so.

myCalendar.setDate("2011-07-12");
myCalendar.setHolidays("2011-07-13");
myCalendar.setSensitiveRange("2011-07-08","2011-07-22");

These were as close to what I can find to what I need but did not serve the purpose for multiple reasons. So I was thinking if there is either a way that I can set multiple dates on the calendar with a specific background color or if I can just add a class to the

  • element of the specified date on the calendar. Either way would work for me because I can just define a class of .green and .red in my CSS and add that to a specific date.

    If someone could point me into the right direction I would greatly appreciate it.

    Thank you!

    • #2

    You can use myCalendar.setHolidays, this command accepts an array of dates, so you can mark multiple dates at once.
    Also, the method only marks the provided dates and doesn’t affect any other functionality of calendar

    or if I can just add a class to the

  • element of the specified date on the calendar
    Calendar repaints self when month is changed, so it will too much hassle to adjust css class of li element each time.