Start Building Professional
Web Apps Today


 
Categories Question details Back To List
Question  posted by Kyle on Jul 03, 2009 13:59
open dhtmlx forum
dhtmlxScheduler changing contents of map_to:"auto"

Is there any was to change the automatic filling of the {name:"time", height:72, type:"time", map_to:"auto"}? I want to change what it contains (i.e. one input field for time (hh:mm) and one input field for the entire date (%Y-%m-%d)). I was thinking of putting a jquery datepicker (see: http://jqueryui.com/demos/datepicker/#default) product or something similar and applying it to a single input field, rather than having 3 individual fields (the current default). If I were to go about doing this, how would I ensure that the fields would autopopulate with the date that the user clicked on?

And, if this is not possible, could I completely rewrite the AJAX div overlay that pops up when a date is clicked on? Would that get me any closer to solving this problem, and how would I ensure that the fields would autopopulate with the date that the user clicked on in this method if the above is not possible?

Sorry for all the questions, but I figured I'd get them all out of my system in one go.

Thanks for your time.
-Kyle
Answer posted by Stanislav on Jul 03, 2009 15:15
>>Is there any was to change the automatic filling of the
You can add the custom section type, which will provide editors, necessary in your case 
Please check attachment from the next post for more details.
          http://dhtmlx.com/docs/products/kb/index.shtml?cat=search&page=1&q=10260&ssr=yes&s=scheduler%20custom
Basically you need write a code which renders a custom editor and set|get value from it, all other will be done by scheduler. 

>>could I completely rewrite the AJAX div overlay that pops up when a date is clicked on
This part of functionality is not finalized yet, but basically you can override  showLightbox method of scheduler
        scheduler.showLightbox=function(id){
                 var ev = scheduler.getEvent(id); 
                 // ev - event object, ev.start_date - date of event 
                  ... any custom code ...
        }

To apply changes back you need just set new value of related property in event object and update current view by 
                scheduler.event_updated(ev);
Answer posted by Kyle on Jul 03, 2009 15:52
Okay.  Thanks for the quick reply.  I've been playing around with it, but I cannot get this to work.  So, 2 questions...
  1. How do I know know what number to put in the brackets for this -->  node.childNodes[]  ?
  2. How do I automatically populate the value for the time periods?  (Like is there a function to do this, or perhaps an API.)
I'm not new to this by any means, but I'm not the brightest either.  Thanks for your time with this and understanding.

-Kyle
Answer posted by Support on Jul 06, 2009 02:50
>>How do I know know what number to put in the brackets
This code is a plain sample - you can use any other in your case
The main idea is that you need to define 3 methods
   a) method which returns html code necessary for your inputs
   b) method which will receive an HTML object related to previously generated input and set necessary values in it
   c) method which will receive an HTML object related to previously generated input and get necessary values in it
 
The code in getter|setter methods depends on html structure provided by rendering method.
You can use dom methods ( childNodes ) or any other kind of locater to get the necessary html element  and to set its value. 

>> I automatically populate the value for the time periods?
ev.start_date and ev.end_date - are date objects, if you need to convert them in string in some specific format - you can use built in conversion functionality 
http://dhtmlx.com/docs/products/dhtmlxScheduler/doc/dhtmlxscheduler___date_formats.html#sch_dateformat
Answer posted by Kyle on Jul 07, 2009 19:11
Thanks.  That answers my questions.

-Kyle