Our powerful JS Calendar component


Post by anthony.dasre »

Hello,

Anyone can help me to disable the ability to change and create events with "resourceTimeRanges". I have defined the resourceTimeRanges as below with the attribute "readOnly" = true :

"resourceTimeRanges"=> [
                    "rows" => [
                        [
                            'id'=>1,
                            "resourceId"=>900,
                            "startDate"=>"2024-02-26 14:00:00",
                            "endDate"=>"2024-03-31 16:00:00",
                            'name' => 'Occupied',
                            "color"     => "gray",
                            "readOnly"  => true,
                            "cls"       => "hatch-large"
                        ]
                    ]
                ]

and in the calendar, I have enabled the features "timeRanges" and used the customer style.
The result is shown as follows and I can add/change the events in the gray zone.

Capture d'écran 2024-02-28 103714.png
Capture d'écran 2024-02-28 103714.png (66.96 KiB) Viewed 125 times

How can I remove the ability to change and create events in the gray zone "occupied" in the picture?

thank you.


Post by alex.l »

Hi,

There is an event that you can use to catch the moment of event create
https://bryntum.com/products/calendar/docs/api/Calendar/view/Calendar#event-beforeAutoCreate

You can find in params date that event is about to create, and source - a link to Calendar instance. It has https://bryntum.com/products/calendar/docs/api/Calendar/view/Calendar#property-timeRangeStore that you can check and compare start/end dates of available time ranges with the date, or add other conditions as you wish.

This event might be also useful for you https://bryntum.com/products/calendar/docs/api/Calendar/view/Calendar#event-beforeDragMoveEnd

All the best,
Alex


Post by Animal »

It could be useful also to add some intervention point which can veto drag processing before it gets to the end point to make a decision.

https://github.com/bryntum/support/issues/8708

Application code would have to decide based on the information in the hit object whether it's a valid drag.

So as soon as a drag-create or a resize moves to what would be an invalid state, the gesture could be canceled by returning false.

Or the hit data could be coerced into shape, maybe by setting a max on the date, so that in the screenshot, dragging the end of that event past 14:00 would not result in the event being resized past 14:00


Post Reply