Event Coloring Problem

Scheduler
#1

Hello,

I have a small problem here. I would like to have custom colors for my events based on a type in my database.

Everything is working fine and the colors are loading but as soon as I update an event to a full day event the color changes back to dhtmlx standard blue color!

What am I doing wrong? Please help :slight_smile:

Code:

<!doctype html>

DHTMLX Scheduler with Node.js - Recurring events 
	<script src="https://cdn.dhtmlx.com/scheduler/edge/dhtmlxscheduler.js"></script>
	<script src="https://cdn.dhtmlx.com/scheduler/edge/ext/dhtmlxscheduler_recurring.js"></script>
	<link rel="stylesheet" href="https://cdn.dhtmlx.com/scheduler/edge/dhtmlxscheduler_material.css" type="text/css" charset="utf-8">
	<style>
		html, body{
			margin:0px;
			padding:0px;
			height:100%;
			overflow:hidden;
		}
	</style>
	<style>
	/*event in day or week view*/
.dhx_cal_event.rb_event div{
    background-color: #66a3ff !important;
    color: white !important;
}
.dhx_cal_event.ur_event div{
    background-color: #5cd65c !important;
    color: white !important;
}
.dhx_cal_event.su_event div{
    background-color: #5cd65c !important;
    color: white !important;
}
.dhx_cal_event.gt_event div{
    background-color: #5cd65c !important;
    color: white !important;
}
.dhx_cal_event.di_event div{
    background-color: #ff751a !important;
    color: white !important;
}
.dhx_cal_event.se_event div{
    background-color: #ff751a !important;
    color: white !important;
}
.dhx_cal_event.fo_event div{
    background-color: #ff751a !important;
    color: white !important;
}
.dhx_cal_event.bs1_event div{
    background-color: #009933 !important;
    color: white !important;
}
.dhx_cal_event.bs2_event div{
    background-color: #ffff66 !important;
    color: gray !important;
}
.dhx_cal_event.bs3_event div{
    background-color: #ff66ff !important;
    color: white !important;
}
.dhx_cal_event.fh_event div{
    background-color: #b38600 !important;
    color: white !important;
}
.dhx_cal_event.un_event div{
    background-color: #ff4d88 !important;
    color: white !important;
}
.dhx_cal_event.un_event div{
    background-color: #ff4d88 !important;
    color: white !important;
}
.dhx_cal_event.fe_event div{
    background-color: #ff1a1a !important;
    color: white !important;
}
.dhx_cal_event.fer_event div{
    background-color: #ff4d4d !important;
    color: white !important;
}
.dhx_cal_event.gb_event div{
    background-color: #cc00ff !important;
    color: white !important;
}
.dhx_cal_event.dd_event div{
    background-color: #666699 !important;
    color: white !important;
}

/*multi-day event in month view*/
.dhx_cal_event_line.rb_event div{
    background-color: #66a3ff !important;
    color: white !important;
}
.dhx_cal_event_line.ur_event div{
    background-color: #5cd65c !important;
    color: white !important;
}
.dhx_cal_event_line.su_event div{
    background-color: #5cd65c !important;
    color: white !important;
}
.dhx_cal_event_line.gt_event div{
    background-color: #5cd65c !important;
    color: white !important;
}
.dhx_cal_event_line.di_event div{
    background-color: #ff751a !important;
    color: white !important;
}
.dhx_cal_event_line.se_event div{
    background-color: #ff751a !important;
    color: white !important;
}
.dhx_cal_event_line.fo_event div{
    background-color: #ff751a !important;
    color: white !important;
}
.dhx_cal_event_line.bs1_event div{
    background-color: #009933 !important;
    color: white !important;
}
.dhx_cal_event_line.bs2_event div{
    background-color: #ffff66 !important;
    color: gray !important;
}
.dhx_cal_event_line.bs3_event div{
    background-color: #ff66ff !important;
    color: white !important;
}
.dhx_cal_event_line.fh_event div{
    background-color: #b38600 !important;
    color: white !important;
}
.dhx_cal_event_line.un_event div{
    background-color: #ff4d88 !important;
    color: white !important;
}
.dhx_cal_event_line.un_event div{
    background-color: #ff4d88 !important;
    color: white !important;
}
.dhx_cal_event_line.fe_event div{
    background-color: #ff1a1a !important;
    color: white !important;
}
.dhx_cal_event_line.fer_event div{
    background-color: #ff4d4d !important;
    color: white !important;
}
.dhx_cal_event_line.gb_event div{
    background-color: #cc00ff !important;
    color: white !important;
}
.dhx_cal_event_line.dd_event div{
    background-color: #666699 !important;
    color: white !important;
}

