How to hide the time selectors on Full Day

Scheduler Javascript
#1

I want to hide the time selectors boxes when Full Day box is checked and display them when Full Day box is not checked.

Is that possible?

#2

Hello,

You need make some changes in the source code at scheduler.form_blocks.time.set_value function.
github.com/DHTMLX/scheduler/blo … r.js#L5277

Please, check the demo link: docs.dhtmlx.com/scheduler/snippet/0b6616f2

#3

Thanks @Polina, but is there anyway to do it outside of modifying your core code?

If ever I were to update/upgrade your code, I would lose my hard-coded edits.

I’ve tried every variation of the following and cannot coded this to work.

//document.getElementsByName( ‘full_day’ ).addEventListener( ‘click’, alert(“clicked it”) );
var abc = document.getElementsByName( ‘full_day’ );
abc.onclick = function() {
//document.getElementsByName( ‘full_day’ ).onclick = function() {
alert(‘click it’);
console.log(‘clicked it’);
};

UPDATE:
I’m honing in and hopefully getting closer :slight_smile:
scheduler.attachEvent( ‘onClick’, function (e){ //
if( document.getElementsByName( ‘full_day’ ) != ‘undefined’ ) {
if( document.getElementsByName( ‘full_day’ ).checked ) {
console.log(‘its checked’);
}
else {
console.log(‘its NOT checked’);
}
}
});

#4

It’s enough just to override the function before sheduler.init() like in the sample above(not in the source files). When you update the version of Scheduler, this changes will be saved.

#5

How do I override the function? Is it possible to tell me how?

#6

This is shown in the sample. Put this code before the other calendar settings like in this example code docs.dhtmlx.com/scheduler/snippet/187c6277

[code]scheduler.form_blocks.time.set_value = function(node,value,ev,config){
var cfg = scheduler.config;
var s=node.getElementsByTagName(“select”);
var map = config._time_format_order;
var start_date, end_date;

var dhx_section_time_el = document.getElementsByClassName(“dhx_section_time”)[0];
var select0 = dhx_section_time_el.getElementsByTagName(‘select’)[0];
var select4 = dhx_section_time_el.getElementsByTagName(‘select’)[4];

if(cfg.full_day) {
if (!node._full_day){
var html = " “+scheduler.locale.labels.full_day+” ";
if (!scheduler.config.wide_form)
html = node.previousSibling.innerHTML+html;
node.previousSibling.innerHTML=html;
node._full_day=true;
}
var input=node.previousSibling.getElementsByTagName(“input”)[0];
input.checked = (scheduler.date.time_part(ev.start_date)===0 && scheduler.date.time_part(ev.end_date)===0);

s[map[0]].disabled=input.checked;
s[ map[0] + s.length/2 ].disabled=input.checked;

input.onclick = function(){ 
  if(input.checked) {
    var obj = {};
    scheduler.form_blocks.time.get_value(node,obj,config);
    
    start_date = scheduler.date.date_part(obj.start_date);
    end_date = scheduler.date.date_part(obj.end_date);
    
    if (+end_date == +start_date || (+end_date >= +start_date && (ev.end_date.getHours() !== 0 || ev.end_date.getMinutes() !== 0)))
      end_date = scheduler.date.add(end_date, 1, "day");
            
    select0.style.visibility = 'hidden';        
    select4.style.visibility = 'hidden';        
    
  }else{
    start_date = null;
    end_date = null;
    
    select0.style.visibility = 'visible ';        
    select4.style.visibility = 'visible '; 
    
  } 
  
  s[map[0]].disabled=input.checked;
  s[ map[0] + s.length/2 ].disabled=input.checked;
  
  _fill_lightbox_select(s,0,start_date||ev.start_date);
  _fill_lightbox_select(s,4,end_date||ev.end_date);
};

}

if(cfg.auto_end_date && cfg.event_duration) {
var _update_lightbox_select = function () {
start_date = new Date(s[map[3]].value,s[map[2]].value,s[map[1]].value,0,s[map[0]].value);
end_date = new Date(start_date.getTime() + (scheduler.config.event_duration * 60 * 1000));
_fill_lightbox_select(s, 4, end_date);
};
for(var i=0; i<4; i++) {
s[i].onchange = _update_lightbox_select;
}
}

function _fill_lightbox_select(s,i,d) {
var time_values = config._time_values;
var direct_value = d.getHours()*60+d.getMinutes();
var fixed_value = direct_value;
var value_found = false;
for (var k=0; k<time_values.length; k++) {
var t_v = time_values[k];
if (t_v === direct_value) {
value_found = true;
break;
}
if (t_v < direct_value)
fixed_value = t_v;
}

s[i+map[0]].value=(value_found)?direct_value:fixed_value;
if(!(value_found || fixed_value)){
  s[i+map[0]].selectedIndex = -1;//show empty select in FF
}
s[i+map[1]].value=d.getDate();
s[i+map[2]].value=d.getMonth();
s[i+map[3]].value=d.getFullYear();

}

_fill_lightbox_select(s,0,ev.start_date);
_fill_lightbox_select(s,4,ev.end_date);
}[/code]

