Start Building Professional
Web Apps Today


 
Categories Question details Back To List
Question  posted by Benjamin on Oct 16, 2009 07:21
open dhtmlx forum
Inner Form Event @ Scheduler

Oh dear Coder,

it's me again and perhaps the last time, couse with this genius KnnowledgeBase i could clear all problems i had and work around every thing i wanted :-))))
Just one more function i tried and not get:

Is it possible when i have the CREATE or DETAIL Mode, with javascript to change the time_picker ONCHANGE of a select-element?

In detail i have a selectbox with a few items and i have fix timeperiods every entry within this fix selectbox takes :)
I thought it would be such a service, that when i pick (for example) FOOTBALL-TRAINING the time-period above will change from (standard) 15 Minutes to 45 Minutes (by not changing the STARTT-time)...

It's really a cool feature, but i am really that kind of uncool that i can no timagine how to create that javascript event, perhaps cause i (for example) don't know how to change the time_period_picker (is it called like this?!)


Greeting from Germany,
Benjamin
Answer posted by Stanislav (support) on Oct 19, 2009 03:26
You will need to create a custom form block , with custom select implementation ( you can take "select" from sources/lightbox.js as a base ) , and add onChange handler to  the render method

render:function(sns){
     ...
     var html="<div class='dhx_cal_ltext' style='height:"+height+";'><select onchange="scheduler.resetTimeScale(this.value)" ...

The second step - define resetTimeScale method 
scheduler.resetTimeScale = function(value){
     function fill_select(select,step){
              var v = select.value;
              var d = scheduler.date.date_part(new Date());
              select.innerHTML = "";

              for (var i=0; i<24*60/step; i++){
                     var text = scheduler.templates.hour_scale(d);
                     select.options[select.options.length]=new Option(text,text);
                     d = scheduler.date.add(d,step,"minute");
              }

              select.value=v;
     }

    var step = some_custom_method_which_converts_value_to_time_step(value);
    var node=document.getElementById(scheduler.config.lightbox.sections[i].id).nextSibling; // i - index of time section in "sections" collection, zero based
    var selects = node.getElementsByTagName("select");

    fill_select(selects[0],step);
    fill_select(selects[4],step);
}

Above code is not tested, and I'm pretty sure that it contains some typos.
Answer posted by Benjamin on Oct 22, 2009 02:47
Hello There,

The last days i tried to understand what's going on in the code you are given to me.
First of all and the most important things: Have you wrote it just for me ???
I can't believe it, but it seems like :))))))))))))))))))))))))

When i got it right, i needed to customize a function who defines "step".
But i don't knwo what to give it back... A number? Like "30" (minutes)?
Is it right to use a function like that

    function duration(value) {
      switch (value) {
          case "football":
            return THIS_TAKES_15_MINUTES;
            break;
          case "basketball":
            return THIS_TAKES_30_MINUTES;
            break;
          case "chess":
            return THIS_TAKES_45_MINUTES;
            break;
          default:
            break;
        }
    }

while the "case"-values of course equals the values of the selectbox where i add the onChange-Command :)
So what do i have to give back? Just a number?

Furthermore i do not undertsand what is my part in the definition (declaration?) of "node".
Is there anything to do for me? You commentetd on the the "i" for the index of the time-section.
So this is my section method for example:

        scheduler.config.lightbox.sections=[
            { name:"description", height:83, map_to:"text", type:"my_editor" , focus:true},
            { name:"art", height:21, type:"select", map_to:"art", options:[
                {key:"football", label:"Football"},
                {key:"basketball", label:"basketball"},
                {key:"chess", label:"Chess"}
            ]},
            { name:"time", height:72, type:"time", map_to:"auto"}
        ]

So the correct value for "i" is "2" ? :-)
I am proud to understand why we (you) change the selects[0] and [4] one, but unable to understand the whole "fill_select"-Function.
First i conclude that the timeScale on the left would be changeing,m bu ti don't think that i am right,... i think you know what you'v written so i trusting 100%...

I just can say, that i am that kind of happy abput helpin gme out getting this stuff to work (and perhaps write that much code just fo rme!!!) that i have orderer payment informations for a commercial licenze (allthough i don't need any!!!) just to give you a thank you!

Best wishes form .dE
Benjamin
Answer posted by Stanislav (support) on Oct 22, 2009 04:08
>>First of all and the most important things: Have you wrote it just for me ???
Writing code without real testing is not a such complex task :) 

