Non-permanent coloring events


#1

Hi,

I’m trying to custom color event as explained in the sample 02_customization/01_events_coloring.html .
It works on the first display but if user clicks on an event or if a new event is created, color of event comes back in blue

thanks for your help!

<!DOCTYPE html>
Maquette
<script src='../scheduler/codebase/dhtmlxscheduler.js%3Fv=5.3.11' type="text/javascript" charset="utf-8"></script>
<script src='../scheduler/codebase/ext/dhtmlxscheduler_timeline.js%3Fv=5.3.11' type="text/javascript" charset="utf-8"></script>
<script src='../scheduler/codebase/ext/dhtmlxscheduler_treetimeline.js%3Fv=5.3.11' type="text/javascript" charset="utf-8"></script>
<script src='../scheduler/codebase/ext/dhtmlxscheduler_editors.js%3Fv=5.3.11' type="text/javascript" charset="utf-8"></script>

<link rel='stylesheet' type='text/css' href='../scheduler/codebase/dhtmlxscheduler_material.css%3Fv=5.3.11.css'>
<script src='../scheduler/codebase/locale/locale_fr.js' charset="utf-8"></script>

<style type="text/css" >
	html, body{
		margin:0px;
		padding:0px;
		height:100%;
		overflow:hidden;
	}	
	.dhx_cal_light{ width:40%; } .dhx_cal_light_wide{ width:40%; } .dhx_cal_larea{ width:38%; }
 
	 
	.dhx_cal_event div.dhx_footer,
	.dhx_cal_event.past_event div.dhx_footer,
	.dhx_cal_event.MAIN div.dhx_footer,
	.dhx_cal_event.INST div.dhx_footer,
	.dhx_cal_event.URG div.dhx_footer,
	.dhx_cal_event.CONG div.dhx_footer,
	.dhx_cal_event.RTT div.dhx_footer,
	.dhx_cal_event.REU div.dhx_footer,
	.dhx_cal_event.PROG div.dhx_footer,
	.dhx_cal_event.PARAM div.dhx_footer,
	.dhx_cal_event.FORM div.dhx_footer{
		background-color: transparent !important;
	}
	.dhx_cal_event .dhx_body{
		-webkit-transition: opacity 0.1s;
		transition: opacity 0.1s;
		opacity: 0.7;
	}
	.dhx_cal_event .dhx_title{
		line-height: 12px;
	}
	.dhx_cal_event_line:hover,
	.dhx_cal_event:hover .dhx_body,
	.dhx_cal_event.selected .dhx_body,
	.dhx_cal_event.dhx_cal_select_menu .dhx_body{
		opacity: 1;
	}		 
	  
	
	/*event in day or week view*/
    .dhx_cal_event.FORM div{
        background-color: #E74C3C !important;
    }
	/*multi-day event in month view*/
    .dhx_cal_event_line.FORM{
        background-color: #E74C3C !important;
    }
    .dhx_cal_event.PROG div{
        background-color: #2C3E50 !important;
    }
    .dhx_cal_event_line.PROG{
        background-color: #2C3E50 !important;
    }
	 .dhx_cal_event.PARAM div{
        background-color: #C39BD3 !important;
    }
    .dhx_cal_event_line.PARAM{
        background-color: #C39BD3 !important;
    }
	.dhx_cal_event.MAIN div{
        background-color: #F1C40F !important;
		color: black !important
    }
    .dhx_cal_event_line.MAIN{
        background-color: #F1C40F !important;
		color: black !important
    }
	.dhx_cal_event.INST div{
        background-color: #935116 !important;
    }
    .dhx_cal_event_line.INST{
        background-color: #935116 !important;
    }
	.dhx_cal_event.REU div{
        background-color: #94926C !important;
    }
    .dhx_cal_event_line.REU{
        background-color: #94926C !important;
    }
	.dhx_cal_event.CONG div{
        background-color: #77DFEE !important;
		color: black !important
    }
    .dhx_cal_event_line.CONG{
        background-color: #77DFEE !important;
		color: black !important
    }
	.dhx_cal_event.RTT div{
        background-color: #2FB0C2 !important;
		color: black !important
    }
    .dhx_cal_event_line.RTT{
        background-color: #2FB0C2 !important;
		color: black !important
    }
	.dhx_cal_event.URG div{
        background-color: #2FC255!important;
    }
    .dhx_cal_event_line.URG{
        background-color: #2FC255 !important;
    }
