It’s my first time use this great product. I encountered a problem when I want to use two different view in one page. The Unit View and Timeline View.
code summarization:
…
scheduler.createUnitsView({
name:“unit”,
property:“section_id”,
list:sections
});
…
scheduler.createTimelineView({
name : “timeline”,
x_unit : “minute”,
x_date : “%H:%i”,
x_step : 30,
x_size : 24,
x_start : 16,
x_length : 48,
y_unit : sections,
y_property : “section_id”,
render : “bar”
});
…
scheduler.init(‘scheduler_here’,new Date(2009,5,30),“unit”);
scheduler.load(some data fits both of unit and timeline view);
It’s nothing happend when I click timeline view link. pls let me know is that possible to put two different view in one page or i got some mistake. thanks a lot.
Hi,
Make sure you’ve added a button for timeline view with a correct value of the ‘name’ attribute. The name value should go as ‘viewName_tab’:
<div class="dhx_cal_tab" name="timeline_tab"></div>Thank you for your reply. and I’ve added tab like following code:
<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="month_tab" style="right:76px;"></div>
<div class="dhx_cal_tab" name="timeline_tab" style="right:280px;"></div>
<div class="dhx_cal_tab" name="units_tab" style="right:356px;"></div>
when the page first load timeline view can display correctly.but when i changed to units view, no data displayed and the grid was same with the timeline view.
Can you provide some kind of sample or demo link, where problem can be checked ?
Sorry,It’s just a demo page for investigate. following is the code.
<!doctype html>
<script src='../../codebase/jquery-1.10.2.js' type="text/javascript" charset="utf-8"></script>
<script src='../../codebase/dhtmlxscheduler.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_units.js' type="text/javascript" charset="utf-8"></script>
<script src="../../codebase/ext/dhtmlxscheduler_quick_info.js" type="text/javascript"></script>
<script src="../../codebase/ext/dhtmlxscheduler_editors.js" type="text/javascript" charset="utf-8"></script>
<link rel='stylesheet' type='text/css' href='../../codebase/dhtmlxscheduler.css'>
<script src="../../sources/locale/locale_cn.js" type="text/javascript" charset="utf-8"></script>
<script src="../../codebase/ext/dhtmlxscheduler_readonly.js" type="text/javascript" charset="utf-8"></script>
<script src="../../codebase/ext/dhtmlxscheduler_recurring.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css" media="screen">
html, body {
margin: 0;
padding: 0;
height: 100%;
overflow: hidden;
}
/*event in day or week view*/
.dhx_cal_event.manager_event div {
background-color: #009966 !important;
color: black !important;
}
.dhx_cal_event.employee_event div {
background-color: #FF9933 !important;
color: black !important;
}
/*multi-day event in month view*/
.dhx_cal_event_line.manager_event {
background-color: #009966 !important;
color: black !important;
}
.dhx_cal_event_line.employee_event {
background-color: #FF9933 !important;
color: black !important;
}
/*event with fixed time, in month view*/
.dhx_cal_event_clear.manager_event {
color: black !important;
}
.dhx_cal_event_clear.employee_event {
color: black !important;
}
</style>
<script type="text/javascript" charset="utf-8">
function init() {
scheduler.locale.labels.timeline_tab = "Timeline";
scheduler.locale.labels.section_custom = "Section";
scheduler.config.details_on_create = true;
scheduler.config.details_on_dblclick = true;
scheduler.config.xml_date = "%Y-%m-%d %H:%i";
scheduler.locale.labels.section_hidden = "Hidden section";
scheduler.config.quick_info_detached = true;
scheduler.templates.quick_info_content = function(start, end, ev) {
return ev.details || ev.text;
};
scheduler.templates.quick_info_title = function(start, end, ev) {
return ev.type + ":" + ev.text;
};
scheduler.locale.labels.section_todotype = "指派类别";
scheduler.locale.labels.section_group = "团队";
scheduler.locale.labels.section_custom = "担当人";
scheduler.locale.labels.units_tab = "Unit"
scheduler.config.multi_day = true;
//===============
//Configuration
//===============
scheduler.config.icons_select = ["icon_details", "icon_delete"];
function block_readonly(id) {
if (!id)
return true;
if (this.getEvent(id).type == "task") {
$(".icon_delete").hide();
return false;
} else {
return true;
}
}
scheduler.attachEvent("onBeforeDrag", block_readonly)
scheduler.attachEvent("onBeforeEventDelete", block_readonly)
scheduler.attachEvent("onClick", block_readonly)
scheduler.attachEvent("ondblclick", block_readonly);
scheduler.templates.event_text = function(start, end, ev) {
var temp = "";
temp += "";
if (ev.type) {
if (ev.type.valueOf() == 'task') {
temp += "Task:" + ev.text + " ";
} else {
temp += "Todo:" + ev.text + " ";
}
temp += "";
return temp;
}
return ev.text;
};
scheduler.templates.event_class = function(start, end, ev) {
var temp = "";
temp += "";
if (ev.type) {
if (ev.type.valueOf() == 'task') {
temp += " employee_event ";
} else {
temp += " manager_event ";
}
temp += "";
return temp;
}
return ev.text;
};
var sections = [{
key : 1,
label : "James Smith"
}, {
key : 2,
label : "John Williams"
}, {
key : 3,
label : "David Miller"
}, {
key : 4,
label : "Linda Brown"
}];
scheduler.createTimelineView({
name : "timeline",
x_unit : "minute",
x_date : "%H:%i",
x_step : 30,
x_size : 24,
x_start : 16,
x_length : 48,
y_unit : sections,
y_property : "section_id",
render : "bar"
});
//===============
//Data loading
//===============
var todoType = [{
key : 1,
label : 'personal'
}, {
key : 2,
label : 'group'
}];
var full_lightbox = [{
name : "description",
height : 100,
map_to : "text",
type : "textarea",
focus : true
}, {
name : "todotype",
height : 21,
options : todoType,
map_to : "todoType",
type : "radio",
default_value : "1",
vertical : false
}, {
name : "group",
height : 21,
map_to : "groupid",
type : "select",
options : [{
key : 1,
label : "i-tec"
}, {
key : 2,
label : "my group"
}, {
key : 3,
label : "other"
}],
onchange : function() {
alert($(this).val());
}
}, {
name : "custom",
height : 23,
type : "select",
options : sections,
map_to : "section_id"
}, {
name : "recurring",
height : 115,
type : "recurring",
map_to : "rec_type",
button : "recurring"
}, {
name : "time",
height : 72,
type : "time",
map_to : "auto"
}];
var restricted_lightbox = [{
name : "description",
height : 100,
map_to : "text",
type : "textarea",
focus : true
}, {
name : "custom",
height : 23,
type : "select",
options : sections,
map_to : "section_id"
}, {
name : "time",
height : 72,
type : "time",
map_to : "auto"
}];
scheduler.config.lightbox.sections = restricted_lightbox;
scheduler.attachEvent("onBeforeLightbox", function(event_id) {
scheduler.resetLightbox();
var ev = scheduler.getEvent(event_id);
scheduler.config.lightbox.sections = (ev.type == "task") ? restricted_lightbox : full_lightbox;
return true;
});
scheduler.attachEvent("onLightboxButton", function(button_id, node, e) {
alert(button_id);
});
scheduler.attachEvent("onBeforeViewChange", function(old_mode, old_date, mode, date) {
if (mode == "units") {
toUnitView();
}
return true;
});
scheduler.init('scheduler_here', new Date(2009, 5, 30), "timeline");
scheduler.parse([{
start_date : "2009-06-30 09:00",
end_date : "2009-06-30 12:00",
type : "task",
text : "A-12458",
todoType : "0",
hidden : "You won't see me",
readonly : true,
section_id : 1
}, {
start_date : "2009-06-30 10:00",
end_date : "2009-06-30 16:00",
type : "todo",
text : "A-89411",
todoType : "1",
hidden : "You won't see me",
section_id : 1
}, {
start_date : "2009-06-30 10:00",
end_date : "2009-06-30 14:00",
type : "task",
text : "A-64168",
todoType : "0",
hidden : "You won't see me",
readonly : true,
section_id : 1
}, {
start_date : "2009-06-30 16:00",
end_date : "2009-06-30 17:00",
type : "todo",
todoType : "2",
text : "A-46598",
hidden : "You won't see me",
section_id : 1
}, {
start_date : "2009-06-30 12:00",
end_date : "2009-06-30 20:00",
type : "task",
text : "B-48865",
todoType : "0",
section_id : 2
}, {
start_date : "2009-06-30 14:00",
end_date : "2009-06-30 16:00",
type : "todo",
text : "B-44864",
todoType : "1",
hidden : "You won't see me",
section_id : 2
}, {
start_date : "2009-06-30 16:30",
end_date : "2009-06-30 18:00",
type : "task",
text : "B-46558",
todoType : "0",
hidden : "You won't see me",
readonly : true,
section_id : 2
}, {
start_date : "2009-06-30 18:30",
end_date : "2009-06-30 20:00",
type : "task",
text : "B-45564",
todoType : "0",
hidden : "You won't see me",
readonly : true,
section_id : 2
}, {
start_date : "2009-06-30 08:00",
end_date : "2009-06-30 12:00",
type : "task",
text : "C-32421",
todoType : "0",
hidden : "You won't see me",
readonly : true,
section_id : 3
}, {
start_date : "2009-06-30 14:30",
end_date : "2009-06-30 16:45",
type : "task",
text : "C-14244",
todoType : "0",
hidden : "You won't see me",
readonly : true,
section_id : 3
}, {
start_date : "2009-06-30 09:20",
end_date : "2009-06-30 12:20",
type : "todo",
text : "D-52688",
todoType : "2",
hidden : "You won't see me",
section_id : 4
}, {
start_date : "2009-06-30 11:40",
end_date : "2009-06-30 16:30",
type : "task",
text : "D-46588",
todoType : "1",
hidden : "You won't see me",
readonly : true,
section_id : 4
}, {
start_date : "2009-06-30 12:00",
end_date : "2009-06-30 18:00",
type : "task",
text : "D-12458",
todoType : "0",
hidden : "You won't see me",
readonly : true,
section_id : 4
}], "json");
}
function toUnitView() {
location.href = 'UnitDemo.html';
return false;
}
</script>
pls ignore the “onBeforeViewChange”.
a) The above code does miss the createUnitViews command
b) you have name=“units_tab” in as the tab attribute, so the correct command must be
scheduler.createUnitsView({
name:"units",
property:"section_id",
list:sections
});
name must be “units” ( not “unit” ), the same as value of name attribute