From 6dc542f702cb8d58dcadd6c6d3689addd3c0d06b Mon Sep 17 00:00:00 2001
From: Serhii Pylypchuk <pylypchukserhii1991@gmail.com>
Date: Sun, 1 Dec 2024 21:41:07 +0400
Subject: [PATCH 01/10] [update] the getBounds() method

---
 .../config/js_eventcalendar_config_config.md    | 17 ++++++++++++-----
 1 file changed, 12 insertions(+), 5 deletions(-)

diff --git a/docs/api/config/js_eventcalendar_config_config.md b/docs/api/config/js_eventcalendar_config_config.md
index c94eeb9..7aef4d6 100644
--- a/docs/api/config/js_eventcalendar_config_config.md
+++ b/docs/api/config/js_eventcalendar_config_config.md
@@ -217,11 +217,18 @@ const getMonday = (date) => {
 
 // ...,
 views: [
-    // ...,
-    getBounds: (date) => {
-        const weekStart = getMonday(date);
-        return [weekStart, new Date(weekStart.getFullYear(), weekStart.getMonth(), weekStart.getDate() + 7)];
-    },
+    {
+        id: 'timeline',
+        label: 'Timeline',
+        layout: 'timeline',
+        config: {
+            getBounds: (date) => {
+                const weekStart = getMonday(date);
+                return [weekStart, new Date(weekStart.getFullYear(), weekStart.getMonth(), weekStart.getDate() + 7)];
+            },
+            //...
+        }
+    }
 ]
 ~~~
 

From f55df075790735dde81c7e1e6093e9cb7a718b01 Mon Sep 17 00:00:00 2001
From: Serhii Pylypchuk <pylypchukserhii1991@gmail.com>
Date: Sun, 1 Dec 2024 23:23:58 +0400
Subject: [PATCH 02/10] [update] How-tos. Configuring editor fields at runtime

---
 .../js_eventcalendar_editevent_event.md       |  2 +
 docs/howtos.md                                | 97 +++++++++++++++++++
 2 files changed, 99 insertions(+)

diff --git a/docs/api/events/js_eventcalendar_editevent_event.md b/docs/api/events/js_eventcalendar_editevent_event.md
index 91170dd..bca2b40 100644
--- a/docs/api/events/js_eventcalendar_editevent_event.md
+++ b/docs/api/events/js_eventcalendar_editevent_event.md
@@ -84,3 +84,5 @@ calendar.api.on("edit-event", (obj) => {
     console.log(obj);
 });
 ~~~
+
+**Related sample:** [Event Calendar. Configuring editor fields at runtime](https://snippet.dhtmlx.com/22vzkltn?tag=event_calendar)
diff --git a/docs/howtos.md b/docs/howtos.md
index b8ad985..8ee3888 100644
--- a/docs/howtos.md
+++ b/docs/howtos.md
@@ -148,6 +148,103 @@ Explore the [**Format**](https://date-fns.org/v3.3.1/docs/format) topic for more
 
 To get more information on how to configure the time and date format in the Event Calendar, refer to the [**Time and Date format**](/guides/localization/#time-and-date-format) section.
 
+### Configuring editor fields at runtime
+
+You have an ability to rebuild or modify editor form if a user fills input fields. For this purpose, you need to handle the ["edit-event"](/api/events/js_eventcalendar_editevent_event/) event as shown in the following code snippet:
+
+~~~jsx {}
+// The user dataset for Type 1
+const users_dataset_1 = [
+    { id: '1', label: 'Steve Smith', avatar: 'https://snippet.dhtmlx.com/codebase/data/kanban/01/img/user-1.jpg' },
+    { id: '2', label: 'Aaron Long', avatar: 'https://snippet.dhtmlx.com/codebase/data/kanban/01/img/user-2.jpg' },
+    { id: '3', label: 'Angela Allen', avatar: 'https://snippet.dhtmlx.com/codebase/data/kanban/01/img/user-3.jpg' },
+    { id: '4', label: 'Angela Long', avatar: 'https://snippet.dhtmlx.com/codebase/data/kanban/01/img/user-4.jpg' }
+];
+// The user dataset for Type 2
+const users_dataset_2 = [
+    { id: '1', label: 'Steve Smith', avatar: 'https://snippet.dhtmlx.com/codebase/data/kanban/01/img/user-1.jpg' },
+    { id: '2', label: 'Aaron Long', avatar: 'https://snippet.dhtmlx.com/codebase/data/kanban/01/img/user-2.jpg' }
+];
+
+// The dataset for Task Type selector
+const task_types = [
+    { id: 'type1', label: 'Type 1' },
+    { id: 'type2', label: 'Type 2' }
+];
+
+// Specify configuration for Editor fields
+const editorShapeConfig = [
+    ...eventCalendar.defaultEditorShape,
+    {   // The selector for task types
+        type: 'combo',
+        key: 'task_type',
+        label: 'Task Type',
+        options: task_types,
+        config: { disabled: false, placeholder: "Select task type" }
+    },
+    {   // The selector for users. This selector changes its dataset depending on the selected Task Type
+        type: 'multiselect',
+        key: 'users',
+        label: 'Users',
+        options: users_dataset_1,
+        template: optionTemplate,
+        config: {
+            disabled: false,
+            placeholder: "Select user"
+        }
+    }
+];
+
+// The template that displays users in the Users selector
+function optionTemplate(option) {
+    return `<div class='multiselect-wraper'>
+                <img src=${option.avatar} alt='' class='multieselectOption-img' />
+                ${option.label}
+            </div>`
+}
+
+// Initialize Event Calendar
+const calendar = new eventCalendar.EventCalendar('#root', {
+    events, // Data for events
+    editorShape: editorShapeConfig, // Configuration for editor fields
+    mode: 'month',
+    date: new Date('2024-12-01T00:00:00')
+});
+
+// Update the user dataset depending on the selected Task Type
+function updateUsersBasedOnTaskType(shape, selectedType) {
+    const updatedShape = shape.map(field => {
+        if (field.key === 'users') {
+            const options = selectedType === 'Type 2' ? users_dataset_2 : users_dataset_1;
+            return { ...field, options };
+        }
+        return field;
+    });
+    return updatedShape
+}
+
+// Subscribe on the "edit-event" event
+// If a user selects the Type 1, he can select 4 users in the Users selector
+// If a user selects the Type 2, he can select 2 users in the Users selector
+calendar.api.on("edit-event", (obj) => {
+    setTimeout(() => {
+        // Get the Editor form container
+        const formContainer = document.querySelector('.wx-event-calendar-editor-form');
+
+        if (formContainer) {
+            const comboInput = document.querySelector('#combo_task_type');
+            comboInput.addEventListener('focusout', () => {
+                const newShape = updateUsersBasedOnTaskType(editorShape,comboInput.value)
+                calendar.form.update(() => newShape )
+            });
+        }
+    }, 0);
+});
+
+~~~
+
+**Related sample:** [Event Calendar. Configuring editor fields at runtime](https://snippet.dhtmlx.com/22vzkltn?tag=event_calendar)
+
 ## How to work with inner events
 
 | Topic                                                                          | Description                                               |

From 3c5e4bdad08528b8cf01e6a892e09f088fdb7848 Mon Sep 17 00:00:00 2001
From: Serhii Pylypchuk <pylypchukserhii1991@gmail.com>
Date: Wed, 4 Dec 2024 20:40:20 +0400
Subject: [PATCH 03/10] [update] Whats new. Add fixes

---
 docs/news/whats_new.md | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/docs/news/whats_new.md b/docs/news/whats_new.md
index d92cdb2..9cc1c9e 100644
--- a/docs/news/whats_new.md
+++ b/docs/news/whats_new.md
@@ -8,6 +8,16 @@ description: You can explore what's new in DHTMLX Event Calendar and its release
 
 If you are updating Event Calendar from an older version, check [Migration to newer versions](news/migration.md) for details.
 
+## Version 2.3.0
+
+Released on December Day, 2024
+
+### Fixes
+
+- Improve UI for readonly calendars and events
+- Improve Calendar Info popup
+- Events lasting a few hours that span across 2 days are shown as all-day events
+
 ## Version 2.2.8
 
 Released on November 29, 2024

From ba86cfc0219aae4f8010f9cfb35e17b5d11affb7 Mon Sep 17 00:00:00 2001
From: Alex Klimenkov <shurick.klimenkov@gmail.com>
Date: Mon, 9 Dec 2024 18:11:38 +0300
Subject: [PATCH 04/10] [update] info on custom views

---
 .../config/js_eventcalendar_config_config.md  |   2 +-
 docs/guides/views.md                          | 503 ++++++++++++++++++
 docs/news/whats_new.md                        |   8 +-
 sidebars.js                                   |   1 +
 4 files changed, 512 insertions(+), 2 deletions(-)
 create mode 100644 docs/guides/views.md

diff --git a/docs/api/config/js_eventcalendar_config_config.md b/docs/api/config/js_eventcalendar_config_config.md
index 7aef4d6..41649c3 100644
--- a/docs/api/config/js_eventcalendar_config_config.md
+++ b/docs/api/config/js_eventcalendar_config_config.md
@@ -167,7 +167,7 @@ calendarValidation: calendar => {
 - `views` - (optional) an array of configuration objects of the specific (custom) view modes. For each view mode you can specify the following settings:
     - `id` - (required) an ID of the view mode
     - `label` - (required) a label of the view mode
-    - `layout` - (required) a predefined layout of the view mode. Here you can specify the following values: *"year" | "month" | "quarter" | "month" | "week" | "day" | "hour" | "minute"*
+    - `layout` - (required) a predefined layout of the view mode. Here you can specify the following values: *"year" | "month" | "month" | "week" | "day" | "agenda" | "timeline"*
     - `config` - (optional) an object of the custom view mode settings
 
 :::note
diff --git a/docs/guides/views.md b/docs/guides/views.md
new file mode 100644
index 0000000..d872b49
--- /dev/null
+++ b/docs/guides/views.md
@@ -0,0 +1,503 @@
+---
+sidebar_label: Views
+title: Views
+description: You can learn about the available Views in the documentation of the DHTMLX JavaScript Event Calendar library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Event Calendar.
+---
+
+# Views
+
+The DHTMLX Event Calendar offers six built-in views: **day**, **week**, **month**, **year**, **agenda**, and **timeline**. These views can be specified in the `views` property of the [configuration object](api/config/js_eventcalendar_config_config.md) as an array. The calendar can dynamically switch between these views, enabling flexible navigation for end-users.
+
+Each view requires three essential properties:
+
+- **id** - API name for programmatic access
+- **label** - display name shown in the view control at the top-right of the calendar
+- **layout** - reference to the base view (e.g., `day`, `week`)
+
+~~~jsx
+const calendar = new eventCalendar.EventCalendar("#root", {
+    config: {
+        views: [
+            {
+                id: "week",
+                label: "Week",
+                layout: "week"
+            },
+            {
+                id: "day",
+                label: "Day",
+                layout: "day"
+            },
+            {
+                id: "month",
+                label: "Month",
+                layout: "month",
+            },
+            {
+                id: "year",
+                label: "Year",
+                layout: "year"
+            },
+            {
+                id: "agenda",
+                label: "Agenda",
+                layout: "agenda",
+            }
+        ]
+    },
+    events: [],
+    date: new Date(),
+});
+~~~
+
+By default, the available views are displayed in the top-right of the user interface, accessible through the view selection control. Views appear in the order they are defined in the `views` configuration array. The appearance of the view selector can be further customized using the [`viewControl`](api/config/js_eventcalendar_config_config.md/#:~:text=viewControl%20%2D%20(optional)%20defines%20a%20control%20to%20switch%20through%20the%20view%20modes.) property.
+
+Optionally, each view can accept it's own `config` object with extra settings allowing configuring the view:
+
+~~~jsx
+const calendar = new eventCalendar.EventCalendar("#root", {
+    config: {
+        views: [
+            {
+                id: "day",
+                label: "Day",
+                layout: "day",
+                config: [
+                    timeRange: [8, 17]
+                ]
+            }
+        ]
+    },
+    events: [],
+    date: new Date(),
+});
+~~~
+
+Settings that should be applied to multiple views can be specified at the global config level:
+
+~~~jsx
+const calendar = new eventCalendar.EventCalendar("#root", {
+    config: {
+        timeRange: [8, 17],
+        views: [
+            {
+                id: "day",
+                label: "Day",
+                layout: "day"
+            },
+            {
+                id: "week",
+                label: "Week",
+                layout: "week"
+            }
+        ]
+    },
+    events: [],
+    date: new Date(),
+});
+~~~
+
+And vice-versa, view-level settings can override the global config:
+
+~~~jsx
+const calendar = new eventCalendar.EventCalendar("#root", {
+    config: {
+        timeRange: [8, 17],
+        views: [
+            {
+                id: "day",
+                label: "Day",
+                layout: "day"
+            },
+            {
+                id: "week",
+                label: "Week",
+                layout: "week",
+                config: {
+                    readonly: true,
+                    timeRange: [0,24]
+                }
+            }
+        ]
+    },
+    events: [],
+    date: new Date(),
+});
+~~~
+
+For more details about the `config` object, please refer to the [Configuration Guide](guides/configuration.md/#configuring-view-modes)
+
+## Built-in Views
+
+Below is a detailed list of default views, including their configuration options.
+
+### Day
+
+The **Day** view shows events for a single day.
+
+~~~jsx
+config: {
+    views: [
+        { id: "day", label: "Day", layout: "day" }
+    ]
+}
+~~~
+
+Extended configuration:
+
+~~~jsx
+{
+    id: "day",
+    label: "Day",
+    layout: "day",
+    config: {
+        dateTitle?: (currentDate: Date, bounds: [Date, Date]) => string;
+        getBounds?: (date: Date, config: Config) => [Date, Date];
+        getNext?: (date: Date, config: Config) => Date;
+        getPrev?: (date: Date, config: Config) => Date;
+
+        cellCss?: (date: Date) => string;
+        template?: (event: Event) => string;
+
+        eventHeight?: number;
+        timeRange?: [number, number];
+        timeStep?: number;
+        eventsOverlay?: false;
+        eventVerticalSpace?: number;
+        eventHorizontalSpace?: string;
+        columnPadding?: string;
+        weekStartsOn?: number;
+    }
+}
+~~~
+
+You can find more detailed description of the configuration object [here](api/config/js_eventcalendar_config_config.md/#:~:text=To%20configure%20a%20custom%20view%20mode%20(or%20modes)%2C%20you%20can%20specify%20the%20following%20parameters%3A)
+
+### Week
+
+The **Week** view displays events for an entire week:
+
+~~~jsx
+config: {
+    views: [
+        { id: "week", label: "Week", layout: "week" }
+    ]
+}
+~~~
+
+Extended configuration:
+
+~~~jsx
+{
+    id: "week",
+    label: "Week",
+    layout: "week",
+    config: {
+        dateTitle?: (currentDate: Date, bounds: [Date, Date]) => string;
+        getBounds?: (date: Date, config: Config) => [Date, Date];
+        getNext?: (date: Date, config: Config) => Date;
+        getPrev?: (date: Date, config: Config) => Date;
+
+        cellCss?: (date: Date) => string;
+        template?: (event: Event) => string;
+
+        eventHeight?: number;
+        timeRange?: [number, number];
+        timeStep?: number;
+        eventsOverlay?: false;
+        eventVerticalSpace?: number;
+        eventHorizontalSpace?: string;
+        columnPadding?: string;
+        weekStartsOn?: number;
+    }
+}
+~~~
+
+
+You can find more detailed description of the configuration object [here](api/config/js_eventcalendar_config_config.md/#:~:text=To%20configure%20a%20custom%20view%20mode%20(or%20modes)%2C%20you%20can%20specify%20the%20following%20parameters%3A)
+
+### Month
+
+The **Month** view organizes events by calendar months:
+
+```
+config: {
+    views: [
+        { id: "month", label: "Month", layout: "month" }
+    ]
+}
+```
+
+Extended configuration:
+
+~~~jsx
+{
+    id: "month",
+    label: "Month",
+    layout: "month",
+    config: {
+        dateTitle?: (currentDate: Date, bounds: [Date, Date]) => string;
+        getBounds?: (date: Date, config: Config) => [Date, Date];
+        getNext?: (date: Date, config: Config) => Date;
+        getPrev?: (date: Date, config: Config) => Date;
+
+        weekStartsOn?: number;
+        maxEventsPerCell?: number;
+        eventVerticalSpace?: number;
+    }
+}
+~~~
+
+
+You can find more detailed description of the configuration object [here](api/config/js_eventcalendar_config_config.md/#:~:text=To%20configure%20a%20custom%20view%20mode%20(or%20modes)%2C%20you%20can%20specify%20the%20following%20parameters%3A)
+
+### Year
+
+The **Year** view provides an overview of events across a year:
+
+~~~jsx
+config: {
+    views: [
+        { id: "year", label: "Year", layout: "year" }
+    ]
+}
+~~~
+
+Extended configuration:
+
+~~~jsx
+{
+    id: "year",
+    label: "Year",
+    layout: "year",
+    config: {
+        dateTitle?: (currentDate: Date, bounds: [Date, Date]) => string;
+        getBounds?: (date: Date, config: Config) => [Date, Date];
+        getNext?: (date: Date, config: Config) => Date;
+        getPrev?: (date: Date, config: Config) => Date;
+    }
+}
+~~~
+
+
+You can find more detailed description of the configuration object [here](api/config/js_eventcalendar_config_config.md/#:~:text=To%20configure%20a%20custom%20view%20mode%20(or%20modes)%2C%20you%20can%20specify%20the%20following%20parameters%3A)
+
+### Agenda
+
+The **Agenda** view lists upcoming events starting from the current date:
+
+
+~~~jsx
+config: {
+    views: [
+        { id: "agenda", label: "Agenda", layout: "agenda" }
+    ]
+}
+~~~
+
+Extended configuration:
+
+~~~jsx
+{
+    id: "agenda",
+    label: "Agenda",
+    layout: "agenda",
+    config: {
+        dateTitle?: (currentDate: Date, bounds: [Date, Date]) => string;
+        getBounds?: (date: Date, config: Config) => [Date, Date];
+        getNext?: (date: Date, config: Config) => Date;
+        getPrev?: (date: Date, config: Config) => Date;
+    }
+}
+~~~
+
+
+You can find more detailed description of the configuration object [here](api/config/js_eventcalendar_config_config.md/#:~:text=To%20configure%20a%20custom%20view%20mode%20(or%20modes)%2C%20you%20can%20specify%20the%20following%20parameters%3A)
+
+### Timeline
+
+The **Timeline**  view is ideal for visualizing events across multiple resources or time units:
+
+
+~~~jsx
+config: {
+    views: [
+        { id: "timeline", label: "Timeline", layout: "timeline" }
+    ]
+}
+~~~
+
+Extended configuration:
+
+~~~jsx
+{
+    id: "timeline",
+    label: "Timeline",
+    layout: "timeline",
+    config: {
+        dateTitle?: (currentDate: Date, bounds: [Date, Date]) => string;
+        getBounds?: (date: Date, config: Config) => [Date, Date];
+        getNext?: (date: Date, config: Config) => Date;
+        getPrev?: (date: Date, config: Config) => Date;
+
+        colsCount?: number;
+        colsWidth?: number;
+        minEventWidth?: number;
+        eventVerticalSpace?: number;
+        minSectionHeight?: number;
+        sectionWidth?: number;
+        step?: [number, "day" | "week" | "month" | "year" | "hour" | "minute"];
+        header?: ITimelineHeader[];
+        sections?: ISection[];
+        key?: string;
+        unassignedCol?: boolean;
+    }
+}
+~~~
+
+Where `ITimelineHeader` and `ISection` are defined as following:
+
+~~~jsx
+export interface ITimelineHeader {
+    unit: string;
+    format: string;
+    step: number;
+}
+
+export interface ISection {
+    id: TID;
+    label?: string;
+    [key: string]: any;
+}
+~~~
+
+
+You can find more detailed description of the configuration object [here](api/config/js_eventcalendar_config_config.md/#:~:text=To%20configure%20a%20custom%20view%20mode%20(or%20modes)%2C%20you%20can%20specify%20the%20following%20parameters%3A)
+
+### Custom Views
+
+Custom views can be defined by extending one of the built-in views and overriding its configuration. 
+
+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.
+
+~~~jsx
+
+const scheduler = new eventCalendar.EventCalendar("#root", {
+    config: {
+        views: [
+            {
+                id: "custom-week",
+                label: "Custom Week",
+                layout: "week",
+                config: {
+                    getBounds: (date) => {
+                        const start = dateFns.startOfWeek(date, { weekStartsOn: 1 });
+                        return [start, dateFns.addDays(start, 4)];
+                    }
+                }
+            }
+        ]
+    },
+    mode: "custom-week",
+    date: new Date("2025-02-12T00:00:00")
+});
+~~~
+
+**Related sample:** [Event Calendar. 5-Day Workweek View](https://snippet.dhtmlx.com/af32gon8?tag=event_calendar)
+
+
+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.
+
+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`.
+
+~~~jsx
+const calendar = new EventCalendar("#root", {
+    config: {
+        views: [
+            {
+                id: "two-weeks",
+                label: "Two Weeks",
+                layout: "week",
+                config: {
+                    getBounds: (date) => {
+                        const start = dateFns.startOfWeek(date);
+                        return [start, dateFns.addDays(start, 13)];
+                    },
+                    getNext: (date) => dateFns.addDays(date, 14),
+                    getPrev: (date) => dateFns.addDays(date, -14)
+                }
+            }
+        ]
+    },
+    mode: "two-weeks",
+    date: new Date("2025-02-12T00:00:00")
+});
+~~~
+
+**Related sample:** [Event Calendar. 2-Week View](https://snippet.dhtmlx.com/jst2oh35?tag=event_calendar)
+
+#### Customizing the Agenda view
+
+By default, the **Agenda** view displays upcoming events starting from the active date. You can redefine this behavior to display events for an entire month, with navigation moving one month at a time.
+
+~~~jsx
+const calendar = new EventCalendar("#root", {
+    config: {
+        views: [
+            {
+                id: "agenda-month",
+                label: "Monthly Agenda",
+                layout: "agenda",
+                config: {
+                    dateTitle: (date) => dateFns.format(date, "MMMM yyyy"),
+                    getBounds: (date) => {
+                        const start = dateFns.startOfMonth(date);
+                        return [start, dateFns.endOfMonth(start)];
+                    },
+                    getNext: (date) => dateFns.addMonths(date, 1),
+                    getPrev: (date) => dateFns.addMonths(date, -1)
+                }
+            }
+        ]
+    },
+    mode: "agenda",
+    date: new Date("2025-02-12T00:00:00")
+});
+~~~
+
+**Related sample:** [Event Calendar. Customized Agenda View](https://snippet.dhtmlx.com/wo24gdez?tag=event_calendar)
+
+#### Customizing the Timeline view
+
+The **Timeline** view can be customized to show data at finer time intervals. For instance, you can create a timeline that breaks the day into hours and groups events by sections.
+
+~~~jsx
+const calendar = new EventCalendar("#root", {
+    config: {
+        views: [
+            {
+                id: "hour_timeline",
+                label: "Hour Timeline",
+                layout: "timeline",
+                config: {
+                    unassignedCol: true,
+                    key: "sectionId",
+                    sections: [
+                        { id: "1", label: "Section 1" },
+                        { id: "2", label: "Section 2" }
+                    ],
+                    step: [1, "hour"], // Hourly steps
+                    header: [
+                        { unit: "day", step: 1, format: "d MMM" },
+                        { unit: "hour", step: 1, format: "H" }
+                    ]
+                }
+            }
+        ]
+    },
+    mode: "hour_timeline",
+    date: new Date("2025-02-12T00:00:00")
+});
+~~~
+
+**Related sample:** [Event Calendar. Customized Timeline View](https://snippet.dhtmlx.com/85jez8mn?tag=event_calendar)
diff --git a/docs/news/whats_new.md b/docs/news/whats_new.md
index 9cc1c9e..e2d567a 100644
--- a/docs/news/whats_new.md
+++ b/docs/news/whats_new.md
@@ -12,12 +12,18 @@ If you are updating Event Calendar from an older version, check [Migration to ne
 
 Released on December Day, 2024
 
-### Fixes
+
+### New functionality
+
+- An ability to create [custom views](guides/views.md/#custom-views) from all [built-in views](guides/views.md/#built-in-views)
+
+### Updates
 
 - Improve UI for readonly calendars and events
 - Improve Calendar Info popup
 - Events lasting a few hours that span across 2 days are shown as all-day events
 
+
 ## Version 2.2.8
 
 Released on November 29, 2024
diff --git a/sidebars.js b/sidebars.js
index 9d8364f..2341bee 100644
--- a/sidebars.js
+++ b/sidebars.js
@@ -319,6 +319,7 @@ module.exports = {
             },
             items: [
                 "guides/initialization",
+                "guides/views",
                 "guides/configuration",
                 "guides/customization",
                 "guides/stylization",

From ccfa564b55092b260d4f3420de1f15b3aa0a8430 Mon Sep 17 00:00:00 2001
From: Alex Klimenkov <shurick.klimenkov@gmail.com>
Date: Mon, 9 Dec 2024 18:16:21 +0300
Subject: [PATCH 05/10] [fix] correct allowed value of the 'layout' property of
 the config

---
 docs/api/config/js_eventcalendar_config_config.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/api/config/js_eventcalendar_config_config.md b/docs/api/config/js_eventcalendar_config_config.md
index 41649c3..9d96660 100644
--- a/docs/api/config/js_eventcalendar_config_config.md
+++ b/docs/api/config/js_eventcalendar_config_config.md
@@ -167,7 +167,7 @@ calendarValidation: calendar => {
 - `views` - (optional) an array of configuration objects of the specific (custom) view modes. For each view mode you can specify the following settings:
     - `id` - (required) an ID of the view mode
     - `label` - (required) a label of the view mode
-    - `layout` - (required) a predefined layout of the view mode. Here you can specify the following values: *"year" | "month" | "month" | "week" | "day" | "agenda" | "timeline"*
+    - `layout` - (required) a predefined layout of the view mode. Here you can specify the following values: *"year" | "month" | "week" | "day" | "agenda" | "timeline"*
     - `config` - (optional) an object of the custom view mode settings
 
 :::note

From af52f6112df655bf492ae64f5a169c5ee06acdd3 Mon Sep 17 00:00:00 2001
From: Alex Klimenkov <shurick.klimenkov@gmail.com>
Date: Mon, 9 Dec 2024 19:00:19 +0300
Subject: [PATCH 06/10] [update] add missing info about
 getBounds/getNext/getPrev methods

---
 docs/guides/views.md | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/docs/guides/views.md b/docs/guides/views.md
index d872b49..8a0f0be 100644
--- a/docs/guides/views.md
+++ b/docs/guides/views.md
@@ -376,7 +376,17 @@ You can find more detailed description of the configuration object [here](api/co
 
 ### Custom Views
 
-Custom views can be defined by extending one of the built-in views and overriding its configuration. 
+Custom views can be created by extending one of the built-in views and overriding its configuration.
+
+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`:
+
+- `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..
+- `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. 
+- `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.
+
+The result of the `getNext` and `getPrev` functions is passed to the `getBounds` method to calculate the new interval.
+
+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.
 
 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.
 
@@ -406,7 +416,7 @@ const scheduler = new eventCalendar.EventCalendar("#root", {
 **Related sample:** [Event Calendar. 5-Day Workweek View](https://snippet.dhtmlx.com/af32gon8?tag=event_calendar)
 
 
-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.
+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.
 
 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`.
 

From 478cdecd179917836e5fd58e4c66c7bdb7c2ba80 Mon Sep 17 00:00:00 2001
From: Alex Klimenkov <shurick.klimenkov@gmail.com>
Date: Mon, 9 Dec 2024 19:07:26 +0300
Subject: [PATCH 07/10] [update] use bundled date-fns in code examples

---
 docs/api/config/js_eventcalendar_templates_config.md | 3 ++-
 docs/guides/views.md                                 | 6 ++++--
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/docs/api/config/js_eventcalendar_templates_config.md b/docs/api/config/js_eventcalendar_templates_config.md
index 1028e59..1d7f992 100644
--- a/docs/api/config/js_eventcalendar_templates_config.md
+++ b/docs/api/config/js_eventcalendar_templates_config.md
@@ -64,8 +64,9 @@ To set the templates dynamically, you can use the
 ### Example
 
 ~~~jsx {5-14,16-22,24-30,32-44,46-55,57-63,65-73,75-88,90-97}
+const { dateFns, EventCalendar } = eventCalendar;
 const { format } = dateFns; // date-fns library  (https://date-fns.org/)
-new eventCalendar.EventCalendar("#root", { // create Event Calendar
+new EventCalendar("#root", { // create Event Calendar
     templates: {
         // the event template of the "Week" and "Day" modes
         weekEvent: ({ event, calendar }) => {
diff --git a/docs/guides/views.md b/docs/guides/views.md
index 8a0f0be..2f60114 100644
--- a/docs/guides/views.md
+++ b/docs/guides/views.md
@@ -391,8 +391,8 @@ In all cases, the `config` of the view is passed as the second argument to these
 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.
 
 ~~~jsx
-
-const scheduler = new eventCalendar.EventCalendar("#root", {
+const { dateFns, EventCalendar } = eventCalendar;
+const calendar = new EventCalendar("#root", {
     config: {
         views: [
             {
@@ -421,6 +421,7 @@ Notice that we didn't redefine the `getNext` and `getPrev` methods. This is beca
 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`.
 
 ~~~jsx
+const { dateFns, EventCalendar } = eventCalendar;
 const calendar = new EventCalendar("#root", {
     config: {
         views: [
@@ -451,6 +452,7 @@ const calendar = new EventCalendar("#root", {
 By default, the **Agenda** view displays upcoming events starting from the active date. You can redefine this behavior to display events for an entire month, with navigation moving one month at a time.
 
 ~~~jsx
+const { dateFns, EventCalendar } = eventCalendar;
 const calendar = new EventCalendar("#root", {
     config: {
         views: [

From 0f664fdc9568a24638e41e5c411e78ee28f9db5e Mon Sep 17 00:00:00 2001
From: Serhii Pylypchuk <pylypchukserhii1991@gmail.com>
Date: Wed, 11 Dec 2024 12:13:15 +0400
Subject: [PATCH 08/10] [update] views file. Changes after review

---
 .../config/js_eventcalendar_config_config.md  |  26 +-
 .../js_eventcalendar_templates_config.md      |   2 +-
 docs/guides/configuration.md                  |   6 +-
 docs/guides/views.md                          | 334 ++++++++++--------
 sidebars.js                                   |   4 +-
 5 files changed, 202 insertions(+), 170 deletions(-)

diff --git a/docs/api/config/js_eventcalendar_config_config.md b/docs/api/config/js_eventcalendar_config_config.md
index 9d96660..64e42f9 100644
--- a/docs/api/config/js_eventcalendar_config_config.md
+++ b/docs/api/config/js_eventcalendar_config_config.md
@@ -25,6 +25,7 @@ config?: {
     eventsOverlay?: boolean,
     autoSave?: boolean,
     readonly?: boolean,
+    highlightReadonly?: boolean,
     dimPastEvents?: boolean,
     dateClick?: boolean | string, // (true/false or "day" | "week" | "month" | "year" | "agenda" | "timeline")
     dateTitle?: (date, [start, end]) => string, 
@@ -82,7 +83,7 @@ config?: {
                 step?: array, // [number, "day" | "week" | "month" | "year" | "hour" | "minute"]
                 header?: [
                     {
-                        unit: string, // "year" | "month" | "quarter" | "month" | "week" | "day" | "hour" | "minute"
+                        unit: string, // "year" | "month" | "quarter" | "week" | "day" | "hour" | "minute"
                         format: string, // date-fns format
                         step: number
                     },
@@ -95,8 +96,8 @@ config?: {
                         // ... other custom parameters
                     },
                     // other sections config
-                ],
-            },
+                ]
+            }
         },
         // other views config
     ]        
@@ -116,6 +117,7 @@ In the **config** object you can specify the following parameters:
 - `eventsOverlay` - (optional) enables/disables an ability to overlay events
 - `autoSave` - (optional) enables/disables an ability to auto save event data (via the editor)
 - `readonly` - (optional) enables/disables an ability to perform operations on events
+- `highlightReadonly` - (optional) enables/disables highlighting the readonly events
 - `dimPastEvents` - (optional) enables/disables an ability to dim past events
 - `dateClick` - (optional) defines a behavior of clicking on the date in a grid cell in the following way:
     - ***true/false*** - enables/disables an ability to click on the date in a grid cell to go to the corresponding day
@@ -258,7 +260,7 @@ step: [8, "hour"], // "day" | "week" | "month" | "year" | "hour" | "minute"
 ~~~
 
 - `header?: array` - defines headers for the Timeline grid. In this array you can specify objects with the following parameters:
-    - `unit: string` - a timeline unit. Here you can specify one of the following values:  *"year" | "month" | "quarter" | "month" | "week" | "day" | "hour" | "minute"*
+    - `unit: string` - a timeline unit. Here you can specify one of the following values:  *"year" | "month" | "quarter" | "week" | "day" | "hour" | "minute"*
     - `format: string` - a time format (use a [date-fns](https://date-fns.org/) format)
     - `step: number` - a time duration
 
@@ -298,12 +300,11 @@ sections: [
 ~~~jsx {}
 const defaultWeekConfig = {
     eventHorizontalSpace: 3,
-    columnPadding: "8px",
-    
+    columnPadding: "8px"  
 };
 
 const defaultMonthConfig = {
-    maxEventsPerCell: 4,
+    maxEventsPerCell: 4
 };
 
 const defaultTimelineConfig = {
@@ -329,7 +330,7 @@ const defaultTimelineConfig = {
         { id: "8", label: "Section 8" },
         { id: "9", label: "Section 9" },
     ],
-    unassignedCol: false,
+    unassignedCol: false
 };
 
 const defaultConfig = {
@@ -344,6 +345,7 @@ const defaultConfig = {
     eventsOverlay: false,
     autoSave: true,
     readonly: false,
+    highlightReadonly: true,
 
     tableHeaderHeight: 32,
     eventHeight: 24,
@@ -376,7 +378,7 @@ const defaultConfig = {
         },
         { id: "year", label: "Year", layout: "year" },
         { id: "agenda", label: "Agenda", layout: "agenda" },
-    ],
+    ]
 };
 ~~~
 
@@ -387,13 +389,14 @@ To set the **config** property dynamically, you can use the
 
 ### Example
 
-~~~jsx {3-50}
+~~~jsx {3-51}
 // create Event Calendar
 new eventCalendar.EventCalendar("#root", {
     config: {
         autoSave: false,
         dragResize: false,
         readonly: true,
+        highlightReadonly: false,
         dragMove: false,
         viewControl: "toggle",
         dimPastEvents: true,
@@ -436,7 +439,7 @@ new eventCalendar.EventCalendar("#root", {
                 },
             },
             // other custom views config
-        ],
+        ]
     },
     // other configuration parameters
 });
@@ -449,3 +452,4 @@ new eventCalendar.EventCalendar("#root", {
 - The ***dateTitle***, ***eventVerticalSpace*** and ***eventHorizontalSpace*** properties were added in v2.1
 - The ***eventMargin*** property was deprecated in v2.1
 - The ***calendarValidation*** and ***defaultEditorValues*** properties were added in v2.2
+- The ***highlightReadonly*** property was added in v2.3
diff --git a/docs/api/config/js_eventcalendar_templates_config.md b/docs/api/config/js_eventcalendar_templates_config.md
index 1d7f992..2ae26b3 100644
--- a/docs/api/config/js_eventcalendar_templates_config.md
+++ b/docs/api/config/js_eventcalendar_templates_config.md
@@ -63,7 +63,7 @@ To set the templates dynamically, you can use the
 
 ### Example
 
-~~~jsx {5-14,16-22,24-30,32-44,46-55,57-63,65-73,75-88,90-97}
+~~~jsx {6-15,17-23,25-31,33-45,47-56,58-64,66-74,76-89,91-97}
 const { dateFns, EventCalendar } = eventCalendar;
 const { format } = dateFns; // date-fns library  (https://date-fns.org/)
 new EventCalendar("#root", { // create Event Calendar
diff --git a/docs/guides/configuration.md b/docs/guides/configuration.md
index 57620de..e26b170 100644
--- a/docs/guides/configuration.md
+++ b/docs/guides/configuration.md
@@ -1,10 +1,10 @@
 ---
-sidebar_label: Configuration
-title: Configuration
+sidebar_label: Common Configuration
+title: Common Configuration
 description: You can learn about the configuration in the documentation of the DHTMLX JavaScript Event Calendar library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Event Calendar.
 ---
 
-# Configuration
+# Common Configuration
 
 You can configure the *Event Calendar* appearance and functionality via corresponding API. The available parameters will allow you to:
 
diff --git a/docs/guides/views.md b/docs/guides/views.md
index 2f60114..370f6cc 100644
--- a/docs/guides/views.md
+++ b/docs/guides/views.md
@@ -1,18 +1,18 @@
 ---
-sidebar_label: Views
-title: Views
+sidebar_label: View Configuration
+title: View Configuration
 description: You can learn about the available Views in the documentation of the DHTMLX JavaScript Event Calendar library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Event Calendar.
 ---
 
-# Views
+# View Configuration
 
-The DHTMLX Event Calendar offers six built-in views: **day**, **week**, **month**, **year**, **agenda**, and **timeline**. These views can be specified in the `views` property of the [configuration object](api/config/js_eventcalendar_config_config.md) as an array. The calendar can dynamically switch between these views, enabling flexible navigation for end-users.
+The DHTMLX Event Calendar provides six built-in views: **day**, **week**, **month**, **year**, **agenda**, and **timeline**. To configure these views, use the [`config.views`](api/config/js_eventcalendar_config_config.md) property. You can flexible navigate between these views dynamically.
 
 Each view requires three essential properties:
 
-- **id** - API name for programmatic access
-- **label** - display name shown in the view control at the top-right of the calendar
-- **layout** - reference to the base view (e.g., `day`, `week`)
+- **id** - the view id used for programmatic access
+- **label** - the label displayed in the change view control
+- **layout** - the predefined layout of the view mode. Here you can specify the following values: *"year" | "month" | "week" | "day" | "agenda" | "timeline"*
 
 ~~~jsx
 const calendar = new eventCalendar.EventCalendar("#root", {
@@ -31,7 +31,7 @@ const calendar = new eventCalendar.EventCalendar("#root", {
             {
                 id: "month",
                 label: "Month",
-                layout: "month",
+                layout: "month"
             },
             {
                 id: "year",
@@ -41,20 +41,20 @@ const calendar = new eventCalendar.EventCalendar("#root", {
             {
                 id: "agenda",
                 label: "Agenda",
-                layout: "agenda",
+                layout: "agenda"
             }
         ]
     },
-    events: [],
-    date: new Date(),
+    events: [/* event data */],
+    date: new Date()
 });
 ~~~
 
-By default, the available views are displayed in the top-right of the user interface, accessible through the view selection control. Views appear in the order they are defined in the `views` configuration array. The appearance of the view selector can be further customized using the [`viewControl`](api/config/js_eventcalendar_config_config.md/#:~:text=viewControl%20%2D%20(optional)%20defines%20a%20control%20to%20switch%20through%20the%20view%20modes.) property.
+By default, the available view controls are displayed in the top-right part of the user interface. View controls appear in the order they are defined in the `views` configuration array. You can use the [`config.viewControl`](api/config/js_eventcalendar_config_config.md) property to change the appearance of a view control.
 
-Optionally, each view can accept it's own `config` object with extra settings allowing configuring the view:
+Optionally, each view can accept it's own `config` object with extra settings, that allow you to configure a view:
 
-~~~jsx
+~~~jsx {8-10}
 const calendar = new eventCalendar.EventCalendar("#root", {
     config: {
         views: [
@@ -69,13 +69,13 @@ const calendar = new eventCalendar.EventCalendar("#root", {
         ]
     },
     events: [],
-    date: new Date(),
+    date: new Date()
 });
 ~~~
 
-Settings that should be applied to multiple views can be specified at the global config level:
+Settings that should be applied to multiple views can be specified at the global `config`:
 
-~~~jsx
+~~~jsx {2-16}
 const calendar = new eventCalendar.EventCalendar("#root", {
     config: {
         timeRange: [8, 17],
@@ -92,14 +92,14 @@ const calendar = new eventCalendar.EventCalendar("#root", {
             }
         ]
     },
-    events: [],
-    date: new Date(),
+    events: [/* event data */],
+    date: new Date()
 });
 ~~~
 
-And vice-versa, view-level settings can override the global config:
+And vice-versa, view-level settings can override the global `config`:
 
-~~~jsx
+~~~jsx {14-17}
 const calendar = new eventCalendar.EventCalendar("#root", {
     config: {
         timeRange: [8, 17],
@@ -121,20 +121,22 @@ const calendar = new eventCalendar.EventCalendar("#root", {
         ]
     },
     events: [],
-    date: new Date(),
+    date: new Date()
 });
 ~~~
 
-For more details about the `config` object, please refer to the [Configuration Guide](guides/configuration.md/#configuring-view-modes)
+For more details about the `config` object, please refer to the [Configuration Guide](guides/configuration.md/#configuring-view-modes).
 
 ## Built-in Views
 
-Below is a detailed list of default views, including their configuration options.
+Below is the detailed list of default views, including their configuration options.
 
 ### Day
 
 The **Day** view shows events for a single day.
 
+#### Short configuration
+
 ~~~jsx
 config: {
     views: [
@@ -143,39 +145,45 @@ config: {
 }
 ~~~
 
-Extended configuration:
+#### Extended configuration
 
 ~~~jsx
-{
-    id: "day",
-    label: "Day",
-    layout: "day",
-    config: {
-        dateTitle?: (currentDate: Date, bounds: [Date, Date]) => string;
-        getBounds?: (date: Date, config: Config) => [Date, Date];
-        getNext?: (date: Date, config: Config) => Date;
-        getPrev?: (date: Date, config: Config) => Date;
-
-        cellCss?: (date: Date) => string;
-        template?: (event: Event) => string;
-
-        eventHeight?: number;
-        timeRange?: [number, number];
-        timeStep?: number;
-        eventsOverlay?: false;
-        eventVerticalSpace?: number;
-        eventHorizontalSpace?: string;
-        columnPadding?: string;
-        weekStartsOn?: number;
-    }
+config: {
+    views: [
+        {
+            id: "day",
+            label: "Day",
+            layout: "day",
+            config: {
+                dateTitle?: (currentDate: Date, bounds: [Date, Date]) => string;
+                getBounds?: (date: Date, config: Config) => [Date, Date];
+                getNext?: (date: Date, config: Config) => Date;
+                getPrev?: (date: Date, config: Config) => Date;
+
+                cellCss?: (date: Date) => string;
+                template?: (event: Event) => string;
+
+                eventHeight?: number;
+                timeRange?: [number, number];
+                timeStep?: number;
+                eventsOverlay?: false;
+                eventVerticalSpace?: number;
+                eventHorizontalSpace?: string;
+                columnPadding?: string;
+                weekStartsOn?: number;
+            }
+        }
+    ]
 }
 ~~~
 
-You can find more detailed description of the configuration object [here](api/config/js_eventcalendar_config_config.md/#:~:text=To%20configure%20a%20custom%20view%20mode%20(or%20modes)%2C%20you%20can%20specify%20the%20following%20parameters%3A)
+You can find more detailed description of the configuration object [here](api/config/js_eventcalendar_config_config.md).
 
 ### Week
 
-The **Week** view displays events for an entire week:
+The **Week** view displays events for the entire week.
+
+#### Short configuration
 
 ~~~jsx
 config: {
@@ -185,75 +193,85 @@ config: {
 }
 ~~~
 
-Extended configuration:
+#### Extended configuration
 
 ~~~jsx
-{
-    id: "week",
-    label: "Week",
-    layout: "week",
-    config: {
-        dateTitle?: (currentDate: Date, bounds: [Date, Date]) => string;
-        getBounds?: (date: Date, config: Config) => [Date, Date];
-        getNext?: (date: Date, config: Config) => Date;
-        getPrev?: (date: Date, config: Config) => Date;
-
-        cellCss?: (date: Date) => string;
-        template?: (event: Event) => string;
-
-        eventHeight?: number;
-        timeRange?: [number, number];
-        timeStep?: number;
-        eventsOverlay?: false;
-        eventVerticalSpace?: number;
-        eventHorizontalSpace?: string;
-        columnPadding?: string;
-        weekStartsOn?: number;
-    }
+config: {
+    views: [
+        {
+            id: "week",
+            label: "Week",
+            layout: "week",
+            config: {
+                dateTitle?: (currentDate: Date, bounds: [Date, Date]) => string;
+                getBounds?: (date: Date, config: Config) => [Date, Date];
+                getNext?: (date: Date, config: Config) => Date;
+                getPrev?: (date: Date, config: Config) => Date;
+
+                cellCss?: (date: Date) => string;
+                template?: (event: Event) => string;
+
+                eventHeight?: number;
+                timeRange?: [number, number];
+                timeStep?: number;
+                eventsOverlay?: false;
+                eventVerticalSpace?: number;
+                eventHorizontalSpace?: string;
+                columnPadding?: string;
+                weekStartsOn?: number;
+            }
+        }
+    ]
 }
 ~~~
 
-
-You can find more detailed description of the configuration object [here](api/config/js_eventcalendar_config_config.md/#:~:text=To%20configure%20a%20custom%20view%20mode%20(or%20modes)%2C%20you%20can%20specify%20the%20following%20parameters%3A)
+You can find more detailed description of the configuration object [here](api/config/js_eventcalendar_config_config.md).
 
 ### Month
 
-The **Month** view organizes events by calendar months:
+The **Month** view displays events for the entire month.
+
+#### Short configuration
 
-```
+~~~jsx
 config: {
     views: [
         { id: "month", label: "Month", layout: "month" }
     ]
 }
-```
+~~~
 
-Extended configuration:
+#### Extended configuration
 
 ~~~jsx
-{
-    id: "month",
-    label: "Month",
-    layout: "month",
-    config: {
-        dateTitle?: (currentDate: Date, bounds: [Date, Date]) => string;
-        getBounds?: (date: Date, config: Config) => [Date, Date];
-        getNext?: (date: Date, config: Config) => Date;
-        getPrev?: (date: Date, config: Config) => Date;
-
-        weekStartsOn?: number;
-        maxEventsPerCell?: number;
-        eventVerticalSpace?: number;
-    }
+config: {
+    views: [
+        {
+            id: "month",
+            label: "Month",
+            layout: "month",
+            config: {
+                dateTitle?: (currentDate: Date, bounds: [Date, Date]) => string;
+                getBounds?: (date: Date, config: Config) => [Date, Date];
+                getNext?: (date: Date, config: Config) => Date;
+                getPrev?: (date: Date, config: Config) => Date;
+
+                weekStartsOn?: number;
+                maxEventsPerCell?: number;
+                eventVerticalSpace?: number;
+            }
+        }
+    ]
 }
 ~~~
 
-
-You can find more detailed description of the configuration object [here](api/config/js_eventcalendar_config_config.md/#:~:text=To%20configure%20a%20custom%20view%20mode%20(or%20modes)%2C%20you%20can%20specify%20the%20following%20parameters%3A)
+You can find more detailed description of the configuration object [here](api/config/js_eventcalendar_config_config.md).
 
 ### Year
 
-The **Year** view provides an overview of events across a year:
+The **Year** view displays events for the entire year.
+
+#### Short configuration
 
 ~~~jsx
 config: {
@@ -263,29 +281,33 @@ config: {
 }
 ~~~
 
-Extended configuration:
+#### Extended configuration
 
 ~~~jsx
-{
-    id: "year",
-    label: "Year",
-    layout: "year",
-    config: {
-        dateTitle?: (currentDate: Date, bounds: [Date, Date]) => string;
-        getBounds?: (date: Date, config: Config) => [Date, Date];
-        getNext?: (date: Date, config: Config) => Date;
-        getPrev?: (date: Date, config: Config) => Date;
-    }
+config: {
+    views: [
+        {
+            id: "year",
+            label: "Year",
+            layout: "year",
+            config: {
+                dateTitle?: (currentDate: Date, bounds: [Date, Date]) => string;
+                getBounds?: (date: Date, config: Config) => [Date, Date];
+                getNext?: (date: Date, config: Config) => Date;
+                getPrev?: (date: Date, config: Config) => Date;
+            }
+        }
+    ]
 }
 ~~~
 
-
-You can find more detailed description of the configuration object [here](api/config/js_eventcalendar_config_config.md/#:~:text=To%20configure%20a%20custom%20view%20mode%20(or%20modes)%2C%20you%20can%20specify%20the%20following%20parameters%3A)
+You can find more detailed description of the configuration object [here](api/config/js_eventcalendar_config_config.md).
 
 ### Agenda
 
-The **Agenda** view lists upcoming events starting from the current date:
+The **Agenda** view lists upcoming events starting from the current date.
 
+#### Short configuration
 
 ~~~jsx
 config: {
@@ -295,29 +317,33 @@ config: {
 }
 ~~~
 
-Extended configuration:
+#### Extended configuration
 
 ~~~jsx
-{
-    id: "agenda",
-    label: "Agenda",
-    layout: "agenda",
-    config: {
-        dateTitle?: (currentDate: Date, bounds: [Date, Date]) => string;
-        getBounds?: (date: Date, config: Config) => [Date, Date];
-        getNext?: (date: Date, config: Config) => Date;
-        getPrev?: (date: Date, config: Config) => Date;
-    }
+config: {
+    views: [
+        {
+            id: "agenda",
+            label: "Agenda",
+            layout: "agenda",
+            config: {
+                dateTitle?: (currentDate: Date, bounds: [Date, Date]) => string;
+                getBounds?: (date: Date, config: Config) => [Date, Date];
+                getNext?: (date: Date, config: Config) => Date;
+                getPrev?: (date: Date, config: Config) => Date;
+            }
+        }
+    ]
 }
 ~~~
 
-
-You can find more detailed description of the configuration object [here](api/config/js_eventcalendar_config_config.md/#:~:text=To%20configure%20a%20custom%20view%20mode%20(or%20modes)%2C%20you%20can%20specify%20the%20following%20parameters%3A)
+You can find more detailed description of the configuration object [here](api/config/js_eventcalendar_config_config.md).
 
 ### Timeline
 
-The **Timeline**  view is ideal for visualizing events across multiple resources or time units:
+The **Timeline** view is ideal for visualizing events across multiple resources or time units.
 
+#### Short configuration
 
 ~~~jsx
 config: {
@@ -327,31 +353,35 @@ config: {
 }
 ~~~
 
-Extended configuration:
+#### Extended configuration
 
 ~~~jsx
-{
-    id: "timeline",
-    label: "Timeline",
-    layout: "timeline",
-    config: {
-        dateTitle?: (currentDate: Date, bounds: [Date, Date]) => string;
-        getBounds?: (date: Date, config: Config) => [Date, Date];
-        getNext?: (date: Date, config: Config) => Date;
-        getPrev?: (date: Date, config: Config) => Date;
-
-        colsCount?: number;
-        colsWidth?: number;
-        minEventWidth?: number;
-        eventVerticalSpace?: number;
-        minSectionHeight?: number;
-        sectionWidth?: number;
-        step?: [number, "day" | "week" | "month" | "year" | "hour" | "minute"];
-        header?: ITimelineHeader[];
-        sections?: ISection[];
-        key?: string;
-        unassignedCol?: boolean;
-    }
+config: {
+    views: [
+        {
+            id: "timeline",
+            label: "Timeline",
+            layout: "timeline",
+            config: {
+                dateTitle?: (currentDate: Date, bounds: [Date, Date]) => string;
+                getBounds?: (date: Date, config: Config) => [Date, Date];
+                getNext?: (date: Date, config: Config) => Date;
+                getPrev?: (date: Date, config: Config) => Date;
+
+                colsCount?: number;
+                colsWidth?: number;
+                minEventWidth?: number;
+                eventVerticalSpace?: number;
+                minSectionHeight?: number;
+                sectionWidth?: number;
+                step?: [number, "day" | "week" | "month" | "year" | "hour" | "minute"];
+                header?: ITimelineHeader[];
+                sections?: ISection[];
+                key?: string;
+                unassignedCol?: boolean;
+            }
+        }
+    ]
 }
 ~~~
 
@@ -371,14 +401,13 @@ export interface ISection {
 }
 ~~~
 
-
-You can find more detailed description of the configuration object [here](api/config/js_eventcalendar_config_config.md/#:~:text=To%20configure%20a%20custom%20view%20mode%20(or%20modes)%2C%20you%20can%20specify%20the%20following%20parameters%3A)
+You can find more detailed description of the configuration object [here](api/config/js_eventcalendar_config_config.md).
 
 ### Custom Views
 
 Custom views can be created by extending one of the built-in views and overriding its configuration.
 
-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`:
+A fundamental customization available for all views. This is achieved by defining the `getBounds`, `getNext`, and `getPrev` properties within the views `config`:
 
 - `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..
 - `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. 
@@ -388,7 +417,7 @@ The result of the `getNext` and `getPrev` functions is passed to the `getBounds`
 
 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.
 
-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.
+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**.
 
 ~~~jsx
 const { dateFns, EventCalendar } = eventCalendar;
@@ -415,10 +444,9 @@ const calendar = new EventCalendar("#root", {
 
 **Related sample:** [Event Calendar. 5-Day Workweek View](https://snippet.dhtmlx.com/af32gon8?tag=event_calendar)
 
+Note 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 to implement custom navigation behavior, you can override these methods.
 
-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.
-
-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`.
+Consider another example, Two-Week View with the appropriate navigation step. In this case you need to override the navigation methods (`getNext()` and `getPrev()`) in addition to `getBounds()`.
 
 ~~~jsx
 const { dateFns, EventCalendar } = eventCalendar;
diff --git a/sidebars.js b/sidebars.js
index 2341bee..44739e8 100644
--- a/sidebars.js
+++ b/sidebars.js
@@ -319,8 +319,8 @@ module.exports = {
             },
             items: [
                 "guides/initialization",
-                "guides/views",
-                "guides/configuration",
+                "guides/configuration", // Common Configuration
+                "guides/views", // View Configuration
                 "guides/customization",
                 "guides/stylization",
                 "guides/localization",

From eb84f2530e88b9cbde8572aab3b9b1f6a7a5b93a Mon Sep 17 00:00:00 2001
From: Serhii Pylypchuk <pylypchukserhii1991@gmail.com>
Date: Wed, 11 Dec 2024 12:13:46 +0400
Subject: [PATCH 09/10] [update] Whats new

---
 docs/news/whats_new.md | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/docs/news/whats_new.md b/docs/news/whats_new.md
index e2d567a..848656a 100644
--- a/docs/news/whats_new.md
+++ b/docs/news/whats_new.md
@@ -12,18 +12,16 @@ If you are updating Event Calendar from an older version, check [Migration to ne
 
 Released on December Day, 2024
 
-
 ### New functionality
 
-- An ability to create [custom views](guides/views.md/#custom-views) from all [built-in views](guides/views.md/#built-in-views)
+- An ability to create [custom views](guides/views.md/#custom-views) based on [built-in views](guides/views.md/#built-in-views)
 
 ### Updates
 
-- Improve UI for readonly calendars and events
+- Improve UI for readonly calendars and events. Use the [`config.highlightReadonly`](../../api/config/js_eventcalendar_config_config) property to manage highlighting the readonly events
 - Improve Calendar Info popup
 - Events lasting a few hours that span across 2 days are shown as all-day events
 
-
 ## Version 2.2.8
 
 Released on November 29, 2024

From fead25c95da1c5a56cc7baf79eedf9bd92cdfafc Mon Sep 17 00:00:00 2001
From: Serhii Pylypchuk <pylypchukserhii1991@gmail.com>
Date: Wed, 11 Dec 2024 14:07:50 +0400
Subject: [PATCH 10/10] [update] release date

---
 docs/news/whats_new.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/news/whats_new.md b/docs/news/whats_new.md
index 848656a..5089743 100644
--- a/docs/news/whats_new.md
+++ b/docs/news/whats_new.md
@@ -10,7 +10,7 @@ If you are updating Event Calendar from an older version, check [Migration to ne
 
 ## Version 2.3.0
 
-Released on December Day, 2024
+Released on December 11, 2024
 
 ### New functionality