>> A number? Like "30" (minutes)
Yep, above code expects that step is a number of minutes

>>So what do i have to give back? Just a number?
yes
case "football":
      return 15;

>>So the correct value for "i" is "2" ? :-)
As it was stated "indexes are zero based", so the select will have index as 1


function fill_select(select,step){
  var v = select.value;   //save current value of select

   var d = scheduler.date.date_part(new Date());   
   select.innerHTML = "";   //clear existing options in select

   //create new options
   for (var i=0; i<24*60/step; i++){
      var text = scheduler.templates.hour_scale(d);  //new time label
      select.options[select.options.length]=new Option(text,text); //add option to select
      d = scheduler.date.add(d,step,"minute");
   }

   select.value=v; //restore original value of select
}

So, the code clears existing options in selectbox and fill it with a new set , based on the "step" selected. 
Answer posted on Oct 22, 2009 08:42
>>>>So the correct value for "i" is "2" ? :-)
>>As it was stated "indexes are zero based", so the select will have index as 1

I think 2 was right, or not?
I mean, with 2 in it, changes happens to the timeperiod selectbox, with 2 in it, happens within the sleectbox i am sleecting with...
Zero based, so description is 0, art is 1 and the time should be 2, or not? Sorry for correting you if i am wrong...

Furthermore the code brings in strange thinks in the time section...
When i change the value of 'art' (the selectbox with the onChange) i got the following (see screenshot)
Attachments (1)
screenshot_ben.jpg621.71 Kb
Answer posted by Stanislav (support) on Oct 23, 2009 10:03
>>I think 2 was right, or not?
You are right, I have look at incorrect config. In your case the section index will be 2

>>Furthermore the code brings in strange thinks in the time section
Again my bad, I forgot that you are using custom y-scale. 
You can update fill select as


function fill_select(select,step){
   var v = select.value;
   var d = scheduler.date.date_part(new Date());
   select.innerHTML = "";
   var format = scheduler.date.date_to_str("%H %i");

   for (var i=0; i<24*60/step; i++){
    var text = format(d);
    select.options[select.options.length]=new Option(text,text);
    d = scheduler.date.add(d,step,"minute");
   }

   select.value=v;
}




Answer posted by Benjamin on Oct 25, 2009 10:26
Hey over there...

Very happy to get an answer again :)))))))))))))))))))))))))
Of course i tried to use it as you gave it to me, and furtunetly i do not have that big HTML Codes within my selectboxes :)
But it is still not working :-)

When i study the code, i thought, it will edit the options that are available in the selectbox for the time (of course date must not be editetd, caus i use a scheduler form 7-20 o Clock, so not over the days :)
When i get it right, wouldn't it be easier just to SELECT a different option in the second time-selectbox (selects[4]) ?
I mean, it just should change tha end of the even, so the beginning should stay the same and i got a time_step of 15 minutes and every event i will put into length that are are like 15,30,45,60,75 (and so on) minutes.

Am i totally wrong or is this code editing and recreate ever yoption within the selectboxes?
In fact with the acruall fill_select() i get the value 00:00 in both of the time-selectboxes for the rest of the script (until i reload whole page)...
I see, that the time_steps are changed, for example i choose FOOTBALL and i return a value auf 45 minuten for this activity, the time selectboxes are just in steps of 45minutes...
00:00
00:45
01:30
and so on :-) So it works perfectly, but unfortunatly the starting time was lost :-)
I think i would prefer the normal way by not changing the scale, but just changing the ending time :)

I hope i could describe the error best as possible to you?
Best wishes and of course a relaxing weekend,
Ben
Answer posted by Stanislav (support) on Oct 28, 2009 11:11
>>I mean, it just should change tha end of the even
It was not clear from initial description. The above solution is really overcomplicated for such task. 
Please check the attached sample
Attachments (1)
1256750485.ZIP37.62 Kb
Answer posted by mahesh on Oct 28, 2009 18:54

Stan,

  Thanks for merging my discussion thread with Benjamins.   I was able to incorporate the time selection menu based on your attachment which was quite helpful (it would have taken me a long time).  Below are now only minor points to really tidy things up, like icing on a cake, and all are non-essential:

1.   I was unable to switch the day and week display to use 12 hour AM and PM format despite changing all the '%H' to '%h:%i%A'.

