Timeline Monthly

Scheduler Javascript
#1

I see that you have a week_lines timeline but not one for monthly. How hard would it be to get a monthly timeline view?

thanks in advance

#2

The timeline scale is highly customizable, you can configure it to show month of years ( it will look the same , just the x-scale will show different units )

docs.dhtmlx.com/doku.php?id=dhtm … r:timeline

#3

I cannot get the timeline next and previous to do monthly time interval. I want to see month worth of data next to the resource.

I really just want the month view with the resources added to the side.

thanks in advance

#4

…
x_unit:“month”,
x_step:1
…

will show the whole month, and will provide correct prev-next button behavior

It may look not so good, because of single record in the scale, but oncoming Scheduler 3.5 will allow you have double scale with month|day

#5

I have this in my Month View,

	 	scheduler.createTimelineView({
			   name: 'timeline',
			   x_unit:   "day",//to appear the days of the month
			   first_hour:9, // to show events from 10 AM to
			   last_hour:24,//11 PM 
			   x_date:   "%j", //number of the day
			   x_step:   1, //to show the all days
			   //x_size: 31, // number of days in month( max)
			   x_start: 0, // zero offset from a current calendar date
			   x_length: 31, //the number of days that goes back and forward on prev and next button
			   y_unit: sections,
			   y_property: "section_id",
			   render:"bar",
			   event_dy: "full"
			});
			
			scheduler.attachEvent("onBeforeViewChange", function(old_mode,old_date,mode,date){
			   var year = date.getFullYear();
			   var month= (date.getMonth() + 1);
			   var d = new Date(year, month, 0);
			   var days = d.getDate();//numbers of day in month
			   scheduler.matrix['timeline'].x_size = days;
			   scheduler.matrix['timeline'].x_length = days;
			   return true;
			});
			scheduler.date.timeline_start = scheduler.date.month_start;

The problem is, when i click prev, it skips months with less than 31 days, but on next it is seen!!?? What is wrong?

#6

As quick solution, change code in onBeforeViewChange handler like next

[code]scheduler.attachEvent(“onBeforeViewChange”, function(old_mode,old_date,mode,date){
var year = date.getFullYear();
var month= (date.getMonth() + 1);
var d = new Date(year, month, 0);
var days = d.getDate();//numbers of day in month

date.setDate(1);
if (old_date){
    var was = old_date.getMonth();
    var now = date.getMonth();
    if (was - now > 1){
        date.setMonth(date.getMonth()+1);
    }
}

scheduler.matrix['timeline'].x_size = days;
scheduler.matrix['timeline'].x_length = days;
return true;

});[/code]

#7

Hi,

Many thanks for your reply. We’ve tried this and it now shows months with 30 days + 1 day from next month.

ie; for Jun 14 will show 30 days plus 1 day from Jul 14.

Any ideas or updates? Please help.

#8

How do we set the below config parameters on run time.
x_size: blahblah, // number of days in month(max)
x_length: blahblah

I mean when hit the pre/forward button based on the month it should set the days on the current view.

Any help please??

#9

Hello v180,

i had the same problem and solved it with this:

[code]scheduler.attachEvent(“onBeforeViewChange”, function(old_mode,old_date,mode,date){
var year = date.getFullYear();
var month = (date.getMonth() + 1);

date.setDate(1);
if (old_date){
    var was = old_date.getMonth();
    var now = date.getMonth();
    if (was - now > 1){
        date.setMonth(date.getMonth() + 1);
        month = (date.getMonth() + 1);
    }
}
var d = new Date(year, month, 0);
var days = d.getDate(); //numbers of day in month
scheduler.matrix['timeline'].x_size = days;
scheduler.matrix['timeline'].x_length = days;
return true;

});[/code]

Tested with IE9 and Firefox 30.