Calendars - Custom CSS and HTML

asked 2019-06-11 21:40:04 +0800

Juansml89 gravatar image Juansml89
3 2

updated 2019-06-13 04:09:15 +0800

Hi, I've been trying to apply custom css to a couple of dates and I'm stuck. The general idea is quite simple: I've got a couple of dates on my VM which represent Sundays and holidays. What I want to do is pass those values to the calendar so that they appear in a different color. Disabling them wasn' hard because I just check the date on the "onEventCreate" or "...Edit", but it's important that they're differenciated from the rest. I'd copy some code, but there's really nothing to it. I did use the one that comes for the datebox calendar and it worked perfectly:

zk.afterLoad('calendar', function(){ zul.db.Renderer.disabled = etc...

but not for the calendar.

Any help will be appreaciated

* Just in case:

{calendars id="calendarME" firstDayOfWeek="Sunday" mold="month" / }


Hi, thank you, but I've already changed the colors on the weekends, problem is I need only sundays. And also I've got an array on my VM containing the dates which I need to change in the calendar.

Right now, this is what I'm doing: getElementsByClassName('z-calendars-month-body')[0].childNodes[ x ].childNodes[0].childNodes[0].childNodes[0].childNodes[ y ].style.backgroundColor='#faebd7';

Where 'x' and 'y' are references to relative positions in the calendar that I've already calculated based on the day and month I need to change.

But this brings problems of its own. Once this code is ran, when you change the month on the calendar it will keep the previos color rendering, and when a month has fewer rows it will attempt to run this code and fail if it had already changed the color on the last row, for example.

I don't like it this way, but works. All I need to do now is a find a way so that it eliminates the javaScript code I wrote and start from scratch when the month is changed.


Well, it's done, I gotta say, I don't like it, but it works, it's a craftwork.

What I did is: 1) used: calendarME.getBeginDate() and calendarME.getEndDate() to determine the starting days the rendered calendar has.

2) used: calendarME.getCurrentDate() to determine in which month am I and also which is the prior month.

3) If the starting date was part of the last month's dates, it will calculate in the VM how many days does that month have. This is to determine where does the current month start. For example: The first day in the june-19 calendar is the 26th of may. So now I know it will take 31-26 (days in may - day the calendar starts) = 5 dates to June 1st.

4) I calculate the amount of rows the calendar has, otherwise sometimes you'll get 6, then 5 and might throw null pointer error. I do this by hand, by knowing which month am I, I also know how many days it has, and keeping in mind it doesn't start in the date 1 on the calendar, I know how many rows it will take using the values in point nº 3.

5) I set the entire calendar white. Because otherwise when you change months the same spaces will be painted, so first, I need to paint them white. I do this with two 'for' cycles, one up to 7 (columns) and another up to the amount of rows I calculated in point 4.

6) At this point I have a date I want to paint separated in two values (month and day) both are 'int' values. The position the day will occupy I know it by: doing 'day+difference' difference was calculated in point 3. If its a date on this month. If its a date of the prior month it will be: 'day - firstDayOfCalendar - difference'. If its a date from the next month it will be: 'day + daysInCurrenyMonth'.

X value: day/7. y value: day%7.

And then finally:

if(x>=0 && y>= 0 && x<cantfilas) {="" jscommand="</p">

"getElementsByClassName('z-calendars-month-body')[0] .childNodes[x].childNodes[0].childNodes[0].childNodes[0].childNodes[y].style.backgroundColor='#faebd7';";

Clients.evalJavaScript(jsCommand); }

Hopefully it will be of use to someone, I would've loved to find this a week ago. If I missed any steps, feel free to comment. This does work, so if it looks like something's up, it may be because I forgot to write something down.


delete flag offensive retag edit


thanks for sharing the steps, to avoid others going through the same process, I attached a prototype implementation for the month mold into a feature request https://tracker.zkoss.org/browse/ZKCAL-72

cor3000 ( 2019-06-13 12:59:55 +0800 )edit

Hey, great work, thank you for taking the time! Hopefully they'll accept the feature. It will be really helpful.

Juansml89 ( 2019-06-13 19:49:39 +0800 )edit

1 Answer

Sort by » oldest newest most voted

answered 2019-06-12 19:04:39 +0800

cor3000 gravatar image cor3000
5673 2 7
ZK Team

updated 2019-06-14 09:46:53 +0800

customizing the weekend styles is trivial ...

        .z-calendars-month-week .z-calendars-month-date.z-calendars-week-weekend {
            background-color: #ddd;
        .z-calendars-month-week .z-calendars-week-weekend {
            background-color: #eee;
    <calendars id="calendarME" firstDayOfWeek="Sunday" mold="month"/>

Is this the kind of customization you are looking for? For other days (e.g. holidays from an array) this will get a bit more complicated, and requires more extensive js overrides.

Or are you planning to give certain readonly events (not the day's background) a distinct style?


checkout Feature Request ZKCAL-72 containing a prototypic implementation with decoration callbacks functions, avoiding manual coordinate (x,y) calculations

link publish delete flag offensive edit
Your answer
Please start posting your answer anonymously - your answer will be saved within the current session and published after you log in or create a new account. Please try to give a substantial answer, for discussions, please use comments and please do remember to vote (after you log in)!

[hide preview]

Question tools

1 follower



Asked: 2019-06-11 21:40:04 +0800

Seen: 14 times

Last updated: Jun 14 '19

Support Options
  • Email Support
  • Training
  • Consulting
  • Outsourcing
Learn More