/*event with fixed time, in month view*/
.dhx_cal_event_clear.rb_event div{
    color: white !important;
}
.dhx_cal_event_clear.ur_event div{
    color: white !important;
}
.dhx_cal_event_clear.su_event div{
    color: white !important;
}
.dhx_cal_event_clear.gt_event div{
    color: white !important;
}
.dhx_cal_event_clear.di_event div{
    color: white !important;
}
.dhx_cal_event_clear.se_event div{
    color: white !important;
}
.dhx_cal_event_clear.fo_event div{
    color: white !important;
}
.dhx_cal_event_clear.bs1_event div{
    color: white !important;
}
.dhx_cal_event_clear.bs2_event div{
    color: gray !important;
}
.dhx_cal_event_clear.bs3_event div{
    color: white !important;
}
.dhx_cal_event_clear.fh_event div{
    color: white !important;
}
.dhx_cal_event_clear.un_event div{
    color: white !important;
}
.dhx_cal_event_clear.un_event div{
    color: white !important;
}
.dhx_cal_event_clear.fe_event div{
    color: white !important;
}
.dhx_cal_event_clear.fer_event div{
    color: white !important;
}
.dhx_cal_event_clear.gb_event div{
    color: white !important;
}
.dhx_cal_event_clear.dd_event div{
    color: brown !important;
}
	</style>
</head>
<body>
	<div id="scheduler_here" class="dhx_cal_container" style='width:100%; height:100%;'>
		<div class="dhx_cal_navline">
			<div class="dhx_cal_prev_button">&nbsp;</div>
			<div class="dhx_cal_next_button">&nbsp;</div>
			<div class="dhx_cal_today_button"></div>
			<div class="dhx_cal_date"></div>
			<div class="dhx_cal_tab" name="day_tab"></div>
			<div class="dhx_cal_tab" name="week_tab"></div>
			<div class="dhx_cal_tab" name="month_tab"></div>
		</div>
		<div class="dhx_cal_header"></div>
		<div class="dhx_cal_data"></div>
	</div>
	<script>
		scheduler.config.xml_date="%Y-%m-%d %H:%i";
		scheduler.init("scheduler_here", new Date(2018, 0, 20), "week");
		scheduler.setLoadMode("day");

		scheduler.templates.event_class = function (start, end, event) {
		if (event.type == 'rb') return "rb_event";
		return "dd_event";
		};

		// load data from backend
		scheduler.load("/events", "json");

		// send client-side updates to the backend
		var dp = new dataProcessor("/events");
		dp.init(scheduler);

		// set data exchange mode
		dp.setTransactionMode("REST");
	</script>
</body>
#2

I Only change to “rb” for testing… just that you guys know :slight_smile:

#3

Hi @JaZer0,
The full-day events have a different class than usual events, in order to add some style to them, you should use the .dhx_cal_event_line selector instead of dhx_cal_event, so to colorize part day event + multiday event, your CSS should look so:

  /* Colorize only full-day rb_event */
  .dhx_cal_event_line.rb_event {
    background-color: #FF5722 !important;
    color: white !important;
  }
  /* Colorize both full-day and part-day dd_event */
  .dhx_cal_event.dd_event div,
  .dhx_cal_event_line.dd_event {
    background-color: #666699 !important;
    color: white !important;
  }

Here is a demo:
http://snippet.dhtmlx.com/71e96b99b

#4

Thanks for your fast Reply :slight_smile: