Questions Tagged scheduler

Answered: Please take a look at the following docs page: Hiding Time Columns Just note that this feature is only available in the Pro version.

Answered: Sorry for the delay. I would make a few changes: Instead of using a special time header row, use a frozen row. Mark this row with cellsAutoUpdated: true , that will re-render the content on every cha...

Answered: You can use the onTimeRangeSelecting event to set args.ignoreDisabledCells to true when you want to allow the time range selection.

Answered: The floating events feature is only available for the left side of the viewport.

Answered: These two things don’t seem to work correctly in your setup: 1. Coloring the cells All cells in a column should be colored correctly with this event handler: onBeforeCellRender: (args) => { if (args....

Answered: You will need a webserver with PHP enabled. For development purposes, you can run the project using the built-in PHP webserver: Linux: php -S 127.0.0.1:8090 -t /path/to/project Windows: php.exe -S lo...

Answered: Sorry for the delay! At this moment, the active areas with position defined using the left property are included in the floating event element . Areas relative to the right are not included in the vi...

Answered: Unfortunately, this is not possible - the areas can’t be changed dynamically. However, if you call update() , it will repaint the whole Scheduler, including the upper-left corner and its areas. When ...

Answered: You have added it correctly - but it will only display the expand/collapse icon when you add some child resources. If you want to hide the additional columns for these empty groups, you can remove th...

Answered: The onIncludeTimeCell logic should look like this (it works for two days and scale="Hours" ): onIncludeTimeCell: (args) => { const businessStart = 21; // 9 PM (21:00) const businessEnd = 6; // 6 AM (...

Answered: I hope it helps!

Answered: Unfortunately, that is not possible. Events are arranged in horizontal lines inside rows (see also Event placement strategies ) and the line height is determined by the event height. It is possible t...

Answered: This tutorial was created for an older version of PHP. PHP 8.3 produces warnings about using dynamic properties: Deprecated: Creation of dynamic property ... is deprecated in ... on line ... That dis...

Answered: Please see the src/index.html file in the project attached to the Angular Scheduler: Event Filtering tutorial - the header is defined there.

Answered: The CSS classes are as follows: .scheduler_default_event_move_left .scheduler_default_event_move_right See also the full list of CSS classes used by the Scheduler .

Answered: This is caused by floating events , a feature that displays the event text floating at the viewport edge when scrolling to the right. Angular components can’t be displayed in the floating part but yo...

Answered: In the Scheduler , you can create your own timeline by defining individual time slots. You can set custom start and end times for each slot, as long as they do not overlap with other slots.

Answered: Since version 2024.2.5957 , it is possible to combine the bubble property with any action type. That means the bubble (if specified) will always be displayed on hover, even for action: "ContextMenu" .

Answered: The full project is attached - you can download it at the top of the article using the “Download Source” button (below the main screenshot).

Answered: To implement this, you can use the split resources feature:

Answered: It looks like there is bug in the onchange event handler. An updated version will be released soon.

Answered: Sorry for the delay! There is a tutorial that shows how to insert an Angular component to the bubble. Angular Scheduler: Dynamic Tooltip It is necessary to instantiate the component and add it to the...

Answered: You can mark specified days as disabled using onBeforeCellRender in the Scheduler component . This method is used in the tutorial to disable weekends: onBeforeCellRender: (args) => { const day = args...

Answered: You can switch the CSS theme using the update() method: dp.update({theme: "my_dark_theme"}); And back: dp.update({theme: "my_light_theme"}); Both theme files need to be included in the page using <li...

Answered: You can customize the drag-and-drop moving behavior using the onEventMoving event handler. It lets you forbid the drop depending on the source event and the target position.

Answered: You can customize the row header using the onBeforeRowHeaderRender event handler.

Answered: You can customize the row header using the onBeforeRowHeaderRender event handler.

Answered: I assume you mean the Scheduler component. It is possible to freeze the specified rows - please read more in the Frozen Rows documentation topic.

Answered: You should always call args.loaded() after switching to async processing ( args.async = true ). Like this: onEventMove: (args) => { args.async = true; this.moveItem(args) .subscribe(result => { if (!...