Our pure JavaScript Scheduler component


Post by markusmo »

Hi
I would like to achieve following style of an event in a programmatical way:
focus_event_with_border.PNG
focus_event_with_border.PNG (2.62 KiB) Viewed 1444 times
This command does not achieve it:
scheduler.selectEvent(event)
Is there a way so that I can achieve the effect in the picture?

Post by pmiklashevich »

Hello,

Do you mean just visual effect or focus an event?

If it's only styling issue, you can add a CSS class to your record, for example:
scheduler.eventStore.first.cls = 'my-active'; // and describe your css rules similar to our 'b-active' class
or even set styles:
scheduler.eventStore.first.style = 'outline : 2px solid blue; outline-offset : 3px;' // just for example
You can try the lines above in a dev console.

Cheers,
Pavel

Pavlo Miklashevych
Sr. Frontend Developer


Post by markusmo »

Hi
I tried this out and it works, but only as long as I always track which events are selected, which are not.
Is it possible to achieve this also with this command:
https://www.bryntum.com/docs/scheduler/#Scheduler/view/Scheduler#function-scrollResourceEventIntoView
It already highlights the event and sets a focus on selected event.

Post by pmiklashevich »

Hello,

That's a bug. The code below should focus the element
scheduler.scrollEventIntoView(scheduler.eventStore.first, {focus : true})
I've created a ticket to get it fixed: https://app.assembla.com/spaces/bryntum/tickets/8546-scrolleventintoview-scrollresourceeventintoview-should-focus-event-element/details

You can try
scheduler.scrollEventIntoView(scheduler.eventStore.first, {focus : true}).then(() => {
    scheduler.activeEvent = scheduler.eventStore.first;
});
`b-active` class will be handled in scope of the ticket as well.

Thanks,
Pavel

Pavlo Miklashevych
Sr. Frontend Developer


Post by markusmo »

Hi
Thanks :-)
Works fine :-)

Post Reply