Timeline multiple days, limiting hours and scrolling week

I’ve been working on a feature we require which is outlined in the image below. We have staff on the y axis, and the weekly view going across. But we want to be able to show 5 days - ideally starting from Monday, and each day split up into 5 hours, from 12:00 - 17:00. I’ve actually accomplished this with a bit of hacking, but the scrolling left and right is not working correctly. It only moves me one day at a time, and because I have hidden the weekends, you can’t see it, but you have to click twice over the weekends, to get past saturday and sunday. Is there a way of having the above start on a monday and have 5 days, with 5 hours per day, when you click on next, it takes you to next week, starting next monday?

Any help would be appreciated!

Current code is this:

NOTE the “x_size: 168” - 168 hours = 7 days - 2 days for weekend. Seems very hacky.

[code]function init() {

        scheduler.locale.labels.timeline_tab = "Timeline";
        scheduler.config.details_on_create = true;
        scheduler.config.details_on_dblclick = true;
        scheduler.config.xml_date = "%Y-%m-%d %H:%i";
        scheduler.config.multi_day = true;
        brief_mode = true;

        //===============
        //Configuration
        //===============
        var sections = [
            {key: 'JSM', label: "John Smith"},
            {key: 'JBL', label: "Joe Bloggs"},
            {key: 'PS', label: "Paul Simon"},
            {key: 'LB', label: "Linda Brown"}
        ];


        scheduler.ignore_timeline = function(date) {
            //non-working hours
            if (date.getHours() < 12 || date.getHours() > 16 || date.getDay() === 6 || date.getDay() === 0 )
                return true;
        };

        scheduler.createTimelineView({
            name: "timeline",
            x_unit: "hour",
            x_date: "%H:%i",
            x_step: 1,
            x_size: 168,
            x_start: 0,
            x_length: 24,
            y_unit: sections,
            y_property: "staff",
            render: "bar",
            second_scale: {
                x_unit: "day", // unit which should be used for second scale
                x_date: "%F %d %D" // date format which should be used for second scale, "July 01"
            },
            all_timed: true,
            first_hour: 12,
            last_hour: 16,
            round_position: true,
            preserve_length: true
        });

        scheduler.init('scheduler_here', new Date(), "timeline");

        var data = {pid: '<?php echo $id; ?>'};
        
        // manually the the tasks from the DB, as we need to send the project ID
        $.post('/ajax/get-tasks-ajax.php', data, function(reply) {

            scheduler.parse(reply, "json");

        });

    }[/code]

Hi,
try specifying scroll step in x_length property. Currently it is set to 24 hours, which gives you one day scroll. Following should work: x_length: 24*7
You can also skip columns(and whole days) from the scale using ‘ignore_timeline’ function
docs.dhtmlx.com/scheduler/custom_scales.html

I actually posted my code, I’m already using “ignore_timeline”, which is working correctly.

Using “x_length: 24*7” just doesn’t work at all. If I keep incrementing to the next week, these are the dates that I get:

1 May 2014 – 7 May 2014 - THIS WEEK - this works fine.
14 May 2014 – 20 May 2014 - wait, what?
2 Jun 2014 – 8 Jun 2014 - Again, incorrect
27 Jun 2014 – 3 Jul 2014 - Casually missing most of June.

It’s so irritating, as the maths is right and my logic was the same as yours, but the system simply does not like having more than 24 hours in x_length. I’m going to try redownloading the latest version and trying again. Any other ideas?

Damn, nothing changed at all; Just done a DIFF between my files and the fresh download, no change, so there is something wrong with my code, or there is a bug in dhtmlxscheduler that does not allow any more that 24 on the timeline, or wont allow more than the value of x_size.

I’ve just looked at the “/samples/06_timeline/02_lines.html” sample. this SHOULD work with no problems, as it’s a sample. If you change “x_length: 48” to “x_length: 48 * 2”.

The documentation states that x_length defines how many x_steps is scrolled on each scroll, so on this sample, x_step is 30 mins. So this should be scrolling two days at a time. What actually happens is this:

3 Jul 2009, 7 Jul 2009, 12 Jul 2009, 18 Jul 2009 etc… the gap gets bigger each time too. I don’t have a clue what is going on.

Right, I haven’t fixed this completely, as there is something weird going on. But I have attached a patch for the dhtmlxscheduler.js source file.

The patch adds a new config option called start_timeline_on_monday, by default is false.

It does a few checks when the views change, and if it’s true, rather than using the supplied steps, it simply forces the timeline to stick to the start of the week (E.g. always starts on monday), and the left and right buttons add 7 days - so long as x_length is set to one day. This doesn’t affect any other view than timeline. Example initialisation method below, I can fork the scheduler on github and refine this code if anyone is interested in seeing a weekday-only timeline view.

            //===============
            //Configuration
            //===============
            var sections = <?php echo $json; ?>;
            scheduler.config.multi_day = true;
            scheduler.config.start_timeline_on_monday = true;

            scheduler.ignore_timeline = function(date) {
                //non-working hours
                if (date.getHours() < 12 || date.getHours() > 16 || date.getDay() === 6 || date.getDay() === 0 )
                    return true;
            };

            scheduler.createTimelineView({
                name: "timeline",
                x_unit: "hour",
                x_date: "%H:%i",
                x_step: 1,
                x_size: 24*7,
                x_start: 0,
                x_length: 24,
                y_unit: sections,
                y_property: "staff",
                render: "bar",
                second_scale: {
                    x_unit: "day", // unit which should be used for second scale
                    x_date: "%F %d %D" // date format which should be used for second scale, "July 01"
                },
                all_timed: true,
                round_position: true,
                preserve_length: true,
                start_on_monday: true
            });
            
            scheduler.templates.tooltip_text = function(start,end,ev){
                return "<b>Event:</b> "+ev.text+"<br/><b>Start date:</b> " + 
                scheduler.templates.tooltip_date_format(start)+ 
                "<br/><b>End date:</b> "+scheduler.templates.tooltip_date_format(end);
            };
            
           
            scheduler.init('scheduler_here', new Date(), "timeline");[/code]

