Blocking and Marking Dates

The library provides the ext/dhtmlxscheduler_limit.js extension that allows you to block and mark (highlight) certain dates or date ranges.

To start using the extension, include the ext/dhtmlxscheduler_limit.js file on the page.

Note, if you use the Timeline View, the 'limit' extension file should go before the 'timeline' one:

<script src="codebase/ext/dhtmlxscheduler_limit.js"></script> <script src='codebase/ext/dhtmlxscheduler_timeline.js'></script>

Configuration options

The extension gives at your disposal the next configuration options:

Related sample:  Current time marking

Related events

If the scheduler detects an attempt to create/modify an event with a non-allowed date, the onLimitViolation event will be generated.

How to block certain dates?

There are 3 methods you can specify a limit in the scheduler with:

  • addMarkedTimespan - marks dates, but with certain settings makes blocking (unlike blocktime() allows setting custom styling for the limit)
  • blockTime - blocks the specified date and applies the default 'dimmed' style to it.
  • markTimespan - marks and/or blocks date(s) by applying the default or a custom style to them. marking is canceled right after any internal update occurs in the app. can be used for highlighting

Related sample:  Blocking dates

How to mark certain dates?

There are 2 methods that can be used to mark the specified date(s):

  • addMarkedTimespan - marks dates, but with certain settings makes blocking (unlike blocktime() allows setting custom styling for the limit)
  • markTimespan - marks and/or blocks date(s) by applying the default or a custom style to them. marking is canceled right after any internal update occurs in the app. can be used for highlighting

Related sample:  Handling the pointer highlighting

Removing marking/blocking

There are 3 methods that can be used to remove the currently marked/blocked time spans:

Related sample:  Handling the pointer highlighting

Blocking priority

When you call the 'blocking' methods several times and block different ranges, blocking will follow this priority (from highest to lowest):

  1. Dates specified through Date() objects for certain items;
  2. Dates for certain items (when the sections parameter is defined);
  3. Dates specified through Date() objects;
  4. Other dates.
  • A blocking/marking with the higher priority will overwrite ones with the lower priority.
  • Several blocking/marking methods with the same priority (located in the same time slot) will be applied simultaneously.

For example:

scheduler.addMarkedTimespan({ // blocks 4th July, 2012 (this is Wednesday).
    days:  new Date(2012,7,4),
    zones: "fullday", 
    type:  "dhx_time_block",
    css:   "red_section" // the name of applied CSS class
});
scheduler.addMarkedTimespan({ // blocks each Sunday, Monday, Wednesday
    days:  [0, 1, 3], 
    zones: "fullday",
    type:  "dhx_time_block", 
    css:   "blue_section" // the name of applied CSS class
});
//blocks each Sunday and Wednesday just for an item with id=2 
scheduler.addMarkedTimespan({  
    days:  [0,3], 
    zones: "fullday",
    type:  "dhx_time_block", 
    css:   "gray_section",  // the name of applied CSS class
    sections: { timeline: 2} 
});

As a result of calling these methods you will get the following:

  1. First of all, the scheduler will block each Sunday and Wednesday for the item (id=2) in the Timeline view and color them in gray.
  2. Then, will block 4th July, 2012 and color it in red.
  3. Finally, will block each Sunday, Monday, Wednesday and color them in blue.

limits_priority.png

Back to top