Custom lightbox and recurring event html

They’ve asked me to replace the lightbox so I can customize the screen with ajax and stuff like that.

I saw the example where

Is there a way to use the recurring section of the lightbox in my new custom screen?

TIA,

David

This is the way I plan to replace the lightbox. Just that I don’t know how to put the recurring or daily scheduling section of the original lightbox in it without programming it.

docs.dhtmlx.com/scheduler/sample … _form.html

Unfortunately the recurring section ( same as other sections ) can be reused only if you are using native lightbox. If you plan to use a custom lightbox - you will need to create your own version of recurring section as well.

Ok. I think there are references to how I can add recurring events into the tables. My boss is intent on adding a couple minor features like a code lookup which requires ajax and it’s going to require a complete re-write of this screen. My other colleague reminds me that I get paid by the house and shouldn’t worry lol.

Thanks,

-D

For custom form you will need to create any kind of UI which will set 3 properties of event object

rec_type - recurence string
event_lenght - lenght of event in seconds
end_date - end_date of last event occurence ( if you have event with no end-date, it need to be set to some distant future )

docs.dhtmlx.com/scheduler/recurr … ntegration

That’s good. It looks like I can recreate the recurring section without too much pain.

Apart from the recurring section, it looks like I have to understand how to transform the existing fields. My code has built up and I’m not sure what the effort level will be.

I wish I could keep the existing lightbox. He’s asked me to add a couple features.

The 1st is a text field with a button next to it that displays a lookup value in a popup box. (case title lookup and visual validation).

The 2nd is a field with a button next to it that performs a task (emails the event).

Is there anyway I can place a button next to the field rather than at the bottom using the lightbox?

Yes, you can create a custom sections in lightbox ( basically you can place any html controls in the lightbox )

docs.dhtmlx.com/scheduler/custom … ditor.html

Creating a custom section looks as much easier task compared to reimplementing recurring section.

Awesome. I’ll try that

Thanks,

David

I’m not sure how this works yet. Trying to add the button into the custom editor. So far just been able to add an existing field.

I would like to add the cases_button to the custom editor. Is this possible?

-D

// current button
scheduler.config.buttons_right = [“cases_button”];
scheduler.locale.labels[“cases_button”] = “Cases”;

scheduler.attachEvent(“onLightboxButton”, function(button_id, node, e){

 var id = scheduler.getState().select_id;

 if(button_id == "cases_button"){
     window.open("/scheduler/event_cases/"+id,'_blank');
 }

// new custom editor with missing button
scheduler.form_blocks[“my_editor”] = {
render:function(sns) {
return "

 
";
},
set_value:function(node, value, ev) {
node.childNodes[1].value = value || “”;
//node.childNodes[3].value = ev.case_num || “”;
},
get_value:function(node, ev) {
ev.case_num = node.childNodes[3].value;
return node.childNodes[1].value;
},
focus:function(node) {
var a = node.childNodes[1];
a.select();
a.focus();
}
};

// lightbox section
scheduler.config.lightbox.sections=[
{ name:“description”, height:25, map_to:“text”, type:“textarea”, focus:true },
{name:“event_type”, height:20, type:“select”, options: event_type, map_to:“event_type”,
onchange: onTypeChange },
//{ name:“case_num”, height:25, map_to:“case_num”, type:“textarea”, size:“15”, focus:tr
ue },
{ name:“case_num”, height:25, map_to:“case_num”, type:“my_editor”, size:“15”, focus:tru
e },

// result (pretty much like it was before I had the custom editor)
Enter Case # 2011CA016032
(would like the button that’s showing up on the bottom to be here)

I figured it out

I added the link in the code below

Yay!

Thanks,

-David

          scheduler.form_blocks["case_editor"] = {                                               
             render:function(sns) {                                                             
                 var id = scheduler.getState().select_id;                                       
                 return "<div class='dhx_cal_ltext' style='height:30px;'>&nbsp;<input type='case

_num’>
enter more cases";
},
set_value:function(node, value, ev) {
node.childNodes[1].value = value || “”;
//node.childNodes[3].value = ev.case_num || “”;
},
get_value:function(node, ev) {
//ev.case_num = node.childNodes[3].value;
return node.childNodes[1].value;
},
focus:function(node) {
var a = node.childNodes[1];
a.select();
a.focus();
}
};

added target="_blank" after the href and it’s perfect

-D

I’m having problems with the custom lightbox sections. 1) I’m not sure how to map to a checkbox with an int value of 1 or 0. 2) when I reference a second field it doesn’t work anymore (ie node.childNodes[4].value = ev.details || “”; )

The example works fine so I’m not sure why mine would not. (samples/02_customization/05_custom_editor.html). the childNodes is 4 in that case with corresponds to the 5th element of the data.xml

I have other problems with the custom lightbox section but these are the primary one’s to complete one of my items.

-D

