Show cool things you have done with our products


Post 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

Post 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

Pavlo Miklashevych
Sr. Frontend Developer


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

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

Pavlo Miklashevych
Sr. Frontend Developer


Post 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

Post 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

Pavlo Miklashevych
Sr. Frontend Developer


Post 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?

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

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

Post 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/

Best regards,
Johan Isaksson

Post Reply