Scheduler display events order

Show cool things you have done with our products
Post Reply
User avatar
piyanonm
Posts: 13
Joined: Fri Aug 16, 2019 4:29 am

Scheduler display events order

Post by piyanonm » Wed Aug 21, 2019 12:55 pm

I have events on my scheduler and it displays like this
Image

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

User avatar
pmiklashevich
Core Developer
Core Developer
Posts: 2254
Joined: Fri Apr 01, 2016 11:08 am

Re: Scheduler display events order

Post by pmiklashevich » Wed Aug 21, 2019 4:09 pm

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
Pavel Miklashevich - Core Developer

User avatar
piyanonm
Posts: 13
Joined: Fri Aug 16, 2019 4:29 am

Re: Scheduler display events order

Post by piyanonm » Thu Aug 22, 2019 6:59 am

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

User avatar
pmiklashevich
Core Developer
Core Developer
Posts: 2254
Joined: Fri Apr 01, 2016 11:08 am

Re: Scheduler display events order

Post by pmiklashevich » Thu Aug 22, 2019 10:13 am

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.
Pavel Miklashevich - Core Developer

User avatar
piyanonm
Posts: 13
Joined: Fri Aug 16, 2019 4:29 am

Re: Scheduler display events order

Post by piyanonm » Mon Aug 26, 2019 11:20 am

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?

Image

User avatar
pmiklashevich
Core Developer
Core Developer
Posts: 2254
Joined: Fri Apr 01, 2016 11:08 am

Re: Scheduler display events order

Post by pmiklashevich » Tue Aug 27, 2019 11:05 am

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
Pavel Miklashevich - Core Developer

User avatar
piyanonm
Posts: 13
Joined: Fri Aug 16, 2019 4:29 am

Re: Scheduler display events order

Post by piyanonm » Wed Aug 28, 2019 6:17 am

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.

Image

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

User avatar
mats
Core Developer
Core Developer
Posts: 14593
Joined: Sat Dec 19, 2009 11:41 pm
Location: Sweden
Contact:

Re: Scheduler display events order

Post by mats » Wed Aug 28, 2019 11:58 am

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

User avatar
piyanonm
Posts: 13
Joined: Fri Aug 16, 2019 4:29 am

Re: Scheduler display events order

Post by piyanonm » Fri Aug 30, 2019 5:43 am

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

Post Reply