Code example:

         scheduler.form_blocks["my_editor"] = {                                                 
             render:function(sns) {                                                             
                 return "<div class='dhx_cal_ltext' style='height:30px;'>Text&nbsp;<input type='

text’>
Details ";
},
set_value:function(node, value, ev) {
node.childNodes[1].value = value || “”;
node.childNodes[4].value = ev.details || “”;
},
get_value:function(node, ev) {
ev.details = node.childNodes[4].value;
return node.childNodes[1].value;
},
focus:function(node) {
var a = node.childNodes[1];
a.select();
a.focus();
}
};
vn/vrb2/html_vrb2/dhtmlx_scheduler/samples/02_customization/05_custom_editor.html 44,5-14 47%
};

         scheduler.form_blocks["custom_editor"] = {                                             
             render:function(sns) {                                                             
                 var id = scheduler.getState().select_id;                                       
                 return "<div class='dhx_cal_ltext'>Mark Event Private&nbsp;<input type='checkbo

x’>  Active ";
},
set_value:function(node, value, ev) {
node.childNodes[1].value = value || “”; // private
node.childNodes[14].value = ev.active || “”; // active
},
get_value:function(node, ev) {
ev.active = node.childNodes[14].value;
return node.childNodes[1].value;
},
focus:function(node) {
var a = node.childNodes[1];
a.select();
ws/scheduler.php.tpl 391,5-14 59%
//{name:“division”, height:20, type:“div_editor”, options: divisions, map_to:“division” },
{ name:“media_type”, height:20, map_to:“media_type”, vertical:false, type:“radio”, opti
ons:media_types },
{name:“recurring”, height:115, type:“recurring”, map_to:“rec_type”, button:“recurring”}
,
//{ name:“private”, map_to:“is_private”, type:“checkbox”, checked_value: “1”, unchecked
_value: “0”, height:40 },
{ name:“private”, map_to:“is_private”, type:“custom_editor”, checked_value: “1”, unchec
ked_value: “0” },
{ name:“cancel_reason”, height:20, map_to:“cancel_reason”, type:“textarea”, size:“15”,
focus:true },
{name:“color”, height:20, type:“color_editor”, options: event_color, map_to:“color” },
{ name:“details”, height:55, map_to:“details”, type:“note_editor”, focus:true },
{ name:“email_addr”, height:20, map_to:“email_addr”, type:“email_editor”, focus:true }

         ];

Here’s my data that support the problems

-D

28 function get($request){
29 $user = sess_get(‘user’);
30 extract($user); // user_id, divs_selected, private
31
32 $divs_selected = sess_get(‘setup’,‘divs_selected’);
33
34 //$sql = "select e.*,s.import_source_name from events e,import_sources s where e.import_sou
rce_id = s.import_source_id and ";
35 $sql = "select e.event_id,e.start_date,e.end_date,e.event_name,e.details,e.division,e.color
,e.event_type,e.media_type,e.is_private,e.user_id,e.rec_type,e.event_pid,e.event_length,e.active,e.
import_source_id,cancel_reason,e.import_source_name,e.case_num,e.email_addr,s.import_source_name fr
om events e,import_sources s where e.import_source_id = s.import_source_id and ";
36
37 if ($is_private)
38 $sql .= " ( is_private = 0 or ( is_private = 1 and user_id = ‘$user_id’ ) ) ";
39 else
40 $sql .= " is_private = 0 ";
41
42 if ($active)
43 $sql .= ’ and active = 1 ';
models/event_model.php 28,27 11%

I should have a section with two checkup boxes that looks like the following

Thanks,

David

example:

Mark Event Private (un/checked) Active (un/checked)

Working with checkboxes requires a bit different code for custom editor.
Check the attached sample.
05_custom_editor.zip (1.13 KB)

Awesome,

I’m checking it out

-D

This worked like a charm.

Thanks so much,

David

I’m have a problem with the checkbox editor in IE 8,9

When I enter the lightbox it doesn’t show the previous selected value
(In Chrome and Firefox it does)

TIA,

David

        scheduler.form_blocks["div_editor"] = {                                                
            render:function(sns) {                                                             
                var id = scheduler.getState().select_id;                                       
                                                                                               
                var divs = "<?php                                                              
        $divs = sess_get('setup','divs_selected');                                             
        $divs = explode(',',$divs);                                                            
        $loop = 0;                                                                             
        foreach ($divs as $div) {                                                              
            $loop++;                                                                           
            if ($loop == 1) {                                                                  
                echo '<option selected>' . $div . '</option>';                                 
            }                                                                                  
            else {                                                                             
                echo '<option>' . $div . '</option>';                                          
            }                                                                                  
                //echo '<option>' + $div + '</option>';                                        
        }                                                                                      
    ?>";                                                                                       
                return "<div class='dhx_cal_ltext' style='height:30px;'>&nbsp;&nbsp;<select typ

e=‘division’>" + divs + “”;
},
set_value:function(node, value, ev) {
node.childNodes[1].value = value || “”;
},
get_value:function(node, ev) {
return node.childNodes[1].value;
},
focus:function(node) {
var a = node.childNodes[1];
a.select();
a.focus();
}
};

Late in the day sorry. It’s actually a list box editor area as you can see…

-D

This is what the source is looking like

-D

The previous picture was IE and here’s a picture of the working Chrome

-D