Hi, i’ve seen this example
docs.dhtmlx.com/scheduler/sample … reate.html
and i like to use it with unit.
Here is my code, i can select alway the first unit…
<!doctype html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Prenotazioni Edilizia Privata</title>
</head>
<script src="../codebase/dhtmlxscheduler.js" type="text/javascript" charset="utf-8"></script>
<script src="../codebase/ext/dhtmlxscheduler_units.js" type="text/javascript" charset="utf-8"></script>
<script src="../codebase/ext/dhtmlxscheduler_limit.js" type="text/javascript" charset="utf-8"></script>
<script src="../codebase/ext/dhtmlxscheduler_timeline.js" type="text/javascript" charset="utf-8"></script>
<script src="../codebase/ext/dhtmlxscheduler_expand.js" type="text/javascript" charset="utf-8"></script>
<script src="../codebase/ext/dhtmlxscheduler_collision.js" type="text/javascript" charset="utf-8"></script>
<script src="../codebase/ext/dhtmlxscheduler_url.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="../codebase/dhtmlxscheduler.css" type="text/css" title="no title" charset="utf-8">
<style type="text/css" media="screen">
html, body{
margin:0px;
padding:0px;
height:100%;
overflow:hidden;
}
.dhx_cal_event {
z-index: 1;
cursor: pointer;
}
.highlighted_timespan {
background-color: #87cefa;
opacity:0.5;
filter:alpha(opacity=50);
cursor: pointer;
z-index: 0;
}
.fat_lines_section {
background-image: url(data/imgs/fat_lines.png);
}
</style>
<script type="text/javascript" charset="utf-8">
function init() {
scheduler.config.multi_day = true;
scheduler.config.xml_date="%Y-%m-%d %H:%i";
scheduler.config.details_on_create=true;
scheduler.config.details_on_dblclick=true;
scheduler.config.drag_create = false;
scheduler.locale.labels.unit_tab = "Tecnici"
scheduler.locale.labels.section_custom="Tecnico";
scheduler.config.first_hour = 9;
scheduler.config.last_hour = 18;
scheduler.config.limit_time_select = true;
var sections=[
{key:1, label:"Gensini"},
{key:2, label:"Chiucchi"},
{key:3, label:"Maselli"},
{key:4, label:"Breschi"}
];
scheduler.config.lightbox.sections=[
{name:"Denominazione", height:32, map_to:"text", type:"textarea" , focus:true},
{name:"description", height:130, map_to:"text", type:"textarea"},
{name:"Telefono", height:32, map_to:"text", type:"textarea"},
{name:"Email", height:32, map_to:"text", type:"textarea"},
{name:"custom", height:30, type:"select", options:sections, map_to:"section_id" },
{name:"time", height:72, type:"time", map_to:"auto"}
]
scheduler.createUnitsView({
name:"unit",
property:"section_id",
list:sections
});
scheduler.addMarkedTimespan({
days:[0, 1, 3, 4, 6],
zones: "fullday",
css: "fat_lines_section",
html:"non prenotabile",
type: "dhx_time_block",
sections: {
unit: [1, 2, 3, 4]
}
});
scheduler.addMarkedTimespan({
days: 2,
zones: [9*60,15*60,18*60,24*60],
css: "fat_lines_section",
html:"non prenotabile",
type: "dhx_time_block",
sections: {
unit: [1, 2, 3, 4]
}
});
scheduler.addMarkedTimespan({
days: 5,
zones: [13*60,24*60],
css: "fat_lines_section",
html:"non prenotabile",
type: "dhx_time_block",
sections: {
unit: [1, 2, 3, 4]
}
});
scheduler.attachEvent("onTemplatesReady", function() {
var fix_date = function(date) { // 17:48:56 -> 17:30:00
date = new Date(date);
if (date.getMinutes() > 30)
date.setMinutes(30);
else
date.setMinutes(0);
date.setSeconds(0);
return date;
};
scheduler.attachEvent("onClick", function(id, e){
scheduler.showLightbox(id);
});
var marked = null;
var marked_date = null;
var event_step = 30;
scheduler.attachEvent("onEmptyClick", function(date, native_event){
scheduler.unmarkTimespan(marked);
marked = null;
var fixed_date = fix_date(date);
scheduler.addEventNow(fixed_date, scheduler.date.add(fixed_date, event_step, "minute"));
});
scheduler.attachEvent("onMouseMove", function(event_id, native_event) {
var date = scheduler.getActionData(native_event).date;
var fixed_date = fix_date(date);
if (+fixed_date != +marked_date) {
scheduler.unmarkTimespan(marked);
marked_date = fixed_date;
marked = scheduler.markTimespan({
start_date: fixed_date,
end_date: scheduler.date.add(fixed_date, event_step, "minute"),
css: "highlighted_timespan",
sections:{ unit: [1,2,3,4]}
});
}
});
});
scheduler.init('scheduler_here',new Date(2015,2,3),"unit");
scheduler.load("./data/units.xml");
}
</script>
<body onload="init();">
<div id="scheduler_here" class="dhx_cal_container" style='width:100%; height:100%;'>
<div class="dhx_cal_navline">
<div class="dhx_cal_prev_button"> </div>
<div class="dhx_cal_next_button"> </div>
<!-- <div class="dhx_cal_today_button"></div> -->
<div class="dhx_cal_date"></div>
<!-- <div class="dhx_cal_tab" name="day_tab" style="right:204px;"></div>
<div class="dhx_cal_tab" name="week_tab" style="right:140px;"></div>
<div class="dhx_cal_tab" name="unit_tab" style="right:280px;"></div>
<div class="dhx_cal_tab" name="month_tab" style="right:76px;"></div>
-->
</div>
<div class="dhx_cal_header">
</div>
<div class="dhx_cal_data">
</div>
</div>
</body>