</style>



<script type="text/javascript" charset="utf-8">

 Date.prototype.addDays = function(days) {
	var date = new Date(this.valueOf());
	date.setDate(date.getDate() + days);
	return date;
}

		
	/*window.addEventListener("DOMContentLoaded", function(){*/
	function init() {
		scheduler.locale.labels.section_custom="Employé"; 
		scheduler.locale.labels.section_time="Période"; 
		scheduler.locale.labels.section_client = "Client";
		scheduler.locale.labels.section_affaire = "Affaire";
		scheduler.locale.labels.section_travail = "Opération"; 
		scheduler.locale.labels.section_localisation = "Localisation"; 
		scheduler.locale.labels.section_description = "Commentaire";
		scheduler.locale.labels.timeline_tab = "Timeline";	
		scheduler.config.details_on_create=true;
		scheduler.config.details_on_dblclick=true;
		scheduler.config.multi_day = true;
	    scheduler.config.mark_now = true;
		scheduler.config.wide_form = true;
		 

		scheduler.config.buttons_right = ["dhx_save_btn", "dhx_cancel_btn", "repeat_button"];
		scheduler.config.buttons_left = ["dhx_delete_btn"];
		scheduler.locale.labels["repeat_button"] = "Répeter";
		
		
		scheduler.templates.event_class = function(start, end, event){
			var css = "";

			if(event.operation_id) // if event has subject property then special class should be assigned
				css += event.operation_id;

			if(event.id == scheduler.getState().select_id){
				css += " selected";
			}
			return css; // default return 
		};
		
		
		
		//===============
		//Configuration
		//===============	
		
	 

		var clients = [
			{ key: 'BIO', label: "BIOT"},
			{ key: 'ARE', label: "André"},
			{ key: 'GMH', label: "GM"},
			{ key: 'SOC', label: "SOCOF"},
			{ key: 'SVP', label: "VPM"},
			{ key: 'MRC', label: "NROC"},
			{ key: 'CRL', label: "ORALU"},
			{ key: 'SIG', label: "SIG"}
		];
		var affaires = {
			BIO: [
				{ key: 48762, label: "Migration ERP" },
				{ key: 48761, label: "MES" }
			],
			ARE: [
				{ key: 48752, label: "Migration ERP" },
				{ key: 48751, label: "MES" }
			],
			GMH: [
				{ key: 49163, label: "Migration ERP" }
			],
			SVPM: [
				{ key: 49164, label: "Migration ERP" }
			],
			SOC: [
				{ key: 50001, label: "Extranet Catalogue" }
			],
			MRC: [
				{ key: 49161, label: "Délégation" },
				{ key: 50000, label: "Projet Production" }
			],
			CRL: [
				{ key: 48154, label: "Formation 12 jours" },
				{ key: 46936, label: "Ordonnancement" }
			],
			SIG: [
				{ key: 6, label: "Hotline" },
				{ key: 7, label: "Divers" }
			]
		};
		
		/*-----Listes liées clients-affaire-----*/
		var update_select_options = function(select, options) { // helper function
			select.options.length = 0;
			for (var i=0; i<options.length; i++) {
				var option = options[i];
				select[i] = new Option(option.label, option.key);
			}
		};
		var client_onchange = function(event) {
			var new_affaire = affaires[this.value];
			update_select_options(scheduler.formSection('affaire').control, new_affaire);
		};
		scheduler.attachEvent("onBeforeLightbox", function(id){
			var ev = scheduler.getEvent(id);
			if (!ev.affaire_id ) {
				var client_id = ev.client_id||clients[0].key;
				var new_affaire = affaires[client_id];
				update_select_options(scheduler.formSection('affaire').control, new_affaire);
			 } else
			 {
				update_select_options(scheduler.formSection('affaire').control, ev.affaire_id);
			 }
			
			return true;
		});
	
		/*---opération----*/
		
		var travaux = [
			{ key: 'PROG', label: 'Analyse/Programmation'},
			{ key: 'PARAM', label: 'Paramétrage' },
			{ key: 'FORM', label: 'Formation' },
		 	{ key: 'MAIN', label: 'Maintenance' },
		 	{ key: 'INST', label: 'Installation' },
			{ key: 'REU', label: 'Réunion' },
			{ key: 'CONG', label: 'Congés' },
			{ key: 'RTT', label: 'RTT' }	 		
		];
		
					
		var localisations = [
			{ key: 1, label: 'Bureau' },
			{ key: 2, label: 'Télétravail' },
			{ key: 3, label: 'Déplacement' }
		];
		
		var elements = [ // original hierarhical array to display
			{key:0, label:"Pôle Consultants", open: true, children: [
				{key:1, label:"Emmanuel "},
				{key:2, label:"Eric "},
				{key:3, label:"Olivier "},
				{key:4, label:"Hélène "},
				{key:5, label:"Fabien "},
			]},
			{key:10, label:"Pôle Système", open: true, children: [
				{key:11, label:"Florian "},
				{key:12, label:"Christian "},
			]},
			{key:110, label:"Chefs de Projet", open:true, children: [
				{key:111, label:"Marie-Claire "},
				{key:112, label:"Christophe "},
				{key:113, label:"Jocelyne "}
			]}
		];
		
		
		
		scheduler.createTimelineView({
			section_autoheight: true,
			name:	"timeline",
			x_unit:	"day",
			x_date:	"%D %d %M",
			x_step:	1,
			x_size: 8,
			y_unit: elements,
			y_property:	"section_id",
			render: "tree",
			folder_dy:30,
			//dy:60,
			event_dy: 50,
			first_hour:8,
			last_hour:18
		});
		
		scheduler.ignore_timeline = function(date){
			if (date.getDay() == 6 || date.getDay() == 0) //hides Saturdays and Sundays
				return true;
			//non-work hours
			//if (date.getHours() < 8 || date.getHours() > 18) return true; 
		};

		 
		
		//===============
		//Data loading
		//===============
		scheduler.config.lightbox.sections=[	
			{name:"custom", height:30, type:"timeline", options:null, map_to:"section_id" }, //type should be the same as name of the tab
			{name:"client", height:30, type:"select", options:clients, map_to:"client_id", onchange:client_onchange },
			{name:"affaire", height:30, type:"select", options:affaires, map_to:"affaire_id" },
		 	{name:"travail", height:30, type:"select", options:travaux, map_to:"operation_id" },  
			{name:"localisation", height: 35, options:localisations, map_to:"localisation", type:"radio", vertical: false }, 
			{name:"time", height:72, type:"time", map_to:"auto" },
			{name:"description", height:50, map_to:"text", type:"textarea" , focus:true}			  
		];
		 
		
		/*customiser le libelle*/
		
					
		scheduler.config.wide_form = true;
		scheduler.init('scheduler_here',new Date(2021,7,29),"timeline");
		
		var today = new Date();
		var j1 = today.addDays(1);
		var j2 = j1.addDays(2);
		var j3 = new Date();
		var j4 = new Date();
		var today = new Date();
		var today = new Date();
		var today = new Date();
		
		scheduler.parse([
			{ start_date: "2021-07-16 08:30", end_date: "2021-07-16 12:00", text:"SIGAL-Hotline", section_id:1, localisation:1, client_id:'SIG', operation_id:'MAIN'},
			{ start_date: "2021-07-16 13:30", end_date: "2021-07-16 17:30", text:"MONROC-Paramètrage", section_id:1, localisation:1, client_id:'MRC', operation_id:'PARAM'},				
			{ start_date: "2021-07-16 09:20", end_date: "2021-07-16 12:20", text:"André Renault-Reprise", section_id:2, localisation:1, client_id:'ARE', operation_id:'PROG'},
			{ start_date: "2021-07-16 14:00", end_date: "2021-07-16 16:30", text:"MONROC-Programmation", section_id:2, localisation:1, client_id:'MRC', operation_id:'PROG'},
			{ start_date: "2021-07-16 16:30", end_date: "2021-07-16 17:30", text:"MONROC-Programmation", section_id:2, localisation:1, client_id:'MRC', operation_id:'PROG'},
			{ start_date: "2021-07-16 09:00", end_date: "2021-07-16 12:30", text:"André Renault Formation", section_id:4, localisation:1, client_id:'ARE', operation_id:'FORM'},
			{ start_date: "2021-07-16 14:00", end_date: "2021-07-16 18:00", text:"André Renault Formation", section_id:4, localisation:1, client_id:'ARE', operation_id:'FORM'},
			{ start_date: "2021-07-16 08:00", end_date: "2021-07-16 12:00", text:"André Renault-Paramètrage", section_id:5, localisation:1, client_id:'ARE', operation_id:'PARAM'},
			{ start_date: "2021-07-16 13:30", end_date: "2021-07-16 17:30", text:"André Renault-Paramètrage", section_id:5, localisation:1, client_id:'ARE', operation_id:'PARAM'}				
			]);
		
		
		var today = new Date();
		var day ;
			for (let i = 0; i < 150; i++) {
			day = today.addDays(i);
			scheduler.parse([
				{ start_date: day.setHours(8), end_date: day.setHours(12), text:"Maintenance", section_id:12, localisation:1, client_id:'SIG', operation_id:'MAIN'},
				{ start_date: day.setHours(14), end_date: day.setHours(18), text:"Maintenance", section_id:12, localisation:1, client_id:'SIG', operation_id:'MAIN'},
				{ start_date: day.setHours(8), end_date: day.setHours(12), text:"Maintenance", section_id:11, localisation:1, client_id:'SIG', operation_id:'MAIN'},
				{ start_date: day.setHours(14), end_date: day.setHours(18), text:"Installation", section_id:11, localisation:1, client_id:'SIG', operation_id:'INST'},
		]);
				
				
			const expr = 'Papayas';
			switch (day.getDay() ) {
			  case 1:
				scheduler.parse([
					//EM
					{ start_date: day.setHours(9), end_date:  day.setHours(12), text:"SIGAL-Urgences", section_id:1, localisation:1, client_id:'SIG', operation_id:'URG'},
					{ start_date: day.setHours(14), end_date:  day.setHours(18), text:"BIOTEX-Analyse", section_id:1, localisation:1, client_id:'BIO', operation_id:'PROG'},
					//ET
					{ start_date: day.setHours(9), end_date: day.setHours(12), text:"André Renault-Paramètrage", section_id:2, localisation:1, client_id:'ARE', operation_id:'PARAM'},
					{ start_date: day.setHours(14), end_date: day.setHours(18), text:"André Renault-MES avec Isitec", section_id:2, localisation:1, client_id:'ARE', operation_id:'PARAM'},
					//OT
					
					//HS
					{ start_date: day.setHours(9), end_date:  day.setHours(12), text:"SIGAL-Urgences", section_id:4, localisation:2, client_id:'SIG', operation_id:'URG'},
					{ start_date: day.setHours(14), end_date:  day.setHours(18), text:"SIGAL-Urgences", section_id:4, localisation:2, client_id:'SIG', operation_id:'URG'},
					//FL
					{ start_date: day.setHours(9), end_date: day.setHours(12), text:"André Renault-analyse", section_id:5, localisation:1, client_id:'ARE', operation_id:'PROG'},
					{ start_date: day.setHours(14), end_date: day.setHours(18), text:"André Renault-analyse", section_id:5, localisation:1, client_id:'ARE', operation_id:'PROG'},
				]);
			  
				 break;
			  case 2:
				scheduler.parse([
					//EM
					{ start_date: day.setHours(8), end_date:  day.setHours(12), text:"SIGAL-Hotline", section_id:1, localisation:2, client_id:'SIG', operation_id:'MAIN'},
					{ start_date: day.setHours(14), end_date:  day.setHours(18), text:"SIGAL-Hotline", section_id:1, localisation:2, client_id:'SIG', operation_id:'MAIN'},
					//ET
					{ start_date: day.setHours(8), end_date: day.setHours(12), text:"MONROC-Analyse", section_id:2, localisation:1, client_id:'MRC', operation_id:'PROG'},
					{ start_date: day.setHours(14), end_date: day.setHours(18), text:"André Renault-Paramètrage camion", section_id:2, localisation:1, client_id:'ARE', operation_id:'PARAM'},
					//OT
					
					//HS
					{ start_date: day.setHours(8), end_date:  day.setHours(12), text:"SOCOFAL-Extranet Catalogue", section_id:4, localisation:2, client_id:'SOC', operation_id:'PARAM'},
					{ start_date: day.setHours(14), end_date:  day.setHours(18), text:"SOCOFAL-Extranet Catalogue", section_id:4, localisation:2, client_id:'SOC', operation_id:'PARAM'},
					//FL
					{ start_date: day.setHours(8), end_date: day.setHours(12), text:"André Renault-analyse", section_id:5, localisation:1, client_id:'ARE', operation_id:'PROG'},
					{ start_date: day.setHours(14), end_date: day.setHours(18), text:"André Renault-analyse", section_id:5, localisation:1, client_id:'ARE', operation_id:'PROG'},
				]);
				 break;
			  case 3:	
				scheduler.parse([
					//EM
					{ start_date: day.setHours(9), end_date:  day.setHours(17), text:"* GMH-Formation Nomenclature", section_id:1, localisation:1, client_id:'GMH', operation_id:'FORM'},
					//ET
					{ start_date: day.setHours(8), end_date: day.setHours(12), text:"André Renault-Paramètrage camion", section_id:2, localisation:1, client_id:'ARE', operation_id:'PARAM'},
					{ start_date: day.setHours(14), end_date: day.setHours(18), text:"André Renault-Paramètrage camion", section_id:2, localisation:1, client_id:'ARE', operation_id:'PARAM'},
					//OT
					
					//HS
					{ start_date: day.setHours(8), end_date:  day.setHours(12), text:"SOCOFAL-Extranet Catalogue", section_id:4, localisation:2, client_id:'SOC', operation_id:'PARAM'},
					{ start_date: day.setHours(14), end_date:  day.setHours(18), text:"SOCOFAL-Extranet Catalogue", section_id:4, localisation:2, client_id:'SOC', operation_id:'PARAM'},
					//FL
					{ start_date: day.setHours(9), end_date: day.setHours(18), text:"* SVPM-analyse flux", section_id:5, localisation:3, client_id:'SVP', operation_id:'PROG'},
					]);				  
				break;
			  case 4:
				scheduler.parse([
					//EM
					{ start_date: day.setHours(8), end_date:  day.setHours(12), text:"BIOTEX-Param suite analyse", section_id:1, localisation:2, client_id:'BIO', operation_id:'PARAM'},
					{ start_date: day.setHours(14), end_date:  day.setHours(18), text:"BIOTEX-Param suite analyse", section_id:1, localisation:2, client_id:'BIO', operation_id:'PARAM'},
					//ET
					{ start_date: day.setHours(9), end_date: day.setHours(18), text:"* André Renault-flux", section_id:2, localisation:3, client_id:'ARE', operation_id:'PROG'},
					//OT
					
					//HS
					{ start_date: day.setHours(9), end_date: day.setHours(18), text:"* André Renault-flux", section_id:4, localisation:3, client_id:'ARE', operation_id:'PROG'},
					//FL
					{ start_date: day.setHours(9), end_date: day.setHours(18), text:"* André Renault-flux", section_id:5, localisation:3, client_id:'ARE', operation_id:'PROG'},
						]);	
			  
			  
				 break;
			  case 5:
				scheduler.parse([
					//EM
					{ start_date: day.setHours(8), end_date:  day.setHours(12), text:"BIOTEX-Param suite analyse", section_id:1, localisation:2, client_id:'BIO', operation_id:'PARAM'},
					{ start_date: day.setHours(14), end_date:  day.setHours(18), text:"BIOTEX-Param suite analyse", section_id:1, localisation:2, client_id:'BIO', operation_id:'PARAM'},
					//ET
					{ start_date: day.setHours(8), end_date:  day.setHours(12), text:"SIGAL-Urgences", section_id:2, localisation:2, client_id:'SIG', operation_id:'URG'},
					{ start_date: day.setHours(14), end_date: day.setHours(15), text:"MONROC-Réunion", section_id:2, localisation:3, client_id:'MRC', operation_id:'REU'},
					{ start_date: day.setHours(15), end_date:  day.setHours(18), text:"SIGAL-Urgences", section_id:2, localisation:2, client_id:'SIG', operation_id:'URG'},
					{ start_date: day.setHours(14), end_date: day.setHours(15), text:"MONROC-Réunion", section_id:11, localisation:3, client_id:'MRC', operation_id:'REU'},
					//OT
					
					//HS
					{ start_date: day.setHours(8), end_date: day.setHours(18), text:"SIGAL-RTT", section_id:4, localisation:3, client_id:'SIG', operation_id:'RTT'},
					//FL
					{ start_date: day.setHours(8), end_date: day.setHours(12), text:"André Renault-suite flux", section_id:5, localisation:3, client_id:'ARE', operation_id:'PROG'},
					{ start_date: day.setHours(14), end_date: day.setHours(18), text:"André Renault-suite flux", section_id:5, localisation:3, client_id:'ARE', operation_id:'PROG'},
				]);	
			  
			  
				 break;
			  default:
				 
			}

				
				
		}
		
		//congés OT
		scheduler.parse([
			{ start_date: today.setHours(8), end_date: day.setHours(18), text:"Congés", section_id:3, localisation:3, client_id:'SIG', operation_id:'CONG'},
		]);			
		
		
		
		/*CSS dynamique*/
		scheduler.templates.event_class=function(start, end, event){
			var css = "";

			if(event.operation_id) // if event has subject property then special class should be assigned
				css += "event_"+event.operation_id;

			if(event.id == scheduler.getState().select_id){
				css += " selected";
			}
			return css;  
		};
		
		
		
		
		/*validation*/
		scheduler.attachEvent("onEventSave",function(id,ev){
		if (!ev.section_id) {
			dhtmlx.alert("L'employé est obligatoire.");
			return false;
		}
		if (!ev.localisation) {
			dhtmlx.alert("La localisation est obligatoire.");
			return false;
		}
		if (!ev.client_id) {
			dhtmlx.alert("Le client est obligatoire.");
			return false;
		}
		if (!ev.client_id) {
			dhtmlx.alert("L'opération est obligatoire.");
			return false;
		}
		
		
		return true;
		});
		
	 

/*	});*/
}
</script>
 
 

#2

Hello @Yvvan ,

I tried to reproduce the described issue, but event styling works correctly:
https://recordit.co/Lnrt6cGNP4

If you mean the “style flicking” while you drag the event - it occurs, because it rerenders on each mouse move.

If I miss some steps, could you please reproduce the issue in the follows demo:
http://snippet.dhtmlx.com/5/74e09d725
(open the link => reproduce the issue on “HTML/CODE” tabs => click the “Share” button => post here the new link.

Kind regards,