template for select in lightbox

Scheduler Javascript
#1

Hi,

In my scheduler, i have select section called “category” that define the color in wich the event will be displayed on the scheduler.
Is it possible to define the background color of each “category” when i open the select field ?

The file attached is an exemple of a combo field. I want that the select field look like this.

#2

dhtmlxCombo allows to define different css rules for each item, it can be done by customizing xml data of options

<complete>
	<option value="1" css="color:red">one</option>
#3

I don’t know to apply my css style on it.

I’ve tried to do like this :

[code]var categorie = [
{ key: ‘CAF’, label: ‘CAF’, css: ‘color:#ffbfff;’ },
{ key: ‘Prévention’, label: ‘Prévention’, css: ‘color:#7fbfff;’ },
{ key: ‘DV’, label: ‘DV’, css: ‘color:#00bf3f;’ },
{ key: ‘PRE’, label: ‘PRE’, css: ‘color:#7f00bf;’ },
{ key: ‘Réunion_équipe’, label: ‘Réunion_équipe’, css: ‘color:#ffff00;’ },
{ key: ‘Formation’, label: ‘Formation’, css: ‘color:#ffbf00;’ },
];
scheduler.config.lightbox.sections=[
{name:“titre”, height:30, map_to:“text”, type:“textarea” , focus:true},
{name:“description”, height:130, type:“textarea”, map_to:“details” },
{name:“adresse”, height:30, type:“textarea”, map_to:“event_location” },
{name:“categorie”, height:20, type:“select”, options: categorie, map_to:“categorie” },
{ name:“recurring”, type:“recurring”, map_to:“rec_type”, button:“recurring” },
{name:“time”, height:72, type:“calendar_time”, map_to:“auto”}

	][/code]

but it doesn’t apply my style on lines of the select.

#4

You need to use “combo” not “select” editor ( as select uses native html select control, which do not allow to style options )

#5

I tried this :

[code]var categorie = [
{ key: ‘CAF’, label: ‘CAF’, css: ‘color:#ffbfff;’ },
{ key: ‘Prévention’, label: ‘Prévention’, css: ‘color:#7fbfff;’ },
{ key: ‘DV’, label: ‘DV’, css: ‘color:#00bf3f;’ },
{ key: ‘PRE’, label: ‘PRE’, css: ‘color:#7f00bf;’ },
{ key: ‘Réunion_équipe’, label: ‘Réunion_équipe’, css: ‘color:#ffff00;’ },
{ key: ‘Formation’, label: ‘Formation’, css: ‘color:#ffbf00;’ },
];
scheduler.config.lightbox.sections=[
{name:“titre”, height:30, map_to:“text”, type:“textarea” , focus:true},
{name:“description”, height:130, type:“textarea”, map_to:“details” },
{name:“adresse”, height:30, type:“textarea”, map_to:“event_location” },
{name:“categorie”, height:20, type:“combo”, options: categorie, map_to:“categorie” },
{ name:“recurring”, type:“recurring”, map_to:“rec_type”, button:“recurring” },
{name:“time”, height:72, type:“calendar_time”, map_to:“auto”}

  ][/code]

I did not forget to include dhtmlxscheduler_editors.js; dhtmlxcombo.css, dhtmlxcommon.js, dhtmlxcombo.js (like said in documentation) :wink:

But it doesn’t change anything :frowning:

#6

Yep, there was a problem in combo handling, sorry for inconvenience.
Update ext/dhtmlxscheduler_editor.js with the attached one, it will fix the issue.

#7

Thanks but the js file you attached is empty so it’s doesn’t work as expected :laughing:

#8

Sorry :blush:
Correct file is attached
dhtmlxscheduler_editors.zip (1.64 KB)

#9

Thanks a lot.
It work fine.

I have just one scheduler on with it doesn’t work but i have to check my code to ensure that i haven’t a mistake.