.scheduler-min-calendar-tab {
padding: 0 5px;
color: #747473;
text-decoration: none;
font-weight: 700;
font-family: arial;
font-size: 12px;
line-height: 30px;
border: 1px solid #CECECE;
text-align: center;
border-radius: 5px;
background-position-x: 8px;
background-position-y: 4px;
}
.dhx_zoom_in_button {
background-image: url(imgs/buttons.png);
background-position: 0 0;
cursor: pointer;
}
.dhx_zoom_in_button, .dhx_zoom_out_button {
color: #454544;
height: 30px;
line-height: 30px;
background: 0 0;
border: 1px solid #CECECE;
}
.dhx_zoom_in_button, .dhx_zoom_out_button {
left: auto;
width: 46px;
}
.dhx_zoom_in_button {
right: 61px;
background: url('../../Content/img/Zoom_Out.png') center center no-repeat;
-webkit-border-top-left-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-bottomleft: 5px;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}
.dhx_zoom_out_button {
right: 61px;
background: url('../../Content/img/Zoom_In.png') center center no-repeat;
-webkit-border-top-right-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
-moz-border-radius-topright: 5px;
-moz-border-radius-bottomright: 5px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
.worktime {
background: grey;
opacity: 0.4;
}
<div class="dhx_cal_header">
</div>
<div class="dhx_cal_data" style="">
</div>
</div>
[/code]
and below is the supporting Js Code
var lastUpdateDate;
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 = false;
scheduler.config.show_loading = true;
scheduler.config.xml_date = "%d-%m-%Y %H:%i:%s";
scheduler.config.className = 'dhtmlXTooltip tooltip';
scheduler.config.timeout_to_display = 50;
scheduler.config.delta_x = 15;
scheduler.config.delta_y = -20;
scheduler.config.hour_size_px = 40;
scheduler.createTimelineView({
name: "timeline",
x_unit: "minute",
x_date: "%H:%i",
x_step: 60,
x_size: 24,
x_start: 0,
x_length: 24,
x_height: 30,
y_unit: [{ key: 1, label: "Section A" },{ key: 2, label: "Section B" },{ key: 3, label: "Section C" },{ key: 4, label: "Section D" }],
y_property: "section_id",
render: "bar",
second_scale: {
x_unit: "day",
x_date: "%F %d"
}
});
var dragged_event;
var eventId;
scheduler.attachEvent("onDblClick", function () {
return false
});
scheduler.templates.hour_scale = function (date) {
for (var i = 0; i < 60 / step; i++) {
html += "<div style='height:100px!important;line-height:21px;'>" + format(date) + "</div>";
date = scheduler.date.add(date, step, "minute");
}
return html;
};
scheduler.xy.scale_width = 500;
scheduler.init("scheduler", new Date(), "timeline");
getSchedulerData(new Date(), 1);
scheduler.attachEvent("onViewChange", function (new_mode, new_date) {
if (new Date(lastUpdateDate.getFullYear(), lastUpdateDate.getMonth(), lastUpdateDate.getDate()).getTime() != new Date(new_date.getFullYear(), new_date.getMonth(), new_date.getDate()).getTime()) {
getSchedulerData(new_date, scheduler.matrix.timeline.x_step);
}
});
var calendar = $("#dhx_minical_icon");
calendar.css("right", "0px");
calendar.css("left", "auto");
calendar.css("background-position-x", "8px");
calendar.css("background-position-y", "4px");
}
function getSchedulerData(startDate, noOfDays) {
lastUpdateDate = startDate;
var equipmentRecordNos = [1,2,3,4]
scheduler.clearAll();
scheduler.addMarkedTimespan({
start_date: new Date("2016", "11", new Date().getDate,"09", "00"),
end_date: new Date("2016", "11", new Date().getDate, "10", "00"),
css: "worktime",
type: "dhx_time_block",
sections: {
"timeline": equipmentRecordNos
}
});
scheduler.parse([
{
text: "Conference", start_date: "08/11/2016 12:00", end_date: "08/11/2012 13:00",
section_id: "1"
},
{
text: "Meeting", start_date: "08/11/2016 09:00", end_date: "08/11/2012 11:00",
section_id: "2"
},
{
text: "Conference", start_date: "08/11/2016 15:00", end_date: "18/11/2012 16:00",
section_id : "3"
}
], "json");
scheduler.updateView();
}
function showCalendar(onContextMenu, contextMenu, data, equipmentRecordNosJson) {
var calendarPopup = $(".dhx_minical_popup");
if (!onContextMenu && calendarPopup.length > 0 && calendarPopup.data("on-context-menu")) {
scheduler.destroyCalendar();
}
if (scheduler.isCalendarVisible()) {
scheduler.destroyCalendar();
}
else {
scheduler.renderCalendar({
position: "dhx_minical_icon",
date: scheduler._date,
navigation: true,
handler: function (date, calendar) {
if (onContextMenu) {
data["scheduleDate"] = date.toUTCString();
} else {
scheduler.setCurrentView(date);
}
scheduler.destroyCalendar()
}
});
if (calendarPopup.length == 0) {
calendarPopup = $(".dhx_minical_popup");
}
if (onContextMenu) {
calendarPopup.data("on-context-menu", true);
calendarPopup.css("left", contextMenu.css("left"));
calendarPopup.css("top", contextMenu.css("top"));
calendarPopup.css("right", "auto");
} else {
calendarPopup.data("on-context-menu", false);
var calendarPopupTop = calendarPopup.offset().top;
calendarPopup.css("left", "auto");
calendarPopup.css("right", "5px");
calendarPopup.css("top", calendarPopupTop + 3 + "px");
}
}
}
function zoomIn() {
if (scheduler.matrix.timeline.x_step == 60) {
scheduler.matrix.timeline.x_step = 30;
} else if (scheduler.matrix.timeline.x_step == 30) {
scheduler.matrix.timeline.x_step = 15;
} else if (scheduler.matrix.timeline.x_step == 15) {
scheduler.matrix.timeline.x_step = 10;
} else if (scheduler.matrix.timeline.x_step == 10) {
scheduler.matrix.timeline.x_step = 5;
}
scheduler.setCurrentView();
}
function zoomOut() {
if (scheduler.matrix.timeline.x_step == 5) {
scheduler.matrix.timeline.x_step = 10;
} else if (scheduler.matrix.timeline.x_step == 10) {
scheduler.matrix.timeline.x_step = 15;
} else if (scheduler.matrix.timeline.x_step == 15) {
scheduler.matrix.timeline.x_step = 30;
} else if (scheduler.matrix.timeline.x_step == 30) {
scheduler.matrix.timeline.x_step = 60;
}
scheduler.setCurrentView();
}
Once you get the output, follow the steps below:
- Click on Zoom In (+) 4 times.
- Click on Navigate Right (>) 4 times.
- Click on Zoom Out (-) 4 times.(observe the changes in Date).
- Now Click either Left(<) or Right(>) and Observe the Date.
Thanks & Regards
. I am guessing it as a Bug.
Can anyone help me in this?
