Skip to content

Commit af52f61

Browse files
committed
[update] add missing info about getBounds/getNext/getPrev methods
1 parent ccfa564 commit af52f61

File tree

1 file changed

+12
-2
lines changed

1 file changed

+12
-2
lines changed

docs/guides/views.md

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -376,7 +376,17 @@ You can find more detailed description of the configuration object [here](api/co
376376

377377
### Custom Views
378378

379-
Custom views can be defined by extending one of the built-in views and overriding its configuration.
379+
Custom views can be created by extending one of the built-in views and overriding its configuration.
380+
381+
A fundamental customization available for all views is modifying the displayed date range and navigation steps. This is achieved by defining the `getBounds`, `getNext`, and `getPrev` properties within the views `config`:
382+
383+
- `getBounds?: (date: Date, config: Config) => [Date, Date]` - this function takes a date and returns an array with two dates that define the time range to be displayed in the view..
384+
- `getNext?: (date: Date, config: Config) => Date` - this function is triggered when the user clicks the "Next" button in the calendar header to move to the next interval. It takes the current date of the Event Calendar as an argument and must return the `start date` of the next interval.
385+
- `getPrev?: (date: Date, config: Config) => Date` - this function is triggered when the user clicks the "Previous" button in the calendar header to move to the previous interval. It takes the current date of the Event Calendar as an argument and must return the `start date` of the previous interval.
386+
387+
The result of the `getNext` and `getPrev` functions is passed to the `getBounds` method to calculate the new interval.
388+
389+
In all cases, the `config` of the view is passed as the second argument to these functions, allowing for more flexible and context-aware customizations.
380390

381391
For example, you can create a custom 5-day view by taking the `week` base view and redefining the `getBounds` method. This method adjusts the displayed range to only show Monday to Friday.
382392

@@ -406,7 +416,7 @@ const scheduler = new eventCalendar.EventCalendar("#root", {
406416
**Related sample:** [Event Calendar. 5-Day Workweek View](https://snippet.dhtmlx.com/af32gon8?tag=event_calendar)
407417

408418

409-
Notice that we didn't redefine the getNext and getPrev methods. This is because the default behavior of the base week view works seamlessly, moving forward or backward by one week. If you need custom navigation behavior, you can override these methods.
419+
Notice that we didn't redefine the `getNext` and `getPrev` methods. This is because the default behavior of the base week view works seamlessly, moving forward or backward by one week. If you need custom navigation behavior, you can override these methods.
410420

411421
Consider another example, Two-Week View with the approrpriate navigation step. In this case you need to override the navigation methods (`getNext` and `getPrev`) in addition to `getBounds`.
412422

0 commit comments

Comments
 (0)