#7

Ok, getting closer @Polina…thank you so far./

I added this as well:

[code] var dhx_section_time_el = document.getElementsByClassName(“dhx_section_time”)[0];
var select0 = dhx_section_time_el.getElementsByTagName(‘select’)[0];
var select1 = dhx_section_time_el.getElementsByTagName(‘select’)[1]; // ADDED
var select2 = dhx_section_time_el.getElementsByTagName(‘select’)[2]; // ADDED
var select3 = dhx_section_time_el.getElementsByTagName(‘select’)[3]; // ADDED
var select4 = dhx_section_time_el.getElementsByTagName(‘select’)[4];

select1.style.visibility = ‘hidden’; // ADDED
select2.style.visibility = ‘hidden’; // ADDED
select3.style.visibility = ‘hidden’; // ADDED
[/code]

But only the the Start Month, Start Day, and Start Year get hidden. How can I also hide the End Month, End Day, and End Year?

#8

This is solved. I studied what was going on. Here is the solution.

[code] var dhx_section_time_el = document.getElementsByClassName(“dhx_section_time”)[0]; // 2017-03-22 Start Time/End Time content block
var select0 = dhx_section_time_el.getElementsByTagName(‘select’)[0]; // 2017-03-22 Start Hour Minute select element
var select1 = dhx_section_time_el.getElementsByTagName(‘select’)[1]; // 2017-03-22 Start Day select element
var select2 = dhx_section_time_el.getElementsByTagName(‘select’)[2]; // 2017-03-22 Start Month select element
var select3 = dhx_section_time_el.getElementsByTagName(‘select’)[3]; // 2017-03-22 Start Year select element
var select4 = dhx_section_time_el.getElementsByTagName(‘select’)[4]; // 2017-03-22 End Hour Minute select element
var select5 = dhx_section_time_el.getElementsByTagName(‘select’)[5]; // 2017-03-22 End Day select element
var select6 = dhx_section_time_el.getElementsByTagName(‘select’)[6]; // 2017-03-22 End Month select element
var select7 = dhx_section_time_el.getElementsByTagName(‘select’)[7]; // 2017-03-22 End Year select element

		select1.className = 'hideBlock'; // 2017-03-22 hide Start Day select element
		select2.className = 'hideBlock'; // 2017-03-22 hide Start Month select element
		select3.className = 'hideBlock'; // 2017-03-22 hide Start Year select element
		select5.className = 'hideBlock'; // 2017-03-22 hide End Day select element
		select6.className = 'hideBlock'; // 2017-03-22 hide End Month select element
		select7.className = 'hideBlock'; // 2017-03-22 hide End Year select element

[/code]

if (+end_date == +start_date || (+end_date >= +start_date && (ev.end_date.getHours() !== 0 || ev.end_date.getMinutes() !== 0))) end_date = scheduler.date.add(end_date, 1, "day"); dhx_section_time_el.style.visibility = 'hidden'; // 2017-03-22 hide entire Start Time/End Time content block }else{ start_date = null; end_date = null; dhx_section_time_el.style.visibility = 'visible'; // 2017-03-22 shoe entire Start Time/End Time content block select1.className = 'hideBlock'; // 2017-03-22 hide Start Day select element select2.className = 'hideBlock'; // 2017-03-22 hide Start Month select element select3.className = 'hideBlock'; // 2017-03-22 hide Start Year select element select5.className = 'hideBlock'; // 2017-03-22 hide End Day select element select6.className = 'hideBlock'; // 2017-03-22 hide End Month select element select7.className = 'hideBlock'; // 2017-03-22 hide End Year select element }

.hideBlock { display: none; }

#9

Just found this post after needing to do much the same thing so thanks for contributing. But you can do it with much less code.
All my events are full day events so I wanted to hide the Full Day check box and the time elements AND have the end date be the day the event ended NOT the next day at 00:00. My code…

         scheduler.config.full_day = true;
         scheduler.config.time_step = 60*24; 

         var originalDhtmlxFn = scheduler.form_blocks.time.set_value;
         scheduler.form_blocks.time.set_value = function(node,value,ev,config){
                // in full day mode the scheduler makes the end date 00:00 the next day so this puts it where users expect it
                ev.end_date = moment(ev.end_date).add(-1,'day').toDate();
                originalDhtmlxFn (node,value,ev,config);
                // hide the full day and time elements cos we are in Full Day mode
                var selects = document.getElementsByClassName("dhx_section_time")[0].getElementsByTagName('select');
                selects[0].className = 'hidden';
                selects[4].className = 'hidden';                
                document.getElementsByClassName("dhx_fullday")[0].className = 'hidden';
         }

         scheduler.attachEvent('onEventCreated', function (event_id) {
                // in full day mode the scheduler makes the end date 00:00 the next day so this puts it where we expect
                ev.end_date = moment(ev.end_date).add(-1,'day');
         });

Hope this helps someone one day.
Cheers.

#10

NeilD321, thank you for sharing the solution :slight_smile: