I the mobile scheduler is there any plans to support the addMarkedTimespan and related methods from the main scheduler component? They are very useful for blocking out or highlighting time periods.
Hello,
We will consider this feature.
However, it is possible to add css rule for scale items in the existent scheduler:
css:
<style>
.red_section .dhx_dayevents_scale_event{
background-color: #FF0000;
opacity: 0.25;
}
</style>
js
[code]
var blocked = {};
blocked[(new Date(2013,11,6)).valueOf()] = [2,5];
blocked[(new Date(2013,11,7)).valueOf()] = [2,5];
$$(“scheduler”).$$(“dayList”).attachEvent(“onAfterRender”,function(){
var selectedDate = $$(“scheduler”).coreData.getValue();
showTimeMarker(selectedDate)
});
function showTimeMarker(date){
var hours = blocked[date.valueOf()];
if(hours){
nodes = $$(“scheduler”).$$(“dayList”).$view.firstChild.childNodes;
for(var i=hours[0]+1; i<= hours[1]; i++){
nodes[i].className += " red_section";
}
}
}[/code]
It is also possible to set validation rules for start and end dates using scheduler.config.form_rules object. Here is default rule for end_date (if end_date does not match this rule, the field is highlighted with “invalid” css rule and form is not saved)
scheduler.config.form_rules ={
end_date: function(value,obj){
return (obj.start_date.valueOf() < value.valueOf());
}
};
And you can add rule for start_date and modify end_date rule:
[code]function isBlocked(date){
var value = dhx.Date.datePart(date).valueOf();
var blockedArray = blocked[value];
if(blockedArray){
var h= date.getHours();
return h >= blockedArray[0] && h <= blockedArray[1];
}
return true
}
scheduler.config.form_rules ={
start_date: function(value,obj){
return !isBlocked(value);
},
end_date: function(value,obj){
return (obj.start_date.valueOf() < value.valueOf()) && !isBlocked(value);
}
};[/code]