Skip to main content

addMarkedTimespan

Description​

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

addMarkedTimespan: (config: any) => number

Parameters​

  • config - (required) object - the configuration object of the timespan to mark/block

Returns​

  • id - (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();

Details​

The method is available from version 3.5.

note

The method requires the limit plugin to be activated.

note

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
zonesthe 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
cssthe name of a css class 
css:"gray" //draws a DIV and applies the 'gray' css class to it
htmlan HTML content that will be added to the marked range 
//draws a DIV with this text over the marked range  
html:"<b>Blocked</b>"
typedefines 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_zonesspecifies, 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
sectionsallows 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

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

  • 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

Need help?
Got a question about the documentation? Reach out to our technical support team for help and guidance. For custom component solutions, visit the Services page.
Need more help?Contact Support