2.   Is there a way to change the increment from 15 minutes to 1/2 hour increments?

3.  The lower right check box for hour selection is now blocked.  Is it possible to unblock this, or is this needed in oder for the code to work?

 

thanks, once gain, nice job!

 

Answer posted by Alex (support) on Oct 29, 2009 02:43

>>  I was unable to switch the day and week display to use 12 hour AM and PM format despite changing all the '%H' to '%h:%i%A'.

scheduler.config.xml_date="%Y-%m-%d %H:%i";

scheduler.config.hour_date="%h:%i %A";

>>   Is there a way to change the increment from 15 minutes to 1/2 hour increments?

scheduler.config.time_step = 30;

>>  The lower right check box for hour selection is now blocked. Is it possible to unblock this, or is this needed in oder for the code to work?

you can comment the following line in the provided sample to unlock select

end.disabled=true;

Answer posted by Benjamin on Oct 29, 2009 02:45
Damn i did it :)
I integrated your script into mine, so everything works fine.
I likte the blocking of the END-Date Time-Picker, but i have a problem:

When i add an event with this technique, its duratio got the precise length i siwtch from he selectbox, perfectly so far.
But when ich manually in day or weekview shorten or longe rthe event time by dragging the border and afterwards (!)
want to edit something in this event, (i open detailview and) i have the problem, that he recogniced my choosen SELECT Value and automaticly changes the end-time to the script based value like when i i created it :(

You know what i mean?
I thought about it and it is definitly a problem, cause i do not allways think of this when i edit an event i changed the length by dragging the border ALL THE TIME (so i will forget it anytime and not recognize the changed duration :/ )...
So i thought about the way:

Wouldn't it be the easiest way to check, if the event is CREATED (than everything works like the script above does) or it is EDITED (and the script should  not directly affact the duration, first when i change the SELECT value again)...

Possible? :-/


To your question 3.:  end.disabled=true; seems like you can change it to false so it is activated again.
Answer posted by Stanislav (support) on Oct 29, 2009 03:21
>>and automaticly changes the end-time to the script based value
You can comment the next line ( line 49 in the original sample ) 
          start.onchange();
it will remove auto-change of end time

>> if the event is CREATED (than everything works like the script above does) 
          if (scheduler._new_event)
                      start.onchange();
Answer posted by Benjamin on Oct 29, 2009 03:35
Mhmm okay, this does its job,
but i get, that the functinality of creating a new event by draging into the dayview (or weekview) makes no sense anymore when it is allways fixed to a forced duration.
u know what i mean?
I drag a border about 1 hour and when i release the mouse, creatign form opens and it is changed to 15 minutes for example the value of the curent sekect value...

Any possiiblity to give the dragged end date (if created by dragging!) to the script only i fit is created like this?

Also i got a SELECTED Issue: When i once changed the seected option and save, when i create a new one afterwards it is allways the last selected value selected, instaed of the STANDART value (like normaly with sleectboxes)... Is this a focus: problem? I am sure not that big problem, but i can't find the irght line in Code yet...
Answer posted by Alex (support) on Oct 29, 2009 10:18

Regarding creation by drag-n-drop:

it is possible to check whether item was created by drag-n-drop or not. You can set some flag - the result of this checking. This flag can be add into the following part of the code:

...

if (scheduler._new_event&&!dragged){
  start.onchange();
}
dragged=0;

scheduler.attachEvent("onEventCreated",function(){
  dragged= (scheduler._drag_mode == "create");
  return true
})

The problem with default sselected  option can be solved  by a small modification:

scheduler.form_blocks.my_select = {
  get_value : select.get_value,
  set_value : function(node,value,ev){
  mode = node.firstChild;
  mode.value=value||mode.options[0].value;
  mode.onchange=set_end_time;
  },
  render : select.render,
  focus : select.focus
  }




Answer posted by mahesh on Oct 29, 2009 17:56

I made the change in time increments, and the unlocking of the time block in the lower left.  Thanks!  (so 2 out of 3)

I tried the time format you suggested, but it still fails to shift from 24 hour to 12 hour format. 

SUGGESTED:  scheduler.config.xml_date="%Y-%m-%d %H:%i";

scheduler.config.hour_date="%h:%i %A"; and some variants.

See code below. 

Also, how difficult would it be to interface using dthmlxgrid format to elect to generate the select list and pick the endtime?

________code below_________________

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
 <meta http-equiv="Content-type" content="text/html; charset=utf-8">
 <title></title>
</head>
 <script src="../../codebase/dhtmlxscheduler.js" type="text/javascript" charset="utf-8"></script>
 <link rel="stylesheet" href="../../codebase/dhtmlxscheduler.css" type="text/css" title="no title" charset="utf-8">
        <script src="../../codebase/dhtmlxscheduler_units.js" type="text/javascript" charset="utf-8"></script>
        <div id="scheduler_here" class="dhx_cal_container" style='color:red;width:100%; height:100%;'>
 
<style type="text/css" media="screen">
 html, body{
  margin:0px;
  padding:0px;
  height:100%;
  overflow:hidden;
 }
       /*event in day or week view*/
 .dhx_cal_event.radblock_event div{
  background-color:purple !important;
  color:white !important;
 }
 
</style>

<script type="text/javascript" charset="utf-8">
 function init() {
scheduler.config.xml_date="%Y-%m-%d %h:%i%a";
  scheduler.init('scheduler_here',null,"week");
  
  (function(){
   
   var end = null;
   var start = null;
   var mode = null;
   
   function set_end_time(){
    if (!mode.value) return;
    var time = scheduler.date.add((new Date(2000,1,1,0,start.value)),mode.value*1, "minute");
    end.value = time.getHours()*60+time.getMinutes();
   }
   
   var setter = scheduler.form_blocks.time.set_value;
   scheduler.form_blocks.time.set_value=function(node){
    var sels = node.getElementsByTagName("SELECT");
    
    start = sels[0];
    start.onchange=set_end_time;
    end = sels[4];
                                //Allow to free select time end
    //end.disabled=true;
    
    setter.apply(this,arguments);
    
    start.onchange();
   }
   
   var select = scheduler.form_blocks.select;
   scheduler.form_blocks.my_select = {
    get_value : select.get_value,
    set_value : function(node,value,ev){
     mode = node.firstChild;
     mode.value=value||"";
     mode.onchange=set_end_time;
    },
    render : select.render,
    focus : select.focus
   }
  })();
 //Add in select text 


                var sections=[
  {key:1, label:"Raymond Hung"},
  {key:2, label:"Ed Lebowitz"},
  {key:3, label:"Harry Morrison"},
  {key:4, label:"Richard Silberstein"},
                {key:5, label:"Stan Zipser"}
 ];
  var procedure=[
  {key:30, label:"1/2 hour"},
                {key:60, label:"1 hour"},
                {key:90, label:"1 1/2 hours"},
                {key:120, label:"2 hours"},
               {key:60, label:"aorta and run-off -- 1 hour"},
  {key:30, label:"chest tube -- 30 minutes"},
  {key:120, label:"biliary drainage -- 2 hours"},
                {key:30, label:"chest biopsy -- 30 minutes"}
 ];
                scheduler.locale.labels.workweek_tab = "W-Week"
  scheduler.locale.labels.decade_tab = "10-days"
  

  //scheduler.config.multi_day=1;
                //scheduler.config.readonly=1;
                scheduler.config.time_step = 30;
                scheduler.config.xml_date="%Y-%m-%d %h:%i%a";
                scheduler.config.hour_size_px=75;
  scheduler.config.lightbox.sections=[ 
   {name:"description", height:130, map_to:"text", type:"textarea" , focus:true},
                        {name:"custom", height:23, type:"select", options:sections, map_to:"section_id" },
                        {name:"prolength", height:23, type:"my_select", options:procedure, map_to:"section2_id" },
   {name:"time", height:72, type:"time", map_to:"auto"}
  ]
  scheduler.config.first_hour=7;
                scheduler.config.last_hour=19;
                scheduler.config.hour_date="%h:%i%A";

  //scheduler.locale.labels.section_location="Location";
  //scheduler.config.details_on_create=true;
  //scheduler.config.details_on_dblclick=true;

                  scheduler.templates.event_class=function(start,end,event){
      if ((end.getHours()-start.getHours()) < 0.1)  return "radblock_event"; //then set special css class for it
  }

 

         scheduler.createUnitsView("unit","section_id",sections);
                scheduler.locale.labels.unit_tab = "Radiologist"
  scheduler.locale.labels.section_custom="Assigned to";
                scheduler.locale.labels.section_prolength="Procedure";
  scheduler.config.details_on_create=true;
  scheduler.init('scheduler_here',null,"week");
  scheduler.load("php/ir_events.php?uid="+scheduler.uid());

  //work week
  scheduler.date.workweek_start = scheduler.date.week_start;
  scheduler.templates.workweek_date = scheduler.templates.week_date;
  scheduler.templates.workweek_scale_date = scheduler.templates.week_scale_date;
  scheduler.date.add_workweek=function(date,inc){ return scheduler.date.add(date,inc*7,"day"); }
  scheduler.date.get_workweek_end=function(date){ return scheduler.date.add(date,5,"day"); }

                //10-day
  scheduler.date.decade_start = function(date){
   var ndate = new Date(date.valueOf());
   ndate.setDate(Math.floor(date.getDate()/10)*10+1);
   return this.date_part(ndate);
  }
  scheduler.templates.decade_date = scheduler.templates.week_date;
  scheduler.templates.decade_scale_date = scheduler.templates.week_scale_date;
  
  scheduler.date.add_decade=function(date,inc)
                { return scheduler.date.add(date,inc*((date.getDate()==21 && this.add(date,10,"day").getMonth() ==
                date.getMonth())?11:10),"day"); }
  

  var dp = new dataProcessor("php/ir_events.php");
  dp.init(scheduler);

 }
</script>

<body onload="init();">
 <div id="scheduler_here" class="dhx_cal_container" style='width:100%; height:100%;'>
  <div class="dhx_cal_navline">
   <div class="dhx_cal_prev_button">&nbsp;</div>
   <div class="dhx_cal_next_button">&nbsp;</div>
   <div class="dhx_cal_today_button"></div>
   <div class="dhx_cal_date"></div>
                        <div style="right:500px;color:red;">ADMIN MODE: ir</div>
                        <div class="dhx_cal_tab" name="unit_tab" style="right:425px;"></div>
   <div class="dhx_cal_tab" name="day_tab" style="right:335px;"></div>
                        <div class="dhx_cal_tab" name="workweek_tab" style="right:270px;"></div>
   <div class="dhx_cal_tab" name="week_tab" style="right:205px;"></div>
                        <div class="dhx_cal_tab" name="decade_tab" style="right:140px;"></div>
   <div class="dhx_cal_tab" name="month_tab" style="right:75px;"></div>
   

  </div>
  <div class="dhx_cal_header">
  </div>
  <div class="dhx_cal_data">
  </div>  
 </div>
</body>

Answer posted by Benjamin on Oct 30, 2009 01:06
Perhaps you are able to post it at a ziped File with all files needed?

Alex, again thanks for ther perfect working code over here!
It is really amazing how easy things could be :)))

