Scheduler display events order
Scheduler display events order
I have events on my scheduler and it displays like this

Here is the events data
I want to arrange the event like this
Line 1: Working Time 1, Break, Working Time 2
Line 2: Clock in, Clock out
Line 3: Meeting
Line 4: Annual Leave

Here is the events data
Code: Select all
this.events = [
{ id: 1, resourceId: 1, name: 'Working Time 1', ... },
{ id: 2, resourceId: 1, name: 'Break', ... },
{ id: 3, resourceId: 1, name: 'Working Time 2', ... },
{ id: 4, resourceId: 1, name: 'Clock in', ... },
{ id: 5, resourceId: 1, name: 'Clock out', ... },
{ id: 6, resourceId: 1, name: 'Meeting', ... },
{ id: 7, resourceId: 1, name: 'Annual Leave', ... },
];
Line 1: Working Time 1, Break, Working Time 2
Line 2: Clock in, Clock out
Line 3: Meeting
Line 4: Annual Leave
- pmiklashevich
- Core Developer
- Posts: 3427
- Joined: Fri Apr 01, 2016 11:08 am
Re: Scheduler display events order
Maybe approach we use in Custom Event Styling demo will fit your needs? Please check out sources of https://bryntum.com/examples/scheduler/customeventstyling/
Events are positioned using sass. managedEventSizing is required to be set to `false` in this case.
examples/customeventstyling/app.js
examples/customeventstyling/resources/app.scss
Let me know please if it works for you.
Basic sorting of events can be done using horizontalEventSorterFn.
Cheers,
Pavel
Events are positioned using sass. managedEventSizing is required to be set to `false` in this case.
examples/customeventstyling/app.js
Code: Select all
let scheduler = new Scheduler({
managedEventSizing : false,
...
Code: Select all
.b-sch-event-wrap {
height : .5em;
}
.b-milestone-wrap {
top : .6em;
&.b-sch-event-wrap {
.b-sch-event.b-milestone {
font-size : 36%;
label {
padding-left : 0.9em;
}
}
}
}
....
Basic sorting of events can be done using horizontalEventSorterFn.
Cheers,
Pavel
Pavel Miklashevich - Core Developer
Re: Scheduler display events order
I use SchedulerComponent template variable and cannot find property 'managedEventSizing' from both 'this.scheduler' and 'this.scheduler.schedulerEngine'. Is there a way to use 'managedEventSizing' when using the template variable.
app.component.html
app.component.ts
app.component.html
Code: Select all
<bry-scheduler #scheduler></bry-scheduler>
Code: Select all
export class AppComponent extends OnInit, AfterViewInit {
@ViewChild('scheduler') scheduler: SchedulerComponent;
ngOnInit() {
// this.scheduler.managedEventSizing = false; // no mangedEventSizing property
}
ngAfterViewInit() {
// this.scheduler.schedulerEngine.managedEventSizing = false; // no managedEventSizing propert
}
}
- pmiklashevich
- Core Developer
- Posts: 3427
- Joined: Fri Apr 01, 2016 11:08 am
Re: Scheduler display events order
We do not expose every property/feature to our wrapper. Only the most popular. All supported properties you can find in our guide: https://www.bryntum.com/docs/scheduler/#guides/integration/angular.md (see "Supported properties" chapter). "managedEventSizing" is not in the list, indeed. Please see "Adding properties which are not supported by default" chapter which explains how to add properties to the wrapper. Feel free to change the wrapper the way you need. Basically what you need is to change examples/angular/_shared/projects/bryntum-angular-shared/src/lib/scheduler.component.ts:
and run "npm run build" in examples/angular/_shared. Then you can use "managedEventSizing" in you app.
Code: Select all
private configs : string[] = [
'managedEventSizing',
...
]
@Input() managedEventSizing: boolean;
Pavel Miklashevich - Core Developer
Re: Scheduler display events order
I think I will change the method from arrange events using CSS to use resource to separate event lines.
Is it possible to merge resource column like we did in spreadsheet?

Code: Select all
this.resources = [
{ id: 1, name: 'Alex', type: 'Working' },
{ id: 2, name: 'Alex', type: 'Clock' },
{ id: 3, name: 'Alex', type: 'Meeting' },
{ id: 4, name: 'Liza', type: 'Working' },
{ id: 5, name: 'Liza', type: 'Clock' },
{ id: 6, name: 'Mike', type: 'Working' },
{ id: 7, name: 'Mike', type: 'Clock' },
{ id: 8, name: 'Mike', type: 'Meeting' },
{ id: 9, name: 'Sam', type: 'Working' },
{ id: 10, name: 'Same', type: 'Clock' }
];
this.events = [
{ id: 1, resourceId: 1, name: 'Working 1', ... },
{ id: 2, resourceId: 1, name: 'Break', ... },
{ id: 3, resourceId: 1, name: 'Working 2', ... },
{ id: 4, resourceId: 2, name: 'Clock in', ... },
{ id: 5, resourceId: 2, name: 'Clock out', ... },
{ id: 6, resourceId: 3, name: 'Meeting', ... },
];

- pmiklashevich
- Core Developer
- Posts: 3427
- Joined: Fri Apr 01, 2016 11:08 am
Re: Scheduler display events order
Hello,
I've created a feature request to implement such a "rowspan" feature. To be honest we already tried to do that some time ago, but ended up with row recycling problem. So that's something we have to deal with first. Here is the ticket to track the progress: https://app.assembla.com/spaces/bryntum/tickets/9121-add-support-for-rowspan/details
Meanwhile I can recommend you to populate resources with different IDs for working/clock/meeting and then group them by "name". Please see Group feature docs for reference. https://www.bryntum.com/examples/scheduler/grouping/
Best,
Pavel
I've created a feature request to implement such a "rowspan" feature. To be honest we already tried to do that some time ago, but ended up with row recycling problem. So that's something we have to deal with first. Here is the ticket to track the progress: https://app.assembla.com/spaces/bryntum/tickets/9121-add-support-for-rowspan/details
Meanwhile I can recommend you to populate resources with different IDs for working/clock/meeting and then group them by "name". Please see Group feature docs for reference. https://www.bryntum.com/examples/scheduler/grouping/
Best,
Pavel
Pavel Miklashevich - Core Developer
Re: Scheduler display events order
Thanks for creating a feature request for me, pmiklashevich.
I changed my solution to use CSS to align the events.

Are there any solutions to make the event container element affected by the event class?
I changed my solution to use CSS to align the events.
- Set scheduler event layout to 'none' to make all events display on the first line
Code: Select all
this.scheduler.eventLayout = 'none';
- Create CSS for each line of events using 'top' attribute
Code: Select all
.event-line-1{ top: 0px; } .event-line-2 { top: 50px; } .event-line-3 { top: 100px; } .event-line-4 { top: 150px; }
- Set event class with the created CSS classes
Code: Select all
this.events = [ { id: 1, resourceId: 1, name: 'Working 1', cls: 'event-line-1', ... }, { id: 2, resourceId: 1, name: 'Break', cls: 'event-line-1', ... }, { id: 3, resourceId: 1, name: 'Working 2', cls: 'event-line-1', ... }, { id: 4, resourceId: 1, name: 'Clock in', cls: 'event-line-2', ... }, { id: 5, resourceId: 1, name: 'Clock out', cls: 'event-line-2', ... }, { id: 6, resourceId: 1, name: 'Meeting', cls: 'event-line-3', ... }, ];

Are there any solutions to make the event container element affected by the event class?
Re: Scheduler display events order
You can use 'wrapperCls' in the eventRenderer method (instead of 'cls') to add a CSS class to the wrapper element. It will be public from the next release.
Tired of debugging javascript errors in web applications? Try our new error logging service RootCause, or read more on the Sencha blog
@bryntum
Facebook
API documentation
@bryntum
API documentation
Re: Scheduler display events order
Thanks mats.
Here's my code to this solution.
Here's my code to this solution.
Code: Select all
this.eventRenderer = (data) => {
let wrapperCls: DOMTokenList = data.tplData.wrapperCls;
let event: any = data.eventRecord.data;
wrapperCls.add('event-line-' + event.eventLine);
return event.name;
};