Render events in month view

Scheduler Javascript
#1

Hi,

I’m using the renderEvent function to modify the style of some specific events. E.g.:

container.style.opacity = 0.70; container.style.backgroundImage = "url(medium_lines.png)";
And this works really great.
Is there a possibility to have a similar function for modifying events in the month view? I know that I can set the backround-color, but this is not sufficient.
Thanks for sharing any idea.
~miri

#2

In the menatime I have overwritten the function render_event_bar to modify the style.
Propably there is a update safer solution available in the future.
Thanks
~miri

#3

Hi,
usually, setting of background, padding and border is enough for customizing events in month view.
Please note that month uses two different classes depending on event timing:
.dhx_cal_event_clear - single-day events
.dhx_cal_event_line - multi-day events

can you please clarify what exactly did you need to customize, that couldn’t be achieved with css?

#4

Hi Aliaksandr,

first of all, thanks for your great and fast support.
Basically I like to schow all events (in day, week and month view), which have the event readonly property set to true, with a specific style (background-image and opacity). From my understanding this is not possible with CSS only. I’m wrong?
~miri

#5

you can use a template function to add a css class to specific events:

docs.dhtmlx.com/scheduler/api__s … plate.html

JS:scheduler.templates.event_class = function(start,end,ev){ if(scheduler.getState() == "month"){//special class only for month view if(ev.readonly) return "readonly_event"; } return ""; };
CSS:.readonly_event{ opacity:0.7; background:url(medium_lines.png); }

#6

Hi Aliaksandr,

cool :wink: This is a great idea to set the css class in the template function.
I have only one more issue by using this method. I don’t want to allow (and show) the resize possibility on such readonly events in month view.
Any idea how I can handle this?

~miri

#7

Hi,
you can define a css class to hide a resize handles of these events. If you applied a css template from the previous post, the readonly events will have readonly_event class. After that you can simply define following rule to hide the resizers of such events:.readonly_event .dhx_event_resize { display:none; }
You can also block d’n’d at code level using this API event:
docs.dhtmlx.com/scheduler/api__s … event.html

#8

Hi,

That was it. It’s perfect working now. A very big thank you for your great support!!!
Have a nice weekend.
~miri