addMarkedTimespan

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

number addMarkedTimespan(object config);

config

object

the configuration object of the timespan to mark/block

number

the 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
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
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	`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
zones	`//2 limit blocks:04:00-08:00,12:00-15:00 zones:[460,860,1260,1560] zones:"fullday" //limits the entire day`
css	the name of a css class
css	`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
html	`//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	`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)
invert_zones	`//results in 2 limitation blocks: 00:00-08:00, 17:00-24:00 zones: [860, 1760], invert_zones: true //results in 2 limitation blocks: 00:00-08:00, 17:00-24:00 zones: [0, 860, 1760, 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)
sections	`//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

Set of properties	Example
days zones invert_zones css html type sections	`var config ={ days: 1, zones: [960, 1560], css: "cssClassName", sections: { unit: 5 } }`
start_date end_date css html type sections	`var config ={ start_date: new Date(2013,7,13), end_date: new Date(2013,7,14), css: "cssClassName", sections: { unit: 5 } }`

days
zones
invert_zones
css
html
type
sections

var config ={
    days:  1, 
    zones: [9*60, 15*60], 
    css: "cssClassName", 
    sections: {
         unit: 5
    }
}

start_date
end_date
css
html
type
sections

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