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>
<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>