I think i got a realy last issue for that point, it is again espacially to understand how it works.
If i create event via dragging, i see, the selectbox onchange is not working :)
Perfectly done!

But i thought about, how it could work, to bring the selectbox onchanger back to work when i select a different item in it :)
You know? Initial state should than be inactive, but if i click on it, it will go back to life and change the time duration :)

Thought about some ELSE - clause behind the
if (scheduler._new_event&&!dragged) {
  start.onchange();
}
like
  ...
} else {
  // Do not start onchange();
  // But do initial a VAR to bring back selectbox onchange working for the next time it gets selected
}

Am i thinking in the right drection?
Answer posted by Alex (support) on Oct 30, 2009 01:16

>> but it still fails to shift from 24 hour to 12 hour format.

the sample is attached. Possibly it'll help to solve the issue

Attachments (1)
units.zip36.29 Kb
Answer posted by mahesh on Oct 30, 2009 13:26

Alex,

   Thanks!  that solved the problem although I do not know exactly why my version did not, but maybe somewhere the syntax was incorrect.

Is there a way to now autoenter the "key" that was selected (in my case the procedure) to determine the time automatically into the description field?

Answer posted by mahesh on Oct 30, 2009 13:42

Clarification to prior post:

The goal is to append the description text with the selected text either before or after the pre-existent descriprion text if present, or alternatively to fill in the description field if non exists.

Answer posted by Alex (support) on Nov 02, 2009 05:43

You can apply the same approach as in the sample provided before  (with data) to change the description text. You can redefine set_value method for this block.

Please see details here

http://www.dhtmlx.com/dhxdocs/doku.php?id=dhtmlxscheduler:custom_details_form