Timeline hover marked time

Hello -

I’m trying to highlight particular resources at particular times as I hover over them, both in timeline view and in unit view.

It works great in Unit view, but doesn’t work properly in Timeline view. I had seen from an earlier post (back in June) this was a known issue (http://forum.dhtmlx.com/viewtopic.php?f=6&t=31060), but I was hoping it was resolved, or that you have a patch available.

I’m using scheduler version 4.0.1

Thank you.

			var event_step;
			var fix_start = function(date) {  // always 2am 10am or 6pm
				date = new Date(date);
				
				if (date.getHours() >= 18) {
					date.setHours(18);
					event_step =240;
}				else if (date.getHours() >= 10) {
					date.setHours(10);
					event_step =480;
}				else if (date.getHours() >= 2) {
					date.setHours(2);
					event_step =240;
}				else {
					date.setHours(0);
}				
				date.setMinutes(0);
				date.setSeconds(0);
				return date;
			};


		var marked = null;
			var marked_date = null;
			var marked_resource = null;
			
			scheduler.attachEvent("onMouseMove", function(event_id, native_event) {

				if (event_id) {
					scheduler.unmarkTimespan(marked);
					marked_date = null;
					return false;
					}
				var date = scheduler.getActionData(native_event).date;
				var resource = scheduler.getActionData(native_event).section;
				var fixed_date = fix_start(date);

				if (+fixed_date != +marked_date || resource != marked_resource) {
				
					scheduler.unmarkTimespan(marked);

					marked_date = fixed_date;
					marked_resource = resource;
					marked = scheduler.markTimespan({
						start_date: fixed_date,
						end_date: scheduler.date.add(fixed_date, event_step, "minute"),
						css: "highlighted_timespan",
						sections: {
								timeline: resource
						}
					});
					
				}
			});

	
	scheduler.createTimelineView({
		name: "timeline", //to show in place of agenda grid
		dx: 100, //width of section
		x_unit: "day",
//		x_date: "%l, %j %M",
		x_date: "<span class=hover>%j %M</span>",
		x_step:1,
		x_size:14,
		x_start: 0,
		x_length: 14,
		y_unit: resources,
		y_property:"unit",
		render: "bar",
		event_dy:"full",
		resize_events:true,
    first_hour:9,
    last_hour:22
//		round_position:true

	});
	scheduler.date.timeline_start = scheduler.date.week_start;

Unfortunately issue is not fixed yet, but we will have a patch in next few days.

Try to use the attached file instead of the original one.
dhtmlxscheduler_timeline.fix.zip (7.48 KB)

This seems to work.

Thanks!

Ken

This DOES correctly mark the time and resource when I hover.

But it still DOES NOT include the unit property when I double-click. The unit property is undefined.

If I remove the onMouseMove section, everything works as expected.

Incidentally, when I include both dhtmlxscheduler_units.js and dhtmlxscheduler_timeline.js, the timeline start working as expected. But if I don’t include the units extension, the timeline view doesn’t pass the unit object.

Can you provide a code snippet, how the unit property is fetched from dbl-click, that doesn’t work correctly

To simplify a little bit, I took the sample timeline you provide and added hover code.

Drag-creating an event properly passes the section, but not double-clicking.

[code]<!doctype html>

Bar mode
<script src='../../codebase/dhtmlxscheduler.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>
	
<link rel='stylesheet' type='text/css' href='../../codebase/dhtmlxscheduler.css'>

<style type="text/css" media="screen">
	html, body{
		margin:0;
		padding:0;
		height:100%;
		overflow:hidden;
	}
	
	.highlighted_timespan {
		background-color:blue;
	}
</style>

<script type="text/javascript" charset="utf-8">
	function init() {

	scheduler.attachEvent("onEventAdded", function(event_id,event_object){

		console.log (event_object);
		alert (event_object.section_id);
		

	}); //event added

//MARK ON HOVER
var event_step;
var fix_start = function(date) { // always 2am 10am or 6pm
date = new Date(date);

        if (date.getHours() >= 18) {
           date.setHours(18);
           event_step =240;

} else if (date.getHours() >= 10) {
date.setHours(10);
event_step =480;
} else if (date.getHours() >= 2) {
date.setHours(2);
event_step =240;
} else {
date.setHours(0);
}
date.setMinutes(0);
date.setSeconds(0);
return date;
};

  var marked = null;
     var marked_date = null;
     var marked_resource = null;
     
     scheduler.attachEvent("onMouseMove", function(event_id, native_event) {

        if (event_id) {
           scheduler.unmarkTimespan(marked);
           marked_date = null;
           return false;
           }
        var date = scheduler.getActionData(native_event).date;
        var resource = scheduler.getActionData(native_event).section;
        var fixed_date = fix_start(date);

        if (+fixed_date != +marked_date || resource != marked_resource) {
        
           scheduler.unmarkTimespan(marked);

           marked_date = fixed_date;
           marked_resource = resource;
           marked = scheduler.markTimespan({
              start_date: fixed_date,
              end_date: scheduler.date.add(fixed_date, event_step, "minute"),
              css: "highlighted_timespan",
              sections: {
                    timeline: resource
              }
           });
           
        }
     });




		scheduler.locale.labels.timeline_tab = "Timeline";
		scheduler.locale.labels.section_custom="Section";
		scheduler.config.details_on_create=true;

// scheduler.config.edit_on_create=false;
scheduler.config.details_on_dblclick=true;
scheduler.config.xml_date="%Y-%m-%d %H:%i";

		//===============
		//Configuration
		//===============
		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
		//===============
		scheduler.config.lightbox.sections=[
			{name:"description", height:130, 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.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", text:"Task A-12458", section_id:1},
			{ start_date: "2009-06-30 10:00", end_date: "2009-06-30 16:00", text:"Task A-89411", section_id:1},
			{ start_date: "2009-06-30 10:00", end_date: "2009-06-30 14:00", text:"Task A-64168", section_id:1},
			{ start_date: "2009-06-30 16:00", end_date: "2009-06-30 17:00", text:"Task A-46598", section_id:1},

			{ start_date: "2009-06-30 12:00", end_date: "2009-06-30 20:00", text:"Task B-48865", section_id:2},
			{ start_date: "2009-06-30 14:00", end_date: "2009-06-30 16:00", text:"Task B-44864", section_id:2},
			{ start_date: "2009-06-30 16:30", end_date: "2009-06-30 18:00", text:"Task B-46558", section_id:2},
			{ start_date: "2009-06-30 18:30", end_date: "2009-06-30 20:00", text:"Task B-45564", section_id:2},

			{ start_date: "2009-06-30 08:00", end_date: "2009-06-30 12:00", text:"Task C-32421", section_id:3},
			{ start_date: "2009-06-30 14:30", end_date: "2009-06-30 16:45", text:"Task C-14244", section_id:3},

			{ start_date: "2009-06-30 09:20", end_date: "2009-06-30 12:20", text:"Task D-52688", section_id:4},
			{ start_date: "2009-06-30 11:40", end_date: "2009-06-30 16:30", text:"Task D-46588", section_id:4},
			{ start_date: "2009-06-30 12:00", end_date: "2009-06-30 18:00", text:"Task D-12458", section_id:4}
		],"json");
	}
</script>
 
 
[/code]

I can confirm the issue.
For Firefox, Chrome and latest IE you can fix it by changing css class of the marked area

.highlighted_timespan { background-color:blue; pointer-events: none; /*need to be added*/ }

Thanks Stanislav - that seems to fix it.