Start Building Professional
Web Apps Today

Scheduler Reoccuring events - set reminder

I'm looking to have the ability to set a reminder (time period) and method (email / sms) while still maintaining the ability to use the reocuring events js. If I begin to define a new template I loose the reocurring events layout etc.

http://dhtmlx.com/docs/products/dhtmlxScheduler/doc/dhtmlxscheduler___custom_details_form.html#recurring_events

You can still add custom form, but need to have the default fields as well

scheduler.lightbox.sections=[
{name:"description", height:130, map_to:"text", type:"textarea" , focus:true},
// any custom sectons can be added here
{name:"recurring", height:115, type:"recurring", map_to:"rec_type", button:"recurring"}, //mandatory
{name:"time", height:72, type:"time", map_to:"auto"}
]

Ah this worked perfectly! Thanks.

Now, I was hoping to be able to add 2 dropdowns / select boxes side by side [Reminder period (5 minutes - 1 week) | Reminder Method (None, Email, SMS, Both)]
Is it possible to define / build this layout using html (maybe in a similar way that was done for Reocurring events)?

You can define your own block elements
Please check 
    http://dhtmlx.com/docs/products/dhtmlxScheduler/doc/dhtmlxscheduler___custom_details_form.html#custom_editors
It shows how the custom area with two editors can be created. The same approach can be used to place two custom selectboxes - just tweek the html inside the "render" method of custom form block

Full package contains the sample of above functionality
                  samples\customization\05_custom_editor.html

Okay I have it displaying visually the way I want. But I'm getting a javascript error. Not sure how to set and control the childnodes etc.

Here is what I have

        scheduler.form_blocks["my_notication"]={
            render:function(sns){
                return "<div class='dhx_cal_ltext' style='height:30px;'><table cellpadding=0 cellspacing=0 border=0><tr><td><img src='/images/icon_clock.gif'>&nbsp;</td><td><select><option value=''>Select Reminder</option><option value='5'>5 Minutes</option><option value='10'>10 Minutes</option><option value='15'>15 Minutes</option></select>&nbsp;</td><td><select><option value='email'>email</option><option value='sms'>sms</option><option value='both'>both</option></select></td></tr></table></div>";
            },
            set_value:function(node,value,ev){
                node.childNodes[1].value=value||"";
                node.childNodes[4].value=ev.details||"";
            },
            get_value:function(node,ev){
                ev.location = node.childNodes[4].value;
                return node.childNodes[1].value;
            },
            focus:function(node){
                var a=node.childNodes[1]; a.select(); a.focus();
            }
        }

You can use getElementsByTagName to simplify correct location


scheduler.form_blocks["my_notication"]={
      render:function(sns){
          return "<div class='dhx_cal_ltext' style='height:30px;'><table cellpadding=0 cellspacing=0 border=0><tr><td><img src='/images/icon_clock.gif'>&nbsp;</td><td><select><option value=''>Select Reminder</option><option value='5'>5 Minutes</option><option value='10'>10 Minutes</option><option value='15'>15 Minutes</option></select>&nbsp;</td><td><select><option value='email'>email</option><option value='sms'>sms</option><option value='both'>both</option></select></td></tr></table></div>";
      },
      set_value:function(node,value,ev){
          var sel = node.getElementsByTagName("SELECT");
          sel[0].value=value||"";
          sel[1].value=ev.details||"";
      },
      get_value:function(node,ev){
          var sel = node.getElementsByTagName("SELECT");
          ev.location = sel[0].value;
          return sel[1].value
      },
      focus:function(node){
          var sel = node.getElementsByTagName("SELECT");
          sel[0].focus(); 
      }
}

Okay here is what I have so far.

        scheduler.form_blocks["my_notication"]={
            render:function(sns){
                return "<div class='dhx_cal_ltext' style='height:30px;'><table cellpadding=0 cellspacing=0 border=0><tr><td><img src='/images/icon_clock.gif'>&nbsp;</td><td><select><option value=''>Select Reminder</option><option value='5'>5 Minutes</option><option value='10'>10 Minutes</option><option value='15'>15 Minutes</option></select>&nbsp;</td><td><select><option value='email'>email</option><option value='sms'>sms</option><option value='both'>both</option></select></td></tr></table></div>";
            },
      set_value:function(node,value,ev){
          var sel = node.getElementsByTagName("SELECT");
          sel[0].value=value||"";
          sel[1].value=ev.reminder||"";
      },
      get_value:function(node,ev){
          var sel = node.getElementsByTagName("SELECT");
          ev.reminder = sel[0].value;
          return sel[1].value
      },
      focus:function(node){
          var sel = node.getElementsByTagName("SELECT");
          sel[0].focus();
      }
        }

