custom event with 'renderEvent' and custom event colour

Scheduler Javascript
#1

I’ve copied the example ‘renderevent’, but now the event.color values being passed in from my database are being ignored.

is there a way to make the events colour automatically even with custom Event HTML?

My renderevent function is as follows:

			scheduler.renderEvent = function(container, ev, width, height, header_content, body_content) {
				var container_width = container.style.width; // e.g. "105px"

				// move section
				var html = "<div class='dhx_event_move BVMeeting_move' style='width: " + container_width + "'></div>";

				// container for event contents
				html+= "<div class='BVMeeting_body'>";
					html += "<span class='event_date'>";
					// two options here: show only start date for short events or start+end for long
					if ((ev.end_date - ev.start_date) / 60000 > 40) { // if event is longer than 40 minutes
						html += scheduler.templates.event_header(ev.start_date, ev.end_date, ev);
						html += "</span><br/>";
					} else {
						html += scheduler.templates.event_date(ev.start_date) + "</span>";
					}
					// displaying event text
					html += "<span>" + scheduler.templates.event_text(ev.start_date, ev.end_date, ev) + "</span>";
				html += "</div>";

				// resize section
				html += "<div class='dhx_event_resize BVMeeting_resize' style='width: " + container_width + "'></div>";

				container.innerHTML = html;
				return true; // required, true - we've created custom form; false - display default one instead
			};
#2

I should add that I have an event class of ‘BVMeeting’ set as follows. My renderevent doesn’t include this container, but it is that which needs a custom background-color set.

		scheduler.templates.event_class = function (start, end, event) {
			return "BVMeeting"; 
		};
#3

Hi,
since you render event manually, applying event.color and event.textColor properties is also in your code’s responsibility.
So you’ll need to check .color/textColor and write style background-color/color properties of event box

#4

OK, but how do I access the correct DIV? The code in my renderEvent contains the contents of the new event, but I need to set the background-color of the containing box (in above case with class BVMeeting) which I don’t render.

I can’t even use document.getElementById as it has event-id instead of id.

thanks

#5

The container div is provided as a first argument of renderEvent method, and all other elements are explicitly created via your code

#6

Ah, that’s clear now, thank you.