Our powerful JS Calendar component


Post by mromey »

We are using the Bryntum Calender component for a custom timecard app for our employees. Thus far the functionality is great and using the component has saved us so much time. We have a few outstanding feature request from our users and I was hoping to ask the forum for some guidance on these issues.

Users are asking for the ability to multi select events to run custom action menu operations on the selected items. For example they want to select a days worth of events and delete them with fewer clicks. Is this possible?

Related to the last question they also want to select multiple events and slice an 8 hr event with multiple overlapping break or meal events. It would be nice if a built in operation to slice events existed to help mitigate overlapping events. If not I guess we will add a custom menu item to perform this operation to our data in the database then refresh the component. However it would be restricted to a single selection of our large 8hr event.


Post by mats »

It's supported: https://www.bryntum.com/docs/calendar/api/Calendar/view/Calendar#config-multiEventSelect

Related to the last question they also want to select multiple events and slice an 8 hr event with multiple overlapping break or meal events. It would be nice if a built in operation to slice events existed to help mitigate overlapping events. If not I guess we will add a custom menu item to perform this operation to our data in the database then refresh the component. However it would be restricted to a single selection of our large 8hr event.

Can you please elaborate a bit on this?


Post by Animal »

You can use https://www.bryntum.com/docs/calendar/api/Calendar/view/Calendar#config-multiEventSelect:

multidelete.gif
multidelete.gif (1.29 MiB) Viewed 601 times

I do not understand "they also want to select multiple events and slice an 8 hr event with multiple overlapping break or meal events"


Post by Animal »

This would be a help: https://github.com/bryntum/support/issues/5573

I’ll see if I can fit it into the next release. There’s a lot on.


Post by mromey »

Thank for the confirmation on mult select. Regarding slicing. Let me elaborate. We are trying to find a way for users to log breaks with less touch to the calendar. I see a few different approaches to solving our issue.

  1. Users add what ever events they need for work time and or break time. We add an action menu item to operate on multiple selected events. Any overlapping meal events would slice away work time.

  2. We add an action menu item that requires the selection of a single event where a user would like to inject a meal break. The tool takes the supplied event and injects a meal break event in the middle which in turn divides up the original select event into two separate work time events that bookend the new break event.

Im open to other solutions. The goals is to have bi-weekly (pay period) events with no overlapping events filled with proper meal breaks that align to local work policies.


Post by mats »

Both would be feasible by adding an extra menu item and processing the events as you need. Using Event#split might come in handy.

Docs: https://bryntum.com/docs/calendar/api/Scheduler/model/TimeSpan#function-split

Demonstrated at https://bryntum.com/examples/scheduler/eventmenu/


Post by mromey »

By chance do any of the demos use the multi select argument? We tried wiring it up and it did not seem to work. A demo or a code pen example would help a bunch.


Post by Animal »

Its as simple as this:

You see the source panel at the right. multiEventSelect : true. And in the Calendar implementation of the menu's handler (Called toggleAllDay in this example), process this.selectedEvents (this will be the Calendar if you configure the method into the calendar like the examples do)

Then CMD+click (or CTRL+click if on Windows) multiple events:

Screenshot 2022-11-24 at 18.37.07.png
Screenshot 2022-11-24 at 18.37.07.png (439.32 KiB) Viewed 558 times

You can see the selected events looking bolder there.


Post Reply