How to disable dates before current date?

Scheduler Javascript
#1

I Want to know how to disable all dates before current date in scheduler

#2

docs.dhtmlx.com/doku.php?id=dhtm … on_options

Try to use

scheduler.config.limit_end = new Date();

#3

its not working. i want it to be from the current date so that the days before like yesterday are not accesible. they should not be displayed in the scheduler

#4

try .limit_view property,
docs.dhtmlx.com/doku.php?id=dhtm … on_options

scheduler.config.limit_start = new Date(); scheduler.config.limit_end = new Date(9999,0,1); scheduler.config.limit_view = true;

#5

thanx it wrks perfectly.

#6

Hi,

Is there any option to color the past days in gray color (or light color) which indicates that those days are disabled?

#7

Hi @Uthpala_Pitawela,
if I understand correctly what you mean by past days , you want to color all days before the current day in gray.
In order for doing this, please follow the general steps:

  1. Firstly, please add dhtmlxscheduler_limit.js extension to your app. When onBeforeViewChange event fires, please get the start date of the current view:
  scheduler.attachEvent("onBeforeViewChange", 
  function(old_mode,old_date,mode,date){
    var viewStartDate = scheduler.date[mode + "_start"](new Date(date));
    if(mode == "month")
    viewStartDate = scheduler.date.week_start(viewStartDate);                
    ...
    return true;
  });
  1. Then using addMarkedTimespan set the period of time to be disabled:
    markedTimespan = scheduler.addMarkedTimespan({
      start_date: viewStartDate,
      end_date: new Date(),
      zones: "fullday",
      type: "dhx_time_block"
    });
  1. Please, use the additional code to color days in the month view via month_date_class template
scheduler.templates.month_date_class = function(date){
  if (date < new Date()){
    return "gray_section";
  } else {
    return "";
    }
  }

and add the CSS style:

.gray_section .dhx_month_head {
background-color: silver;
opacity: .4;
z-index: 1;
}
gray_section .dhx_month_body {
background-color: silver;
opacity: .4;
z-index: 1;
}

Please, see the implementation in the demo:
http://snippet.dhtmlx.com/5/5e33c8434

1 Like