Page 1 of 1

Scheduler display events order

Posted: Wed Aug 21, 2019 12:55 pm
by piyanonm
I have events on my scheduler and it displays like this
Image

Here is the events data
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', ... },
];
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

Re: Scheduler display events order

Posted: Wed Aug 21, 2019 4:09 pm
by pmiklashevich
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
let scheduler = new Scheduler({
     managedEventSizing : false,
     ...
examples/customeventstyling/resources/app.scss
.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;
            }
        }
    }
}
....
Let me know please if it works for you.

Basic sorting of events can be done using horizontalEventSorterFn.

Cheers,
Pavel

Re: Scheduler display events order

Posted: Thu Aug 22, 2019 6:59 am
by piyanonm
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
<bry-scheduler #scheduler></bry-scheduler>
app.component.ts
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
    }
    
}

Re: Scheduler display events order

Posted: Thu Aug 22, 2019 10:13 am
by pmiklashevich
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:
private configs : string[] = [
    'managedEventSizing',
    ...
]

@Input() managedEventSizing: boolean;
and run "npm run build" in examples/angular/_shared. Then you can use "managedEventSizing" in you app.

Re: Scheduler display events order

Posted: Mon Aug 26, 2019 11:20 am
by piyanonm
I think I will change the method from arrange events using CSS to use resource to separate event lines.
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', ... },
];
Is it possible to merge resource column like we did in spreadsheet?

Image

Re: Scheduler display events order

Posted: Tue Aug 27, 2019 11:05 am
by pmiklashevich
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

Re: Scheduler display events order

Posted: Wed Aug 28, 2019 6:17 am
by piyanonm
Thanks for creating a feature request for me, pmiklashevich.

I changed my solution to use CSS to align the events.
  1. Set scheduler event layout to 'none' to make all events display on the first line
    this.scheduler.eventLayout = 'none';
  2. Create CSS for each line of events using 'top' attribute
    .event-line-1{
    	top: 0px;
    }
    .event-line-2 {
    	top: 50px;
    }
    .event-line-3 {
    	top: 100px;
    }
    .event-line-4 {
    	top: 150px;
    }
    
  3. Set event class with the created CSS classes
    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', ... },
    ];
    
With this, the events are arranged as I wanted. But the event container element is not affected by the event class like this.

Image

Are there any solutions to make the event container element affected by the event class?

Re: Scheduler display events order

Posted: Wed Aug 28, 2019 11:58 am
by mats
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.

Re: Scheduler display events order

Posted: Fri Aug 30, 2019 5:43 am
by piyanonm
Thanks mats.

Here's my code to this solution.
this.eventRenderer = (data) => {
	let wrapperCls: DOMTokenList = data.tplData.wrapperCls;
	let event: any = data.eventRecord.data;
	wrapperCls.add('event-line-' + event.eventLine);
	return event.name;
};

Re: Scheduler display events order

Posted: Fri Nov 12, 2021 12:17 pm
by johan.isaksson

Scheduler Pro now allows you to arrange events in groups in a manner that should meet your requirement, on display in https://bryntum.com/examples/scheduler-pro/custom-layouts/