Scheduler display events order

[piyanonm]

I have events on my scheduler and it displays like this


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', ... },
];

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

[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

Code: Select all

let scheduler = new Scheduler({
     managedEventSizing : false,
     ...

examples/customeventstyling/resources/app.scss

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;
            }
        }
    }
}
....

Let me know please if it works for you.

Basic sorting of events can be done using horizontalEventSorterFn.

Cheers,
Pavel

[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

Code: Select all

<bry-scheduler #scheduler></bry-scheduler>

app.component.ts

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]

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:

Code: Select all

private configs : string[] = [
    'managedEventSizing',
    ...
]

@Input() managedEventSizing: boolean;

and run "npm run build" in examples/angular/_shared. Then you can use "managedEventSizing" in you app.

[piyanonm]

I think I will change the method from arrange events using CSS to use resource to separate event lines.

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', ... },
];

Is it possible to merge resource column like we did in spreadsheet?

[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

[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

   Code: Select all

   this.scheduler.eventLayout = 'none';

2. 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;
   }
   

3. 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', ... },
   ];
   

With this, the events are arranged as I wanted. But the event container element is not affected by the event class like this.



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

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

[piyanonm]

Thanks mats.

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;
};