create view with some types of events using treetimeline

Scheduler Javascript
#1

Hello! I need to create view with some types of events using scheduler and treetimeline plugin.
Requirement - events with the same type must be situated in one timeline for one unit.
For example: two units (John and Bill) with datasources :

var johnSrc = [
    { start_date: "2009-06-30 09:00", end_date: "2009-06-30 11:00", text:"event1", section_id:20},
    { start_date: "2009-06-30 11:30", end_date: "2009-06-30 13:00", text:"event2", section_id:20},
    { start_date: "2009-06-30 14:00", end_date: "2009-06-30 16:00", text:"event1", section_id:20},
    { start_date: "2009-06-30 15:00", end_date: "2009-06-30 17:00", text:"event2", section_id:20}
];

var billSrc = [
    { start_date: "2009-06-30 09:00", end_date: "2009-06-30 11:00", text:"event1", section_id:20},
    { start_date: "2009-06-30 11:30", end_date: "2009-06-30 13:00", text:"event2", section_id:20},
    { start_date: "2009-06-30 14:00", end_date: "2009-06-30 16:00", text:"event1", section_id:20},
    { start_date: "2009-06-30 15:00", end_date: "2009-06-30 17:00", text:"event2", section_id:20}
];

I had experiments and understand that relative position events of different types depends on stacking start_time and end_time events.

I know that possible create one section for events with first type, another one - for events with second type and so on with common “over-section” (“First unit”).
But I want to do it when one section = one unit, and events with different types have different css classes.

Is it possible?

#2

Hello,

I am sorry i didn’t quite get it.
By default all events which belong to same section (for example section_id=1) are displayed there. It doesn’t matter what their other properties are (e.g. event_type).
How do you want to change that?

Can you please create a picture of how your ideal view should look like?

Best regards,
Ilya

#3

By the way, maybe you’re right. Is there exists some API and scheduler’s event which can change css of some events?

want.png746×215 2.76 KB


now.png754×216 1.55 KB

#4

Hello,

Not exactly sure what has changed in your pictures but yes, you can assign different CSS classes to events (based on their properties, current mode and so on). Check out the following sample. Here i am adding them ‘green’ or ‘red’ CSS classes based on their property ‘type’.

[code]

For demo purpose only :: &1 
<script src='../../codebase/dhtmlxscheduler.js' type="text/javascript" charset="utf-8"></script>
<script src='../../codebase/ext/dhtmlxscheduler_timeline.js' type="text/javascript" charset="utf-8"></script>
<script src='../../codebase/ext/dhtmlxscheduler_treetimeline.js' type="text/javascript" charset="utf-8"></script>

<link rel='stylesheet' type='text/css' href='../../codebase/dhtmlxscheduler.css'>
<link rel="stylesheet" href="../../codebase/ext/dhtmlxscheduler_ext.css" type="text/css" media="screen" title="no title" charset="utf-8">
html, body{ margin:0px; padding:0px; height:100%; overflow:hidden; } .one_line{ white-space:nowrap; overflow:hidden; padding-top:5px; padding-left:5px; text-align:left !important; } .green{ background-color: green; } .red{ background-color: red; }
 
 
[/code]

Hope this helps.

Best regards,
Ilya

event_class.PNG1153×320 11.7 KB

#5

You were right about css classes, thanks! My question is closed.