addMarkedTimespan

marks dates, but with certain settings makes blocking (allows setting custom styling for the limit)

number addMarkedTimespan(object config);
configobjectthe configuration object of the timespan to mark/block
numberthe id of the added timespan

Example

//marks dates
scheduler.addMarkedTimespan({  
    days:  5,               // marks each Friday
    zones: "fullday",       // marks the entire day
    css:   "gray_section"   // the name of applied CSS class
});
scheduler.updateView();
 
//marks and blocks dates
scheduler.addMarkedTimespan({  
    days:  5,
    zones: "fullday",
    css:   "gray_section",
    type:  "dhx_time_block" //the hardcoded value
});
scheduler.updateView();

Related samples

Details

The method is available from version 3.5.

The method requires the limit plugin to be activated.

Note, marking (blocking) won't be applied just after you've called the method. You should call updateView to apply the marking.


Configuration object properties

The configuration object can contain the following properties:

Property Description
start_date a Date object that sets the limitation start date
//denies creating events from 3rd May,2012 till 'end_date' 
start_date:new Date(2012,4,3)
end_date a Date object that sets the limitation end date
//denies creating events from 'start_date' 
// till 3rd September,2012
end_date:new Date(2012,8,3)
days days that should be limited
days:[0, 2, 6] //limits Sunday,Tuesday and Saturday
days:"fullweek" //limits the entire week
days:new Date(2012,6,1) //blocks 1st July,2012
zones the period in minutes that should be limited
//2 limit blocks:04:00-08:00,12:00-15:00
zones:[4*60,8*60,12*60,15*60] 
zones:"fullday" //limits the entire day
css the name of a css class
css:"gray" //draws a DIV and applies the 'gray' css class to it
html an HTML content that will be added to the marked range
//draws a DIV with this text over the marked range  
html:"<b>Blocked</b>"
type defines the time span's type. The 'dhx_time_block' type 'says' to apply blocking to the timespan. With any other type (you can specify any value) set, events will be just marked
type: "dhx_time_block" //events will be marked and blocked
invert_zones specifies, whether time zones (set by the 'zones' property) must be inverted (default - false)
//results in 2 limitation blocks: 00:00-08:00, 17:00-24:00
zones: [8*60, 17*60], invert_zones: true 
//results in 2 limitation blocks: 00:00-08:00, 17:00-24:00
zones: [0, 8*60, 17*60, 24*60], invert_zones: false
sections allows blocking date(s) just for specific items of specific views.
BTW, the specified date(s) will be blocked just in the related view(s)
//blocks dates just for the item with the id=5 in the Unit view 
//and items with the id=2, id=3 in the Timeline view 
sections: { unit: 5, timeline: [2,3]}

Acceptable combinations of config properties

Note, days, zones and start_date, end_date properties are used in pairs to set the blocking interval and can't be mixed and used in some other variation. For example, you can't specify zones, start_date or days, start_date, end_date at the same time.

Therefore, there are 2 acceptable combinations with specific set of properties:

Set of properties Example
var config ={
    days:  1, 
    zones: [9*60, 15*60], 
    css: "cssClassName", 
    sections: {
         unit: 5
    }
}
var config ={
    start_date: new Date(2013,7,13),
    end_date:   new Date(2013,7,14),
    css: "cssClassName",
    sections: {
         unit: 5
    }
}

markTimespan() and addMarkedTimespan() comparison

addMarkedTimespan markTimespan
requires calling the updateView method to draw a DIV for the time span draws a DIV for the time span automatically
the time span(s) exists all time along the time span(s) will be hided just after any internal update occurs in the app
returns the ID of the configured time span(s) returns a DIV or an array of DIVs
See also
Back to top