When saved it sends the value of the first Select (in this case 10), but the value of the second Select (in this case both) is not sent (it's blank when I check my scripts on the server). How do I set it up to send the second select value as well?

Thanks

Just wondering if there is an answer to the post above

Any ideas?

Please provide the scheduler.lightbox.sections  configuration , which is used in your case
Saving controlled by get_value handler


get_value:function(node,ev){
      var sel = node.getElementsByTagName("SELECT");
      ev.reminder = sel[0].value;
      return sel[1].value
},

in above case, the value of first select is set to the "reminder" property
value of second select set to the property ,which name is take from the map_to attribute

name:"description", height:130, map_to:"text", type:"textarea" , focus:true

In your case , the map_to, must contain valid property value, to which select need to be linked

Here is what I currently have

        scheduler.config. lightbox={
            sections:[ {name:"time", height:72, type:"time", map_to:"auto"},
                                 {name:"description", height:150, map_to:"text", type:"textarea" , focus:true},
                                 {name:"notification", height:30, map_to:"auto", type:"my_notication" , focus:false},
                                 {name:"recurring", height:115, type:"recurring", map_to:"rec_type", button:"recurring"} //mandatory
                            ]
        }

You need to change

  {name:"notification", height:30, map_to:"auto", type:"my_notication" , focus:false},
to 
  {name:"notification", height:30, map_to:"type", type:"my_notication" , focus:false},

where type - is the name of the property which you are using for storing a type of reminder

Sorry for the delay in responding to your suggestion. It took me a bit to understand what you meant. I got it to work. Thanks for your advice. Here is what I have now.

    // define what the edit page looks like
        scheduler.form_blocks["my_notication"]={
            render:function(sns){
                return "<div class='dhx_cal_ltext' style='height:30px;'><table cellpadding=0 cellspacing=0 border=0><tr><td><img src='/images/icon_clock.gif'>&nbsp;</td><td><select id='reminder' name='reminder'><option value=''>Select Reminder</option><option value='5'>5 Minutes</option><option value='10'>10 Minutes</option><option value='15'>15 Minutes</option><option value='30'>30 Minutes</option><option value='45'>45 Minutes</option><option value='60'>1 Hour</option><option value='120'>2 Hour</option><option value='180'>3 Hour</option><option value='240'>4 Hour</option><option value='300'>5 Hour</option><option value='360'>6 Hour</option><option value='420'>7 Hour</option><option value='480'>8 Hour</option><option value='540'>9 Hour</option><option value='600'>10 Hour</option><option value='660'>11 Hour</option><option value='720'>0.5 Days</option><option value='1440'>1 Day</option><option value='2880'>2 Days</option><option value='4320'>3 Days</option><option value='5760'>4 Days</option><option value='7200'>5 Days</option><option value='8640'>6 Days</option><option value='10080'>1 Week</option></select>&nbsp;</td><td><select id='reminderType' name='reminderType'><option value='email'>email</option><option value='sms'>sms</option><option value='both'>both</option></select></td></tr></table></div>";
            },
      set_value:function(node,value,ev){
          var sel = node.getElementsByTagName("SELECT");
          sel[0].value=value||"";
          sel[1].value=ev.reminder||"";
      },
      get_value:function(node,ev){
          var sel = node.getElementsByTagName("SELECT");
          ev.reminder = sel[0].value;
          return sel[1].value
      },
      focus:function(node){
          var sel = node.getElementsByTagName("SELECT");
          sel[0].focus();
      }
        }


        scheduler.config. lightbox={
            sections:[ {name:"time", height:72, type:"time", map_to:"auto"},
                                 {name:"description", height:150, map_to:"text", type:"textarea" , focus:true},
                                 {name:"notification", height:30, map_to:"reminderType", type:"my_notication" , focus:false},
                                 {name:"recurring", height:115, type:"recurring", map_to:"rec_type", button:"recurring"} //mandatory
                            ]
        }


When going into the edit screen for the appointment, how do I set the values for the 2 dropdowns (reminder, reminderType) to the values for this appointment?

Thanks again