Third column

Scheduler Javascript
#1

How to make this 3rd column independent from 2?
I need the 1 & 2 columns as AM(00.00 - 12.00) PM(12-00 - 00-00), and 3rd leave blank…
Help me plz with such a solution…
I guess we need to provide some changes in dhtmlxscheduler_timeline.js file?

I have the following settings:

scheduler.createTimelineView({
name: ‘timeline’,
section_autoheight: false,
x_unit: ‘hour’,
x_date: ‘%A’,
x_step: 8, // change to 12 - 2 columns AM/PM
x_size: 62,
x_length: 62,
folder_dy:20,
dy:30,
dx: 150, // the width of the column with the sections’ names
y_unit:[
{key:“teams”,
label:“Team A”, open: true, children:[
{key:“t1”, label:“Kate Moss”},
{key:“t2”, label:“Dian Fossey”},
{key:“t3”, label:“James Smith”}
]},
{label:“Team B”, children:[
{key:“t4”, label:“David Miller”},
{key:“t5”, label:“George Lucas”},
{key:“t6”, label:“Alex White”}
]}
],
y_property: ‘section_id’,
render: ‘tree’,
round_position: true,
second_scale: {
x_unit: ‘day’,
x_date: “%j”, // “%j” - // number of the day
x_step: 1, //to show the all days
x_size: 62, // number of days in month( max)
x_start: 0, // zero offset from a current calendar date
x_length: 62 //the number of days that goes back and forward on prev and next button
}
});

#2

Hi,
could you please attach a screenshot so I can better understand your idea.

#3

841×492 73.4 KB

The idea is for each user of a team there are 3 columns: AM/PM/Work.

#4

Any ideas?

#5

If you plan to use scheduler in ReadOnly mode, you can create a timeline with necessary structure ( 3 section per user ) and after event loading ( onEventLoading event ) assign section id based on event properties ( events from AM(00.00 - 12.00) will have section = 1 for example, and PM(12-00 - 00-00) will have section 2 )

As result events will be rendered on different lines

#6

Hi,
and could you add 3 section for each player?

[code]{key:“team_a”, label:“Team A”, open: true, children:[
{key:“t1_1”, label:“Kate Moss”},
{key:“t1_2”, label:"(pm)"},
{key:“t1_1”, label:"(work)"},

{key:“t2”, label:“Dian Fossey”},
…
{key:“t3”, label:“James Smith”} ,
…
]},[/code]
or you can use next level of the tree:

{key:"team_a", label:"Team A", open: true, children:[ {key:"t1", label:"Kate Moss", open: true, children:[ {key:"t1_1", label:"(am)"}, {key:"t1_2", label:"(pm)"}, {key:"t1_1", label:"(work)"} ]}, ]},

#7

Thanks! But how to make this 3rd column(Work) independent from those 2?
Because the settings of the event changed…
I need the 1 & 2 columns as AM(00.00 - 12.00) PM(12-00 - 00-00), and 3rd (work) leave blank…

And in this case there is no need to use second scale(‘hour’) at the top, as it is now at the left side under the each player.
code example jsfiddle.net/inbev77/aCbWF/15/

#8

Can you provide an example using onEventLoading event and section 2?

jsfiddle.net/inbev77/aCbWF/17/

#9

In your example, be sure to build a correct structure of sections without repeated IDs:

sections = [ {key:"team_a", label:"Team A", open: true, children:[ {key:"t1", label:"Kate Moss", open: true, children:[ {key:"t1_1", label:"AM"}, {key:"t1_2", label:"PM"}, {key:"t1_3", label:"Work"} ]}, {key:"t2", label:"Dian Fossey", open: true, children: [ {key:"t2_1", label:"AM"}, {key:"t2_2", label:"PM"}, {key:"t2_3", label:"Work"} ]}, {key:"t3", label:"James Smith", open: true, children: [ {key:"t3_1", label:"AM"}, {key:"t3_2", label:"PM"}, {key:"t3_3", label:"Work"} ]}, ]}, {key:"team_b", label:"Team B", open: true, children:[ {key:"t4", label:"David Miller", open: true, children:[ {key:"t4_1", label:"AM"}, {key:"t4_2", label:"PM"}, {key:"t4_3", label:"Work"} ]}, {key:"t5", label:"George Lucas", open: true, children:[ {key:"t5_1", label:"AM"}, {key:"t5_2", label:"PM"}, {key:"t5_3", label:"Work"} ]}, {key:"t6", label:"Alex White", open: true, children:[ {key:"t6_1", label:"AM"}, {key:"t6_2", label:"PM"}, {key:"t6_3", label:"Work"} ]}, ]} ];

#10

To add 3rd custom column to each day in the timeline view will require quite deep modification of the source code. Try to do this by adding sections. This is an example of “onEventLoading” method:

scheduler.attachEvent("onEventLoading", function(ev){ if(ev.start_date.getHours() < 13) ev.section_id += "_1"; else ev.section_id += "_2"; return true; });

#11

Can you clarify this function? How it works… i try it & I can see the same.

#12

For each user (for example, corresponding a section with id=‘team1_user1’) you have 3 rows:

  • AM (id=‘team1_user1_type1’);
  • PM (id=‘team1_user1_type2’);
  • Work (etc.).
    When you load an event from the source (docs.dhtmlx.com/scheduler/loading_data.html) for each of loaded events a method defined in “onEventLoading” is called. In this method you can check, what section (AM, PM or Work) should display the event for this user (‘team1_user1’). And set the section id as the property of the loaded event (ev.section_id = ‘team1_user1_type2’:wink:
#13

Many thanks!

Drop me a hint plz how to load all this staff using ruby on rails…
only events I already provided, but have some difficulties in nesting using teams and users?!