Merge pull request #37 from DHTMLX/sp-next-v2.3.0

[update] Whats new and changes before release v2.3.0

Author: serhiipylypchuk1991

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
@@ -167,7 +169,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" | "week" | "day" | "agenda" | "timeline"*
     - `config` - (optional) an object of the custom view mode settings
 
 :::note
@@ -217,11 +219,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)];
+            },
+            //...
+        }
+    }
 ]
 ~~~
 
@@ -251,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
 
@@ -291,12 +300,11 @@ sections: [
 ~~~jsx {}
 const defaultWeekConfig = {
     eventHorizontalSpace: 3,
-    columnPadding: "8px",
-    
+    columnPadding: "8px"  
 };
 
 const defaultMonthConfig = {
-    maxEventsPerCell: 4,
+    maxEventsPerCell: 4
 };
 
 const defaultTimelineConfig = {
@@ -322,7 +330,7 @@ const defaultTimelineConfig = {
         { id: "8", label: "Section 8" },
         { id: "9", label: "Section 9" },
     ],
-    unassignedCol: false,
+    unassignedCol: false
 };
 
 const defaultConfig = {
@@ -337,6 +345,7 @@ const defaultConfig = {
     eventsOverlay: false,
     autoSave: true,
     readonly: false,
+    highlightReadonly: true,
 
     tableHeaderHeight: 32,
     eventHeight: 24,
@@ -369,7 +378,7 @@ const defaultConfig = {
         },
         { id: "year", label: "Year", layout: "year" },
         { id: "agenda", label: "Agenda", layout: "agenda" },
-    ],
+    ]
 };
 ~~~
 
@@ -380,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,
@@ -429,7 +439,7 @@ new eventCalendar.EventCalendar("#root", {
                 },
             },
             // other custom views config
-        ],
+        ]
     },
     // other configuration parameters
 });
@@ -442,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

docs/api/config/js_eventcalendar_templates_config.md

@@ -63,9 +63,10 @@ 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.EventCalendar("#root", { // create Event Calendar
+new EventCalendar("#root", { // create Event Calendar
     templates: {
         // the event template of the "Week" and "Day" modes
         weekEvent: ({ event, calendar }) => {

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)

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: