[update] Migration doc from v2.3.1 to v3.1.0

.github/workflows/main.yml

@@ -18,13 +18,13 @@ jobs:
     # Steps represent a sequence of tasks that will be executed as part of the job
     steps:
       # Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v4
       - id: vars
         run: echo ::set-output name=short_ref::${GITHUB_REF#refs/*/}
 
-      - uses: actions/setup-node@v2
+      - uses: actions/setup-node@v4
         with:
-          node-version: '16.15.0'
+          node-version: '18.19.0'
 
       - run: yarn install
       - run: yarn build

docs/guides/configuration.md

@@ -31,15 +31,15 @@ To configure the appearance and functionality of *timetable grid*, you can use t
 
 In the object of the [`config`](api/config/js_eventcalendar_config_config.md) parameter you can manage the following behaviour:
 
-- an ability to create new events by drag-n-drop <code style = {{color: "green"}}>dragCreate: boolean</code>
-- an ability to reschedule events by resizing <code style = {{color: "green"}}>dragResize: boolean</code>
-- an ability to reschedule events by drag-n-drop <code style = {{color: "green"}}>dragMove: boolean</code>
-- an ability to display info popup by click <code style = {{color: "green"}}>eventInfoOnClick: boolean</code>
-- an ability to open editor by double click <code style = {{color: "green"}}>editorOnDblClick: boolean</code>
-- an ability to create new event by double click <code style = {{color: "green"}}>createEventOnDblClick: boolean</code>
-- an ability to overlay events <code style = {{color: "green"}}>eventsOverlay: boolean</code>
-- an ability to auto save the event data (via the editor) <code style = {{color: "green"}}>autoSave: boolean</code>
-- an ability to block all operations with events <code style = {{color: "green"}}>readonly: boolean</code>
+- an ability to create new events by drag-n-drop `dragCreate: boolean`
+- an ability to reschedule events by resizing `dragResize: boolean`
+- an ability to reschedule events by drag-n-drop `dragMove: boolean`
+- an ability to display info popup by click `eventInfoOnClick: boolean`
+- an ability to open editor by double click `editorOnDblClick: boolean`
+- an ability to create new event by double click `createEventOnDblClick: boolean`
+- an ability to overlay events `eventsOverlay: boolean`
+- an ability to auto save the event data (via the editor) `autoSave: boolean`
+- an ability to block all operations with events `readonly: boolean`
 
 ~~~jsx {4-12}
 // create Event Calendar
@@ -64,11 +64,11 @@ new eventCalendar.EventCalendar("#root", {
 
 In the object of the [`config`](api/config/js_eventcalendar_config_config.md) parameter you can also set the grid appearance:
 
-- a height of the grid header <code style = {{color: "green"}}>tableHeaderHeight: number</code>
-- a height of the events <code style = {{color: "green"}}>eventHeight: number</code>
-- a step of moving events via drag-n-drop <code style = {{color: "green"}}>timeStep: number</code>
-- a start and end time of day <code style = {{color: "green"}}>timeRange: [number, number]</code>
-- a duration of the new created events by default <code style = {{color: "green"}}>defaultEventDuration: number</code>
+- a height of the grid header `tableHeaderHeight: number`
+- a height of the events `eventHeight: number`
+- a step of moving events via drag-n-drop `timeStep: number`
+- a start and end time of day `timeRange: [number, number]`
+- a duration of the new created events by default `defaultEventDuration: number`
 
 ~~~jsx {3-7}
 config: {
@@ -89,14 +89,14 @@ In the object of the [`config`](api/config/js_eventcalendar_config_config.md) pa
 
 The **Day** and **Week** view modes can be set in the following way:
 
-- a height of multievents <code style = {{color: "green"}}>eventHeight: number</code> (*common config for all view modes*) 
-- enables/disables an ability to overlay events <code style = {{color: "green"}}>eventsOverlay: boolean</code>
-- a step of moving events via d-n-d <code style = {{color: "green"}}>timeStep: number</code>
-- an array with start and end time of day <code style = {{color: "green"}}>timeRange: array</code>
-- a column width of the "hour" scale <code style = {{color: "green"}}>hourScaleWidth: number</code>
-- a row height of the "hour" scale <code style = {{color: "green"}}>hourHeight: number</code>
-- a space between events (px) <code style = {{color: "green"}}>eventMargin: string</code>
-- a right padding of the grid column (px) <code style = {{color: "green"}}>columnPadding: string</code>
+- a height of multievents `eventHeight: number` (*common config for all view modes*) 
+- enables/disables an ability to overlay events `eventsOverlay: boolean`
+- a step of moving events via d-n-d `timeStep: number`
+- an array with start and end time of day `timeRange: array`
+- a column width of the "hour" scale `hourScaleWidth: number`
+- a row height of the "hour" scale `hourHeight: number`
+- a space between events (px) `eventMargin: string`
+- a right padding of the grid column (px) `columnPadding: string`
 
 ~~~jsx {3-10,15-29}
 // settings of the "Day" and "Week" modes
@@ -133,9 +133,9 @@ config: {
 
 The **Month** view mode can be set in the following way:
 
-- a height of multievents <code style = {{color: "green"}}>eventHeight: number</code> (*common config for all view modes*)
-- a min height of a grid cell <code style = {{color: "green"}}>dayHeight: number</code>
-- a max number of events per cell <code style = {{color: "green"}}>maxEventsPerCell: number</code>
+- a height of multievents `eventHeight: number` (*common config for all view modes*)
+- a min height of a grid cell `dayHeight: number`
+- a max number of events per cell `maxEventsPerCell: number`
 
 ~~~jsx {3-5,10-18}
 // settings of the "Month" mode
@@ -501,9 +501,9 @@ new eventCalendar.EventCalendar("#root", {
 
 To configure a sidebar state, you can use the [`sidebar`](api/config/js_eventcalendar_sidebar_config.md) property. There are 3 available states:
 
-- `sidebar:` <code style = {{color: "green"}}>{ show: true }</code> - the sidebar is shown (a toggle button for switching sidebar is shown)
-- `sidebar:` <code style = {{color: "green"}}>{ show: false }</code> - the sidebar is hidden (a toggle button for switching sidebar is shown)
-- `sidebar:` <code style = {{color: "green"}}>null</code> - the sidebar and toggle button are hidden
+- `sidebar: { show: true }` - the sidebar is shown (a toggle button for switching sidebar is shown)
+- `sidebar: { show: false }` - the sidebar is hidden (a toggle button for switching sidebar is shown)
+- `sidebar: null` - the sidebar and toggle button are hidden
 
 To provide the initial data for calendars (event types) located on the sidebar, you can use the [`calendars`](api/config/js_eventcalendar_calendars_config.md) property
 
@@ -543,13 +543,13 @@ new eventCalendar.EventCalendar("#root", {
 
 To set an initial view mode, you can use the [`mode`](api/config/js_eventcalendar_mode_config.md) property. There are 6 default view modes:
 
-- <code style = {{color: "green"}}>mode: "day"</code> - the "Day" view mode
-- <code style = {{color: "green"}}>mode: "week"</code> - the "Week" view mode
-- <code style = {{color: "green"}}>mode: "month"</code> - the "Month" view mode
-- <code style = {{color: "green"}}>mode: "year"</code> - the "Year" view mode
-- <code style = {{color: "green"}}>mode: "agenda"</code> - the "Agenda" view mode
-- <code style = {{color: "green"}}>mode: "timeline"</code> - the "Timeline" view mode
-- <code style = {{color: "green"}}>mode: custom_view_id</code> - the custom view mode
+- `mode: "day"` - the "Day" view mode
+- `mode: "week"` - the "Week" view mode
+- `mode: "month"` - the "Month" view mode
+- `mode: "year"` - the "Year" view mode
+- `mode: "agenda"` - the "Agenda" view mode
+- `mode: "timeline"` - the "Timeline" view mode
+- `mode: custom_view_id` - the custom view mode
 
 ~~~jsx {3}
 // create Event Calendar
@@ -567,7 +567,7 @@ Use the `config.views` property to set a custom view mode
 
 To set (select) an initial date, you can use the [`date`](api/config/js_eventcalendar_date_config.md) property:
 
-- <code style = {{color: "green"}}>date: new Date("2022-04-28 09:00:00")</code> - an initially selected date
+- `date: new Date("2022-04-28 09:00:00")` - an initially selected date
 
 ~~~jsx {3}
 // create Event Calendar

docusaurus.config.js

@@ -126,8 +126,8 @@ const onAfterDataTransformation = (data) => {
 // @ts-check
 // Note: type annotations allow type checking and IDEs autocompletion
 
-const lightCodeTheme = require('prism-react-renderer/themes/github');
-const darkCodeTheme = require('prism-react-renderer/themes/dracula');
+//const lightCodeTheme = require('prism-react-renderer/themes/github');
+//const darkCodeTheme = require('prism-react-renderer/themes/dracula');
 
 /** @type {import('@docusaurus/types').Config} */
 const config = {
@@ -302,8 +302,8 @@ const config = {
 			],
 		},
     	prism: {
-			theme: lightCodeTheme,
-			darkTheme: darkCodeTheme,
+			//theme: lightCodeTheme,
+			//darkTheme: darkCodeTheme,
 		},
 		/*algolia: {
 			// This is a read-only, search-only key served directly by the front-end, managed by Algolia via their

package.json

@@ -13,15 +13,16 @@
     "normalizeLink": "cd plugins && node samplesLinksNormalize.js"
   },
   "dependencies": {
-    "@docusaurus/core": "^2.4.1",
-    "@docusaurus/preset-classic": "^2.4.1",
+    "@docusaurus/core": "^3.1.0",
+    "@docusaurus/preset-classic": "^3.1.0",
     "@easyops-cn/docusaurus-search-local": "^0.27.0",
-    "@mdx-js/react": "^1.6.21",
+    "@mdx-js/react": "^3.0.0",
     "@svgr/webpack": "^5.5.0",
     "clsx": "^1.1.1",
     "docusaurus-gtm-plugin": "^0.0.2",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "prism-react-renderer": "^2.1.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   },
   "browserslist": {
     "production": [
@@ -36,8 +37,13 @@
     ]
   },
   "devDependencies": {
+    "@docusaurus/module-type-aliases": "3.0.0",
+    "@docusaurus/types": "3.0.0",
     "dhx-md-data-parser": "file:local_modules/dhx-md-data-parser",
     "docusaurus-plugin-sass": "^0.1.11",
     "webpack-cli": "^4.4.0"
+  },
+  "engines": {
+    "node": ">=18.0"
   }
 }

src/css/custom.css

@@ -25,6 +25,7 @@
   --ifm-list-item-margin: 0.7rem;
 }
 
+/* deprecated from v3.1
 html[data-theme=dark] {
   --ifm-color-primary: #26adf7;
 }
@@ -35,13 +36,15 @@ html[data-theme=dark] {
   margin: 0 calc(-1 * var(--ifm-pre-padding));
   padding: 0 var(--ifm-pre-padding);
 }
+*/
 
 /* If you have a different syntax highlighting theme for dark mode. */
-
+/* deprecated from v3.1
 html[data-theme='dark'] .docusaurus-highlight-code-line {
   background-color: rgb(122, 124, 126);
-  /* Color which works with dark mode syntax highlighting theme */
+  Color which works with dark mode syntax highlighting theme
 }
+*/
 
 /* typography */
 
@@ -157,10 +160,25 @@ code {
 /* end small code block */
 
 /* styles for block of code */
-
-.token-line.theme-code-block-highlighted-line{ /* added after updating to 2.0.0-beta.19 */
+/*
+.token-line.theme-code-block-highlighted-line{ added after updating to 2.0.0-beta.19 
   background-color: rgb(156 159 166 / 30%);
 }
+*/
+
+/* specify code box background */
+.codeBlockLines_node_modules-\@docusaurus-theme-classic-lib-theme-CodeBlock-Content-styles-module {
+  /*background-color: rgb(90, 86, 86);*/
+}
+  /* specify the comment text color */
+span.token.comment {
+  color: rgb(12, 121, 8) !important;
+} 
+
+  /* specify the comment background color */
+span.token-line.theme-code-block-highlighted-line {
+  background-color: rgba(225, 212, 212, 0.075);
+}
 
 /* end styles for block of code */
 
@@ -223,4 +241,3 @@ table th:first-child {
 }
 
 /* end styles for infoblock */
-