Here is the patch you can use to apply over the original file:

[code]diff --git a/system/resources/dhtmlxScheduler/sources/dhtmlxscheduler.js b/system/resources/dhtmlxScheduler/sources/dhtmlxscheduler.js
index d25ed2e..4603d02 100644
--- a/system/resources/dhtmlxScheduler/sources/dhtmlxscheduler.js
+++ b/system/resources/dhtmlxScheduler/sources/dhtmlxscheduler.js
@@ -1973,6 +1973,15 @@
 	this._init_touch_events();
 	this.set_sizes();
 	scheduler.callEvent('onSchedulerReady', []);
+        
+        // before setting the current view, lets check for start_timeline_on_monday,
+        // if its true, and we are in the timeline view, then we need to move the
+        // current date, to the previous monday (unless this is monday).
+        if (scheduler.config.start_timeline_on_monday && mode == 'timeline')
+        {
+            date = scheduler.date.week_start(date);
+        }
+            
 	this.setCurrentView(date,mode);
 };
 
@@ -2120,8 +2129,26 @@
 		scheduler._click.dhx_cal_next_button(0,-1);
 	},
 	dhx_cal_next_button:function(dummy,step){
-		scheduler.setCurrentView(scheduler.date.add( //next line changes scheduler._date , but seems it has not side-effects
-			scheduler.date[scheduler._mode+"_start"](scheduler._date),(step||1),scheduler._mode));
+                       
+            // if the schedulers config setting start_on_monday is set, then we 
+            // should only ever increase the current date by 7 days. 
+            // NOTE : only for the timeline mode.
+            if (scheduler._mode == 'timeline' && scheduler.config.start_timeline_on_monday)
+            {
+                
+                scheduler.setCurrentView(scheduler.date.add( 
+                        //next line changes scheduler._date , but seems it has not side-effects
+                        scheduler.date[scheduler._mode+"_start"](scheduler._date),(step * 7 || 7),scheduler._mode)
+                );
+               
+            }
+            else
+            {
+		scheduler.setCurrentView(scheduler.date.add( 
+                        //next line changes scheduler._date , but seems it has not side-effects
+			scheduler.date[scheduler._mode+"_start"](scheduler._date),(step||1),scheduler._mode)
+                );
+            }
 	},
 	dhx_cal_today_button:function(){
 		if (scheduler.callEvent("onBeforeTodayDisplayed", [])) {
@@ -3271,7 +3298,8 @@
 		]
 	},
 	highlight_displayed_event: true,
-	left_border: false
+	left_border: false,
+        start_timeline_on_monday: false
 };
 scheduler.templates={};
 scheduler.init_templates=function(){
@@ -5628,7 +5656,10 @@
 							this.innerHTML = '<div class="dhx_cal_navline"><div class="dhx_cal_prev_button">&nbsp;</div><div class="dhx_cal_next_button">&nbsp;</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="month_tab" style="right:76px;"></div></div><div class="dhx_cal_header"></div><div class="dhx_cal_data"></div>';
 							this.className += " dhx_cal_container";
 						}
+                                                
+                                                
 						scheduler.init(this, scheduler.config.date, scheduler.config.mode);
+                                                
 						if (config.data)
 							scheduler.parse(config.data);
 

Hi,
I think this can be done without modifying the sources.
Step 1 - create timeline that shows 5 days and scrolls by 7 days:[code]scheduler.createTimelineView({
name: “timeline”,
x_unit: “hour”,
x_date: “%H:%i”,
x_step: 1,
x_size: 24*5,

x_length: 24*7,
y_unit:	sections,
y_property:	"section_id"

});[/code]
This particular config seems working correctly, if you use something different - please post the code.
Step 2 - make the timeline start on a first day of week:scheduler.date.timeline_start = function(date){ return scheduler.date.week_start(date); };
Function must be defined after .createTimelineView call.
The whole code:

[code]scheduler.createTimelineView({
name: “timeline”,
x_unit: “hour”,
x_date: “%H:%i”,
x_step: 1,
x_size: 24*5,

x_length: 24*7,
y_unit:	sections,
y_property:	"section_id"

});
scheduler.date.timeline_start = function(date){
return scheduler.date.week_start(date);
};[/code]

Thanks, I’ll take a look at this and get back to you!

This undocumented config worked for me:

scheduler.date.timeline_start = function(date){ return scheduler.date.week_start(date); };

Hey brighterdean

How did you get that dotted red line to show? Is that the current time? If so, that’s something I need to do

Regards

mark

Just include this:

thanks for quick reply. I included it, but nothing changed. Is there a setting to turn it on?

Check this page: docs.dhtmlx.com/scheduler/limits.html. It tells you how to do it on that page.

Fantastic! Thanks a lot Brighterdean