Calendars - Custom CSS and HTML

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

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

EDIT:

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.

EDIT 2:

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.

Cheers.