JavaScript UI Library, Ajax Components & HTML5 Framework

shared calendars, diferent lightwindow

Hi
I can display correctly two diferent calendars in two diferent colors in the scheduler.
I've added a combo in the lightbox that displays the source calendar of the event. So, when a new event is created, the user can choose the calendar where insert it.
I would like to change the color of the lightbox background in order to make easier and more clear the calendar selection for users.
How can I this to work?
Is there a way similar to scheduler.templates.event_class for the ligthbox?
Thanks

Hello,

you can try to use the following approach to set the background-color of lightbox:

scheduler.attachEvent("onBeforeLightbox", function (event_id){
� �var color = scheduler.getEvent(event_id).color;
� �if(color)
� � � �scheduler._get_lightbox().style.backgroundColor = color;
� �return true
});

Thanks, it works fine, but only for the border of the box.
My goal is to get the same efect even when the lightbox is visible, and the user selects a diferent calendar where to set his event.
Whith this approach it is clear to the user the choosen calendar.
My code is:

        scheduler.config.xml_date = "%Y-%m-%d %H:%i";
        scheduler.config.show_loading = true;
        scheduler.config.first_hour = 9;
        scheduler.config.last_hour = 22;
        scheduler.config.time_step = 15;
        scheduler.config.lightbox.sections=[
            { name:"description", height:50, map_to:"text", type:"textarea", focus:true},
            { name:"type", height:21, map_to:"calId", type:"select", options:[
                {key: 1, label: "calendar1"},
                {key: 2, label: "calendar2"}
            ]},
            { name:"time", height:90, type:"time", map_to:"auto"}
        ];

and I wrote this function:

var setter=scheduler.form_blocks.select.set_value;
scheduler.form_blocks.select.set_value=function(node,value,ev){
    s=node.getElementsByTagName("select");
    for(var i=0; i<s.length;i++)
        s[i].onchange=checkColor;
    setter.apply(this,arguments);
}
checkColor=function(e){
    var color=(s[0].value == 1)?"#FFE763":"#FF8040";
    scheduler._get_lightbox().style.backgroundColor=color;
}

but s[] takes the values from the time section, and not from the select section. I tried to use var setter=scheduler.form_blocks.select.set_value; but I get an exception.

How can I get the value of the select in the "type" section?

Reading my answer I found a mistake near its bottom. Where I wrote:

I tried to use var setter=scheduler.form_blocks.select.set_value;

I wanted to write:

I tried to use var setter=scheduler.form_blocks.type.set_value;

Thanks

Thanks, it works fine, but only for the border of the box.
My goal is to get the same efect even when the lightbox is visible, and the user selects a diferent calendar where to set his event.
Whith this approach it is clear to the user the choosen calendar.
My code is:

        scheduler.config.xml_date = "%Y-%m-%d %H:%i";
        scheduler.config.show_loading = true;
        scheduler.config.first_hour = 9;
        scheduler.config.last_hour = 22;
        scheduler.config.time_step = 15;
        scheduler.config.lightbox.sections=[
            { name:"description", height:50, map_to:"text", type:"textarea", focus:true},
            { name:"type", height:21, map_to:"calId", type:"select", options:[
                {key: 1, label: "calendar1"},
                {key: 2, label: "calendar2"}
            ]},
            { name:"time", height:90, type:"time", map_to:"auto"}
        ];

and I wrote this function:

var setter=scheduler.form_blocks.select.set_value;
scheduler.form_blocks.select.set_value=function(node,value,ev){
    s=node.getElementsByTagName("select");
    for(var i=0; i<s.length;i++)
        s[i].onchange=checkColor;
    setter.apply(this,arguments);
}
checkColor=function(e){
    var color=(s[0].value == 1)?"#FFE763":"#FF8040";
    scheduler._get_lightbox().style.backgroundColor=color;
}

but s[] takes the values from the time section, and not from the select section. I tried to use var setter=scheduler.form_blocks.select.set_value; but I get an exception.

How can I get the value of the select in the "type" section?

Please, try to use the attached version instead of the original one. It will solve the issue

Alex,

thank you for your post. The file works fine, but I get two problems:

scheduler.config.multi_days=true; does not work,

scheduler.config.show_loading=true; works but the loading icon does not disappear when the data is loaded. Not a big problem, by the way, I just set this to false.

The correct property name is multi_day instead of�.multi_days:

scheduler.config.multi_day = true;

The issue with show_loading property is confirmed. It will be fixed in the next scheduler version (the version will be released in few days).

ok. thanks