Monthly Timeline

Hi
I’m struggling to make a monthly timeline.
The main issue is x_size and x_length.
I create a timeline in init like
scheduler.createTimelineView({
name: ‘timelilne’,
x_unit: “day”,//to appear the days of the month
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, // i think that is to start on the first day
x_length: 31, //the number of days that goes back and forward on prev and next button
folder_dy:20,//height of folder for timeline tree view
second_scale:{
x_unit: “month”, // month on second scale
x_date: “%F” // name of month
},
section_autoheight: false,//fixed height
dy: 50,
dx:400,
event_dy:‘full’,//occupy all cell
y_unit: JSON.parse(usersPorGrupo),
y_property: “et_guid”,
render: “tree”,
round_position: true
});
scheduler.date[‘timeline_start’] = scheduler.date.month_start;//start on day 1 of each month

But when click on next button or previous button, i get allways 31 days (correct because x_size is 31) .
In the months with 30 or 28/29 days, i get the 30 days of one month (September for example) and 1 day from the next month(October).
I tried change the x_size and x_length on ‘onBeforeViewChange’ to get the numbers of days for month like:
scheduler.attachEvent(“onBeforeViewChange”, function(old_mode,old_date,mode,date){
var year = scheduler.date.getFullYear();
var month=(scheduler.date.getMonth()+1);
var d = new Date(year, month, 0);
var days = d.getDate(); //numbers of day in month
scheduler.matrix[nome].x_size = days;
scheduler.matrix[nome].x_length =days;
return true;
});
Also tried to change it when i press the prev and next button and almost get it working.

$(“.dhx_cal_next_button”).click(function() {
var year = scheduler._min_date.getFullYear();
var month=(scheduler._min_date.getMonth()+1);
var d = new Date(year, month, 0);
var days = d.getDate();
scheduler.matrix.timeline.x_size = days;
scheduler.matrix.timeline.x_length = days;
scheduler.setCurrentView();
});

On forward works fine, its shows the correct number of days in month.
The back button only shows me the month with 31 days.
What im expecting is to show the days from 1 to 28/29(Feb) or 30 or 31 days depending of the month that we are watching. Example for Feb bellow



What i’m trying to achieve its possible?

Thank you

Hi,
try this code[code]scheduler.createTimelineView({
name: ‘timeline’,
x_unit: “day”,//to appear the days of the month
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;[/code]

1 Like

Tried this, works perfect. What i am trying to achieve is, to have a team’s meeting schedule displayed.

  1. The listing is Today, Week wise and month wise… all Timeline view. No need of edit, delete or any user interactions here!. Plus i want the whole 24 hours to be shown in the initial day view.Can this be achieved??
  2. Can we assign a different color to each category’s events.

Plz help!

Hi,

  1. you can define three timelinew with different scale configs. Tabs can be placed as a segmented button as described here
    docs.dhtmlx.com/scheduler/schedu … ositioning
    And this config should block any user changes in calendar docs.dhtmlx.com/scheduler/api__s … onfig.html

  2. check this setting docs.dhtmlx.com/scheduler/api__s … plate.html

Interesting, another q is, i am printing my team’s schedule in Timeline view(day, week & month all in timeline view). And would want to assign a color the events against each section or person. So the color will help me to identify a person’s events all the time ( in any other view).Is it possible??

Nearly there, i have all the three (month, Week & Day) in Timeline View now!, just need to change the colors of events

In the day, week, month views i have…in day view i have fixed the event time from 8:00 to 22:00 hours. But in Week & Month views it is 24 hours… can we display only 8 to 22 here as well?

Ok i fixed this too… some issues in Internet Explorer remains… Month View is ok in IE, but when i go to Week or Day view… no event is displayed…!!

Ok fellas, i got it all working now… it is a wonderful project by DHTMLX Team, Hats off to you guys!! See what i achieved!






:smiley:
It’s test data, json object from our central development server…
…about to replace to real data & moving to live server!!

Thanks again!!

Hi!
I’m trying do to exactly the same thing, is-it possible for you to post your example here?

Hi all,

i use the code

[code] scheduler.createTimelineView({
name: ‘timeline’,
x_unit: “day”,//to appear the days of the month
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;[/code]

from the posts before and it works fine if i press the next Button but if i press the back button you can iterate only through all month with 31 days. So has anyone a idea to step backward to each month?
Still i have no idea :cry:
Is there any function to catch the click on Prev and Next Button?
Thanks
Björn

This should help you:

[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]

1 Like

Thanks, this helped me.

Hi @iferreira

Will you be able to post how you are passing this json data.
I am facing issues while parsing the data dynamically.
Getting undefined everywhere:

@Loewi this won’t work, as a move forward in the calendar from Dec to Jan is a move from month 12 to 0, so was - now will be > 1 and this will incorrectly set the month forward an additional month. I used the following (in Typescript):

this.bookingScheduler.attachEvent('onBeforeViewChange', (old_mode: string, old_date: Date, mode: string, date: Date) => {
    const previousMonthSelected: number = old_date.getMonth();
    const currentMonthSelected: number = date.getMonth();
    const isMoveForwardFromDecToJan: boolean = previousMonthSelected === 11 && currentMonthSelected === 0;

    // Going back in month view steps the date back by the number of days in the month that the user is moving back from
    // If the month that the user is moving back from has more days than the month before it, this can skip a month - ensure month is changed correctly
    if ((currentMonthSelected < previousMonthSelected) && !isMoveForwardFromDecToJan) {
            date.setDate(1); // If a month is skipped, the selected date will not be the 1st of the month - reset it to ensure correct setting of the month
            date.setMonth(previousMonthSelected - 1);
    }

    const lastDayOfMonth = new Date(date.getFullYear(), date.getMonth() + 1, 0);
    const numDaysInMonth = lastDayOfMonth.getDate();
    this.bookingScheduler.matrix.timeline.x_size = numDaysInMonth;
    this.bookingScheduler.matrix.timeline.x_length = numDaysInMonth;
    this.bookingScheduler.date['timeline_start'] = this.bookingScheduler.date.month_start;
}
1 Like