diff --git a/ej2-vue-toc.html b/ej2-vue-toc.html
index 2a0021267..faf88c2eb 100644
--- a/ej2-vue-toc.html
+++ b/ej2-vue-toc.html
@@ -73,7 +73,7 @@
     <li><a href="/ej2-vue/appearance/size-modes">Size-Modes</a></li>
     <li><a href="/ej2-vue/appearance/icons">Icons</a></li>
     <li><a href="/ej2-vue/appearance/theme-studio">Theme Studio</a></li>
-    <li><a href="/ej2-vue/appearance/material3">Material 3 Theme</a></li>
+    <li><a href="/ej2-vue/appearance/css-variables">CSS Variables</a></li>
     </ul>
 </li>
 <li>
@@ -2685,9 +2685,9 @@
 </li>
 <li><a href="https://ej2.syncfusion.com/vue/documentation/api/tooltip/">API Reference</a></li>
 </ul>
-</li><li>
-    <a href="/ej2-vue/treegrid/overview">TreeGrid</a>
+</li><li>TreeGrid
 <ul>
+<li><a href="/ej2-vue/treegrid/overview">Overview</a></li>
 <li>Getting Started
 <ul>
 <li><a href="/ej2-vue/treegrid/getting-started">Vue 2</a></li>
diff --git a/ej2-vue/appearance/css-variables.md b/ej2-vue/appearance/css-variables.md
new file mode 100644
index 000000000..b65d406fb
--- /dev/null
+++ b/ej2-vue/appearance/css-variables.md
@@ -0,0 +1,137 @@
+---
+layout: post
+title: Themes using CSS Variables in Vue Appearance component | Syncfusion
+description: Learn here all about Themes using CSS Variables in Syncfusion Vue Appearance component of Syncfusion Essential JS 2 and more.
+control: Themes using CSS Variables 
+platform: ej2-vue
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# About CSS variables in themes
+
+[CSS variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties), also known as custom properties, are entities defined by CSS authors that contain specific values that can be reused throughout a CSS file. They are identified by their name, which must begin with two hyphens (--) followed by an identifier. These variables can be assigned any valid CSS value, such as colors, lengths, or fonts. To retrieve the value of a CSS variable, the var() function is used.
+
+Syncfusion currently offers two modern and highly customizable themes using CSS variables. These themes are designed to provide a consistent and visually appealing look and feel across all Syncfusion components. The themes available are:
+
+* Material 3 Theme
+* Fluent 2 Theme
+
+## CSS themes - Syncfusion Vue components
+
+[Material 3](https://m3.material.io/) and [Fluent 2](https://fluent2.microsoft.design/get-started/whatisnew) themes have been introduced across all EJ2 Controls, featuring both `light` and `dark` variants. This themes utilizes `CSS variables` to allow easy customization of control colors in CSS format. With this implementation, users can seamlessly switch between light and dark color schemes, providing a flexible solution to meet their preferences and application needs.
+
+> Kindly note that in the Material 3 theme, CSS variables with rgb() values are used for color variables. The use of hex values in this context may lead to improper functionality. For example, in previous versions of the Material theme or other themes, the primary color variable was defined as follows: $primary: #6200ee;. However, in the Material 3 theme, the primary color variable is defined as follows: --color-sf-primary: 98, 0, 238;.
+
+### Utilization of CSS variables in modern themes
+
+Modern themes like Material 3 and Fluent 2 incorporate support for CSS variables, where `Material 3` utilizes `rgb()` values for customizing colors and `Fluent 2` uses `hex` values for color customization. For more information you can refer this [documentation](./theme#syncfusion-material-3-theme) for color variables of our themes.  The examples below shows CSS variables with their values used for the respective themes.
+
+{% tabs %}
+{% highlight ts tabtitle="material3.css" %}
+{% include code-snippet/common/css-value-cs1/material3.css %}
+{% endhighlight %}
+{% highlight ts tabtitle="fluent2.css" %}
+{% include code-snippet/common/css-value-cs1/fluent2.css %}
+{% endhighlight %}
+{% endtabs %}
+
+### How to get these themes?
+
+To access themes provided by Syncfusion, you have two primary options,
+
+* Package
+* CDN links
+
+|    |  Light  |  Dark  |
+|-----------|---------|--------|
+|Package  | [Material 3 Light](https://www.npmjs.com/package/@syncfusion/ej2-material3-theme) | [Material 3 Dark](https://www.npmjs.com/package/@syncfusion/ej2-material3-dark-theme) |
+|  | [Fluent 2 Light](https://www.npmjs.com/package/@syncfusion/ej2-fluent2-theme) | [Fluent 2 Dark](https://www.npmjs.com/package/@syncfusion/ej2-fluent2-dark-theme) |
+| CDN  | [Material 3 Light](https://cdn.syncfusion.com/ej2/24.2.8/material3.css)  |  [Material 3 Dark](https://cdn.syncfusion.com/ej2/24.2.8/material3-dark.css)  |
+|  |  [Fluent 2 light](https://cdn.syncfusion.com/ej2/26.1.35/fluent2.css)  |  [Fluent 2 Dark](https://cdn.syncfusion.com/ej2/26.1.35/fluent2-dark.css)  |
+
+### Color Customization in themes
+
+CSS variables allows you to dynamically change color values in real-time using JavaScript. This flexibility enables you to create interactive experiences where colors can adjust based on user interactions or other dynamic factors.
+
+#### Customization using CSS
+
+Here you can find the example for `Material 3` customization using CSS class.
+
+{% tabs %}
+{% highlight html tabtitle="app.vue" %}
+{% include code-snippet/common/material3-cs2/app.vue %}
+{% endhighlight %}
+{% endtabs %}
+        
+{% previewsample "page.domainurl/code-snippet/common/material3-cs2" %}
+
+**Default primary value**
+
+![default primary value](images/material3-default.png)
+
+**Customized primary value**
+
+![customized primary value](images/material3-customize.png)
+
+Example for `Fluent 2` customization using CSS class.
+
+{% tabs %}
+{% highlight html tabtitle="app.vue" %}
+{% include code-snippet/common/fluent2-cs2/app.vue %}
+{% endhighlight %}
+{% endtabs %}
+        
+{% previewsample "page.domainurl/code-snippet/common/fluent2-cs2" %}
+
+**Default primary value**
+
+![default primary value](images/fluent2-default.png)
+
+**Customized primary value**
+
+![customized primary value](images/fluent2-customize.png)
+
+With this CSS variable support, you can effortlessly customize the color variable values for Syncfusion Vue Components.
+
+### Switching Light and Dark mode with CSS variables
+
+Switching between modes has become easier with the updated modern themes, which offer Light and Dark variants. In both the `Material 3` and `Fluent 2` light themes, there are distinct class variables for light and dark modes in a `single file`, providing flexibility for seamless switching between the two modes within your application.
+
+{% tabs %}
+{% highlight html tabtitle="app.vue" %}
+{% include code-snippet/common/material3-cs1/app.vue %}
+{% endhighlight %}
+{% endtabs %}
+        
+{% previewsample "page.domainurl/code-snippet/common/material3-cs1" %}
+
+### Mode switching in Fluent 2 theme
+
+Similar to `Material 3`, we offer both Light and Dark variants with `Fluent 2`. In the Fluent 2 theme, there are distinct class variables for light and dark modes, as shown in the preview below.
+
+{% tabs %}
+{% highlight html tabtitle="app.vue" %}
+{% include code-snippet/common/fluent2-cs1/app.vue %}
+{% endhighlight %}
+{% endtabs %}
+        
+{% previewsample "page.domainurl/code-snippet/common/fluent2-cs1" %}
+
+### How to switch dark mode?
+
+To activate dark mode, just append the `e-dark-mode` class to the body section of your application for both `Material 3` and `Fluent 2` theme. Once applied, the theme seamlessly switches to dark mode. Please refer to the example image below for visual guidance.
+
+`Material 3` dark mode
+
+![dark mode](images/material3-dark.png)
+
+`Fluent 2` dark mode
+
+![dark mode](images/fluent2-dark.png)
+
+### ThemeStudio Application
+
+The ThemeStudio application now includes seamless integration with the Material 3 and Fluent 2 themes, offering a comprehensive solution for customization requirements. This enhancement enables users to effortlessly customize and personalize their themes.
+
+Access the Syncfusion ThemeStudio application, featuring our themes, via the following link: [Link to Syncfusion ThemeStudio](https://ej2.syncfusion.com/themestudio/?theme=material3)
\ No newline at end of file
diff --git a/ej2-vue/appearance/images/fluent2-customize.png b/ej2-vue/appearance/images/fluent2-customize.png
new file mode 100644
index 000000000..6f88875a3
Binary files /dev/null and b/ej2-vue/appearance/images/fluent2-customize.png differ
diff --git a/ej2-vue/appearance/images/fluent2-dark.png b/ej2-vue/appearance/images/fluent2-dark.png
new file mode 100644
index 000000000..91194f761
Binary files /dev/null and b/ej2-vue/appearance/images/fluent2-dark.png differ
diff --git a/ej2-vue/appearance/images/fluent2-default.png b/ej2-vue/appearance/images/fluent2-default.png
new file mode 100644
index 000000000..cbf61b306
Binary files /dev/null and b/ej2-vue/appearance/images/fluent2-default.png differ
diff --git a/ej2-vue/appearance/images/material3-customize.PNG b/ej2-vue/appearance/images/material3-customize.PNG
index 464ad44d0..f8d6df575 100644
Binary files a/ej2-vue/appearance/images/material3-customize.PNG and b/ej2-vue/appearance/images/material3-customize.PNG differ
diff --git a/ej2-vue/appearance/images/material3-dark.PNG b/ej2-vue/appearance/images/material3-dark.PNG
index 47bfba2fb..6c6c9a803 100644
Binary files a/ej2-vue/appearance/images/material3-dark.PNG and b/ej2-vue/appearance/images/material3-dark.PNG differ
diff --git a/ej2-vue/appearance/images/material3-default.PNG b/ej2-vue/appearance/images/material3-default.PNG
index 4201282eb..e140ac8f9 100644
Binary files a/ej2-vue/appearance/images/material3-default.PNG and b/ej2-vue/appearance/images/material3-default.PNG differ
diff --git a/ej2-vue/appearance/material3.md b/ej2-vue/appearance/material3.md
deleted file mode 100644
index f13162500..000000000
--- a/ej2-vue/appearance/material3.md
+++ /dev/null
@@ -1,114 +0,0 @@
----
-layout: post
-title: Material 3 in Vue Appearance component | Syncfusion
-description: Learn here all about Material 3 in Syncfusion Vue Appearance component of Syncfusion Essential JS 2 and more.
-control: Material 3 
-platform: ej2-vue
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Material 3 Theme with CSS Variables
-
-[Material 3](https://m3.material.io/) is the latest version of Google's open-source design system, Material Design. It's the successor to [Material 2](https://m2.material.io/), which is a popular design system used in many apps. It has been specifically designed to align seamlessly with the new visual style and system UI introduced in Android 12 and above.
-
-[CSS variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties), also known as custom properties, are entities defined by CSS authors that contain specific values that can be reused throughout a CSS file. They are identified by their name, which must begin with two hyphens (--) followed by an identifier. These variables can be assigned any valid CSS value, such as colors, lengths, or fonts. To retrieve the value of a CSS variable, the var() function is used.
-
-## Material 3 - Syncfusion Vue Components
-
-Syncfusion has introduced the Material 3 theme across all EJ2 Components, featuring both `light` and `dark` variants. This theme utilizes `CSS variables` to allow easy customization of Component colors in CSS format. With this implementation, users can seamlessly switch between light and dark color schemes, providing a flexible solution to meet their preferences and application needs.
-
-> Kindly note that in the Material 3 theme, Syncfusion utilizes CSS variables with rgb() values for color variables. The use of hex values in this context may lead to improper functionality. For example, in previous versions of the Material theme or other themes, the primary color variable was defined as follows: $primary: #6200ee;. However, in the Material 3 theme, the primary color variable is defined as follows: --color-sf-primary: 98, 0, 238;.
-
-### How does Syncfusion Material 3 theme utilize CSS Variables?
-
-Syncfusion's Material 3 theme incorporates support for CSS variables, utilizing rgb() values for customizing colors. For more information you can refer this [documentation](./theme#syncfusion-material-3-theme) for color variables of material 3 theme.
-
-```CSS
-:root {
-  --color-sf-black: 0, 0, 0;
-  --color-sf-white: 255, 255, 255;
-  --color-sf-primary: 103, 80, 164;
-  --color-sf-primary-container: 234, 221, 255;
-  --color-sf-secondary: 98, 91, 113;
-  --color-sf-secondary-container: 232, 222, 248;
-  --color-sf-tertiary: 125, 82, 96;
-  --color-sf-tertiary-container: 255, 216, 228;
-  --color-sf-surface: 255, 255, 255;
-  --color-sf-surface-variant: 231, 224, 236;
-  --color-sf-background: var(--color-sf-surface);
-  --color-sf-on-primary: 255, 255, 255;
-  --color-sf-on-primary-container: 33, 0, 94;
-  --color-sf-on-secondary: 255, 255, 255;
-  --color-sf-on-secondary-container: 30, 25, 43;
-  --color-sf-on-tertiary: 255, 255, 255;
-}
-```
-
-### How to get the Material 3 theme?
-
-To access the Material 3 theme provided by Syncfusion, you have two primary options,
-
-* Package
-* CDN links
-
-|    |  Light  |  Dark  |
-|-----------|---------|--------|
-|Package  | [Material 3 Light](https://www.npmjs.com/package/@syncfusion/ej2-material3-theme) | [Material 3 Dark](https://www.npmjs.com/package/@syncfusion/ej2-material3-dark-theme) |
-| CDN  |  [Material 3 Light](https://cdn.syncfusion.com/ej2/24.2.8/material3.css)  |  [Material 3 Dark](https://cdn.syncfusion.com/ej2/24.2.8/material3-dark.css)  |
-
-### Color Customization in Material 3
-
-CSS variables allows you to dynamically change color values in real-time using JavaScript. This flexibility enables you to create interactive experiences where colors can adjust based on user interactions or other dynamic factors.
-
-#### Customization using CSS
-
-Here you can find the example for Material 3 customization using Css class.
-
-{% tabs %}
-{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
-{% include code-snippet/common/material3-cs2/app-composition.vue %}
-{% endhighlight %}
-{% highlight html tabtitle="Options API (~/src/App.vue)" %}
-{% include code-snippet/common/material3-cs2/app.vue %}
-{% endhighlight %}
-{% endtabs %}
-        
-{% previewsample "page.domainurl/code-snippet/common/material3-cs2" %}
-
-**Default primary value**
-
-![default primary value](images/material3-default.PNG)
-
-**Customized primary value**
-
-![customized primary value](images/material3-customize.PNG)
-
-With this CSS variable support, you can effortlessly customize the color variable values for Syncfusion Vue Components.
-
-### Material 3 Light Theme
-
-Syncfusion has implemented the Material 3 theme, offering both Light and Dark variants. In the Material 3 light theme, there are distinct class variables for both light and dark modes, providing flexibility for seamless switching between the two modes within your application.
-
-{% tabs %}
-{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
-{% include code-snippet/common/material3-cs1/app-composition.vue %}
-{% endhighlight %}
-{% highlight html tabtitle="Options API (~/src/App.vue)" %}
-{% include code-snippet/common/material3-cs1/app.vue %}
-{% endhighlight %}
-{% endtabs %}
-        
-{% previewsample "page.domainurl/code-snippet/common/material3-cs1" %}
-
-### How to switch dark mode?
-
-With CSS variable support, transitioning between light and dark theme modes has become effortless. To activate dark mode, just append the `e-dark-mode` class to the body section of your application. Once applied, the theme seamlessly switches to dark mode. Please refer to the example image below for visual guidance.
-
-![dark mode](images/material3-dark.PNG)
-
-### ThemeStudio Application
-
-The ThemeStudio application now includes seamless integration with the Material 3 theme, offering a comprehensive solution for customization requirements. This enhancement enables users to effortlessly customize and personalize their themes.
-
-Access the Syncfusion ThemeStudio application, featuring the Material 3 theme, via the following link: [Link to Syncfusion ThemeStudio with Material 3 Theme](https://ej2.syncfusion.com/themestudio/?theme=material3)
\ No newline at end of file
diff --git a/ej2-vue/appearance/theme.md b/ej2-vue/appearance/theme.md
index d255379d5..e9239fec7 100644
--- a/ej2-vue/appearance/theme.md
+++ b/ej2-vue/appearance/theme.md
@@ -14,6 +14,8 @@ The Syncfusion Vue library has provided the below list of in-built themes,
 
 |Theme |Style Sheet Name|
 |--------|--------|
+|Fluent 2 | fluent2.css |
+|Fluent 2 Dark | fluent2-dark.css |
 |Material 3 | material3.css |
 |Material 3 Dark | material3-dark.css |
 |Bootstrap 5 | bootstrap5.css |
@@ -90,6 +92,287 @@ Referring individual control from ej2 package
 
 The below list of common variables used in the Syncfusion Vue library themes for all components. You can change these variables to customize the corresponding theme.
 
+### Syncfusion Fluent 2 theme
+
+<table>
+    <style>
+        .circle-color-indicator {
+            width: 1.5em;
+            height: 1.5em;
+            border-radius: 50%;
+            display: inline-block;
+            border: 1px solid rgba(0, 0, 0, .08);
+            vertical-align: middle;
+        }
+        th, td {
+        text-align: left;
+        padding: 5px 15px;
+        vertical-align: top;
+        }
+    </style>
+    <thead>
+        <tr>
+            <th>Name</th>
+            <th>Value (Default Theme) </th>
+            <th>Value (Dark Theme) </th>
+        </tr>
+    </thead>
+    <tbody>
+        <tr>
+            <td>--color-sf-black</td>
+            <td>
+                <span class="circle-color-indicator" style="background: #000"></span> #000
+            </td>
+            <td>
+                <span class="circle-color-indicator" style="background: #000"></span> #000
+            </td>
+        </tr>
+        <tr>
+            <td>--color-sf-white:</td>
+            <td>
+                <span class="circle-color-indicator" style="background: #fff"></span> #fff
+            </td>
+            <td>
+                <span class="circle-color-indicator" style="background: #fff"></span> #fff
+            </td>
+        </tr>
+        <tr>
+            <td>--color-sf-primary</td>
+            <td>
+                <span class="circle-color-indicator" style="background: #0f6cbd"></span> #0f6cbd
+            </td>
+            <td>
+                <span class="circle-color-indicator" style="background: #115ea3"></span> #115ea3
+            </td>
+        </tr>
+        <tr>
+            <td>--color-sf-primary-text-color</td>
+            <td>
+                <span class="circle-color-indicator" style="background: #fff"></span> #fff
+            </td>
+            <td>
+                <span class="circle-color-indicator" style="background: #fff"></span> #fff
+            </td>
+        </tr>
+        <tr>
+            <td>--color-sf-primary-light</td>
+            <td>
+                <span class="circle-color-indicator" style="background: #b4d6fa"></span> #b4d6fa
+            </td>
+            <td>
+                <span class="circle-color-indicator" style="background: #0e4775"></span> #0e4775
+            </td>
+        </tr>
+        <tr>
+            <td>--color-sf-primary-lighter</td>
+            <td>
+                <span class="circle-color-indicator" style="background: #ebf3fc"></span> #ebf3fc
+            </td>
+            <td>
+                <span class="circle-color-indicator" style="background: #082338"></span> #082338
+            </td>
+        </tr>
+        <tr>
+            <td>--color-sf-primary-dark</td>
+            <td>
+                <span class="circle-color-indicator" style="background: #0f548c"></span> #0f548c
+            </td>
+            <td>
+                <span class="circle-color-indicator" style="background: #62abf5"></span> #62abf5
+            </td>
+        </tr>
+        <tr>
+            <td>--color-sf-primary-darker</td>
+            <td>
+                <span class="circle-color-indicator" style="background: #0c3b5e"></span> #0c3b5e
+            </td>
+            <td>
+                <span class="circle-color-indicator" style="background: #96c6fa"></span> #96c6fa
+            </td>
+        </tr>
+        <tr>
+            <td>--color-sf-success</td>
+            <td>
+                <span class="circle-color-indicator" style="background: #0e700e"></span> #0e700e
+            </td>
+            <td>
+                <span class="circle-color-indicator" style="background: #107c10"></span> #107c10
+            </td>
+        </tr>
+        <tr>
+            <td>--color-sf-info</td>
+            <td>
+                <span class="circle-color-indicator" style="background: #008aa9"></span> #008aa9
+            </td>
+            <td>
+                <span class="circle-color-indicator" style="background: #0099bc"></span> #0099bc
+            </td>
+        </tr>
+        <tr>
+            <td>--color-sf-warning</td>
+            <td>
+                <span class="circle-color-indicator" style="background: #bc4b09"></span> #bc4b09
+            </td>
+            <td>
+                <span class="circle-color-indicator" style="background: #faa06b"></span> #faa06b
+            </td>
+        </tr>
+        <tr>
+            <td>--color-sf-danger</td>
+            <td>
+                <span class="circle-color-indicator" style="background: #d13438"></span> #d13438
+            </td>
+            <td>
+                <span class="circle-color-indicator" style="background: #dc626d"></span> #dc626d
+            </td>
+        </tr>
+        <tr>
+            <td>--color-sf-success-light</td>
+            <td>
+                <span class="circle-color-indicator" style="background: #54b054"></span> #54b054
+            </td>
+            <td>
+                <span class="circle-color-indicator" style="background: #094509"></span> #094509
+            </td>
+        </tr>
+        <tr>
+            <td>--color-sf-info-light</td>
+            <td>
+                <span class="circle-color-indicator" style="background: #56bfd7"></span> #56bfd7
+            </td>
+            <td>
+                <span class="circle-color-indicator" style="background: #005669"></span> #005669
+            </td>
+        </tr>
+        <tr>
+            <td>--color-sf-warning-light</td>
+            <td>
+                <span class="circle-color-indicator" style="background: #fee5d7"></span> #fee5d7
+            </td>
+            <td>
+                <span class="circle-color-indicator" style="background: #4a1e04"></span> #4a1e04
+            </td>
+        </tr>
+        <tr>
+            <td>--color-sf-danger-light</td>
+            <td>
+                <span class="circle-color-indicator" style="background: #eeacb2"></span> #eeacb2
+            </td>
+            <td>
+                <span class="circle-color-indicator" style="background: #6e0811"></span> #6e0811
+            </td>
+        </tr>
+        <tr>
+            <td>--color-sf-success-dark</td>
+            <td>
+                <span class="circle-color-indicator" style="background: #54b054"></span> #54b054
+            </td>
+            <td>
+                <span class="circle-color-indicator" style="background: #c9eac9"></span> #c9eac9
+            </td>
+        </tr>
+        <tr>
+            <td>--color-sf-info-dark</td>
+            <td>
+                <span class="circle-color-indicator" style="background: #56bfd7"></span> #56bfd7
+            </td>
+            <td>
+                <span class="circle-color-indicator" style="background: #cdedf4"></span> #cdedf4
+            </td>
+        </tr>
+        <tr>
+            <td>--color-sf-warning-dark</td>
+            <td>
+                <span class="circle-color-indicator" style="background: #8a3707"></span> #8a3707
+            </td>
+            <td>
+                <span class="circle-color-indicator" style="background: #fee5d7"></span> #fee5d7
+            </td>
+        </tr>
+        <tr>
+            <td>--color-sf-danger-dark</td>
+            <td>
+                <span class="circle-color-indicator" style="background: #6e0811"></span> #6e0811
+            </td>
+            <td>
+                <span class="circle-color-indicator" style="background: #fee5d7"></span> #fee5d7
+            </td>
+        </tr>
+        <tr>
+            <td>--color-sf-success-light-alt</td>
+            <td>
+                <span class="circle-color-indicator" style="background: #f1faf1"></span> #f1faf1
+            </td>
+            <td>
+                <span class="circle-color-indicator" style="background: #052505"></span> #052505
+            </td>
+        </tr>
+        <tr>
+            <td>--color-sf-info-light-alt</td>
+            <td>
+                <span class="circle-color-indicator" style="background: #f2fafc"></span> #f2fafc
+            </td>
+            <td>
+                <span class="circle-color-indicator" style="background: #002e38"></span> #002e38
+            </td>
+        </tr>
+        <tr>
+            <td>--color-sf-warning-light-alt</td>
+            <td>
+                <span class="circle-color-indicator" style="background: #fff9f5"></span> #fff9f5
+            </td>
+            <td>
+                <span class="circle-color-indicator" style="background: #4a1e04"></span> #4a1e04
+            </td>
+        </tr>
+        <tr>
+            <td>--color-sf-danger-light-alt</td>
+            <td>
+                <span class="circle-color-indicator" style="background: #fdf3f4"></span> #fdf3f4
+            </td>
+            <td>
+                <span class="circle-color-indicator" style="background: #3b0509"></span> #3b0509
+            </td>
+        </tr>
+        <tr>
+            <td>--color-sf-badge-warning</td>
+            <td>
+                <span class="circle-color-indicator" style="background: #fde300"></span> #fde300
+            </td>
+            <td>
+                <span class="circle-color-indicator" style="background: #fde300"></span> #fde300
+            </td>
+        </tr>
+        <tr>
+            <td>--color-sf-badge-warning-text</td>
+            <td>
+                <span class="circle-color-indicator" style="background: #847619"></span> #847619
+            </td>
+            <td>
+                <span class="circle-color-indicator" style="background: #fde300"></span> #fde300
+            </td>
+        </tr>
+        <tr>
+            <td>--color-sf-primary-label-color</td>
+            <td>
+                <span class="circle-color-indicator" style="background: #0f6cbd"></span> #0f6cbd
+            </td>
+            <td>
+                <span class="circle-color-indicator" style="background: #479ef5"></span> #479ef5
+            </td>
+        </tr>
+        <tr>
+            <td>--color-sf-primary-cell-selection</td>
+            <td>
+                <span class="circle-color-indicator" style="background: #ebf3fc"></span> #ebf3fc
+            </td>
+            <td>
+                <span class="circle-color-indicator" style="background: #ebf3fc"></span> #ebf3fc
+            </td>
+        </tr>
+    </tbody>
+</table>
+
 ### Syncfusion Material 3 theme
 
 <table>
diff --git a/ej2-vue/code-snippet/common/css-value-cs1/fluent2.css b/ej2-vue/code-snippet/common/css-value-cs1/fluent2.css
new file mode 100644
index 000000000..d84bf167a
--- /dev/null
+++ b/ej2-vue/code-snippet/common/css-value-cs1/fluent2.css
@@ -0,0 +1,23 @@
+/* Hex values of fluent 2 theme */
+:root {
+    --color-sf-black: #000;
+    --color-sf-white: #fff;
+    --color-sf-primary: #0f6cbd;
+    --color-sf-primary-text-color: #fff;
+    --color-sf-primary-light: #b4d6fa;
+    --color-sf-primary-lighter: #ebf3fc;
+    --color-sf-primary-dark: #0f548c;
+    --color-sf-primary-darker: #0c3b5e;
+    --color-sf-success: #0e700e;
+    --color-sf-info: #008aa9;
+    --color-sf-warning: #bc4b09;
+    --color-sf-danger: #d13438;
+    --color-sf-success-light: #54b054;
+    --color-sf-info-light: #56bfd7;
+    --color-sf-warning-light: #fee5d7;
+    --color-sf-danger-light: #eeacb2;
+    --color-sf-success-dark: #54b054;
+    --color-sf-info-dark: #56bfd7;
+    --color-sf-warning-dark: #8a3707;
+    --color-sf-danger-dark: #6e0811;
+  }
\ No newline at end of file
diff --git a/ej2-vue/code-snippet/common/css-value-cs1/material3.css b/ej2-vue/code-snippet/common/css-value-cs1/material3.css
new file mode 100644
index 000000000..fe8b6cba3
--- /dev/null
+++ b/ej2-vue/code-snippet/common/css-value-cs1/material3.css
@@ -0,0 +1,19 @@
+/* rgb() values of material3 theme */
+:root {
+    --color-sf-black: 0, 0, 0;
+    --color-sf-white: 255, 255, 255;
+    --color-sf-primary: 103, 80, 164;
+    --color-sf-primary-container: 234, 221, 255;
+    --color-sf-secondary: 98, 91, 113;
+    --color-sf-secondary-container: 232, 222, 248;
+    --color-sf-tertiary: 125, 82, 96;
+    --color-sf-tertiary-container: 255, 216, 228;
+    --color-sf-surface: 255, 255, 255;
+    --color-sf-surface-variant: 231, 224, 236;
+    --color-sf-background: var(--color-sf-surface);
+    --color-sf-on-primary: 255, 255, 255;
+    --color-sf-on-primary-container: 33, 0, 94;
+    --color-sf-on-secondary: 255, 255, 255;
+    --color-sf-on-secondary-container: 30, 25, 43;
+    --color-sf-on-tertiary: 255, 255, 255;
+  }
\ No newline at end of file
diff --git a/ej2-vue/code-snippet/common/fluent2-cs1/app.vue b/ej2-vue/code-snippet/common/fluent2-cs1/app.vue
new file mode 100644
index 000000000..f9a075dd9
--- /dev/null
+++ b/ej2-vue/code-snippet/common/fluent2-cs1/app.vue
@@ -0,0 +1,38 @@
+<template>
+<div>
+    <ejs-checkbox label='Default'></ejs-checkbox>
+    <ejs-button cssClass='e-primary'>Button</ejs-button>
+    <ejs-button cssClass='e-success'>Button</ejs-button>
+    <ejs-button cssClass='e-info'>Button</ejs-button>
+    <ejs-button cssClass='e-warning'>Button</ejs-button>
+    <ejs-button cssClass='e-danger'>Button</ejs-button>
+</div>
+</template>
+
+<script>
+import Vue from 'vue';
+import { ButtonPlugin } from '@syncfusion/ej2-vue-buttons';
+import { enableRipple } from '@syncfusion/ej2-base';
+
+enableRipple(true);
+Vue.use(CheckBoxPlugin);
+Vue.use(ButtonPlugin);
+
+export default {}
+</script>
+
+<style>
+@import '../node_modules/@syncfusion/ej2-base/styles/fluent2.css';
+@import '../node_modules/@syncfusion/ej2-buttons/styles/fluent2.css';
+
+.e-checkbox-wrapper {
+  margin-top: 18px;
+}
+button {
+  margin: 25px 5px 20px 20px;
+}
+.dark
+{
+  background-color:black;
+}
+</style>
\ No newline at end of file
diff --git a/ej2-vue/code-snippet/common/fluent2-cs1/index.css b/ej2-vue/code-snippet/common/fluent2-cs1/index.css
new file mode 100644
index 000000000..49739ab9f
--- /dev/null
+++ b/ej2-vue/code-snippet/common/fluent2-cs1/index.css
@@ -0,0 +1,11 @@
+button {
+  margin: 25px 5px 20px 20px;
+}
+
+.e-checkbox-wrapper {
+  margin-top: 18px;
+}
+
+.dark {
+  background-color: black;
+}
\ No newline at end of file
diff --git a/ej2-vue/code-snippet/common/fluent2-cs1/index.html b/ej2-vue/code-snippet/common/fluent2-cs1/index.html
new file mode 100644
index 000000000..01a02c4c0
--- /dev/null
+++ b/ej2-vue/code-snippet/common/fluent2-cs1/index.html
@@ -0,0 +1,23 @@
+
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js"></script>
+    <title>EJ2 Vue Sample</title>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="Typescript UI Controls" />
+    <meta name="author" content="Syncfusion" />
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
+    <link href="https://cdn.syncfusion.com/ej2/26.1.35/fluent2.css" rel="stylesheet" />
+    <link href="index.css" rel="stylesheet" />
+    <script src="systemjs.config.js"></script>
+</head>
+
+<body>
+    <div id='app'>Loading....</div>
+</body>
+
+</html>
+
diff --git a/ej2-vue/code-snippet/common/fluent2-cs1/index.js b/ej2-vue/code-snippet/common/fluent2-cs1/index.js
new file mode 100644
index 000000000..111ece594
--- /dev/null
+++ b/ej2-vue/code-snippet/common/fluent2-cs1/index.js
@@ -0,0 +1,37 @@
+
+import Vue from 'vue';
+import { ButtonPlugin } from '@syncfusion/ej2-vue-buttons';
+import { enableRipple } from '@syncfusion/ej2-base';
+import { CheckBoxPlugin } from '@syncfusion/ej2-vue-buttons';
+
+enableRipple(true);
+Vue.use(ButtonPlugin);
+Vue.use(CheckBoxPlugin);
+
+new Vue({
+    el: '#app',
+    data() {
+      return {
+        isCheckboxChecked: false,
+      };
+    },
+    methods: {
+        toggleBodyClass() {
+            if (this.isCheckboxChecked) {
+              document.body.classList.add('e-dark-mode', 'dark'); // Add your desired classes here
+            } else {
+              document.body.classList.remove('e-dark-mode', 'dark'); // Remove your desired classes here
+            }
+          },
+        },
+    template: `
+      <div>
+        <ejs-checkbox label='Default' v-model="isCheckboxChecked" @change="toggleBodyClass"></ejs-checkbox><br/>
+        <ejs-button cssClass='e-primary'>Button</ejs-button>
+        <ejs-button cssClass='e-success'>Button</ejs-button>
+        <ejs-button cssClass='e-info'>Button</ejs-button>
+        <ejs-button cssClass='e-warning'>Button</ejs-button>
+        <ejs-button cssClass='e-danger'>Button</ejs-button>
+      </div>
+    `,
+  });
\ No newline at end of file
diff --git a/ej2-vue/code-snippet/common/fluent2-cs1/systemjs.config.js b/ej2-vue/code-snippet/common/fluent2-cs1/systemjs.config.js
new file mode 100644
index 000000000..da5b29b9b
--- /dev/null
+++ b/ej2-vue/code-snippet/common/fluent2-cs1/systemjs.config.js
@@ -0,0 +1,25 @@
+System.config({
+    transpiler: "typescript",
+    typescriptOptions: {
+        compilerOptions: {
+            target: "umd",
+            module: "commonjs",
+            moduleResolution: "node",
+            emitDecoratorMetadata: true,
+            experimentalDecorators: true
+        }
+    },
+    paths: {
+        "syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/"
+    },
+    map: {
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+vue: "https://unpkg.com/vue@2.6.14/dist/vue.min.js",
+        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-vue-base": "syncfusion:ej2-vue-base/dist/ej2-vue-base.umd.min.js",
+        "@syncfusion/ej2-vue-buttons": "syncfusion:ej2-vue-buttons/dist/ej2-vue-buttons.umd.min.js",
+    }
+});
+
+System.import('index.js');
\ No newline at end of file
diff --git a/ej2-vue/code-snippet/common/fluent2-cs2/app.vue b/ej2-vue/code-snippet/common/fluent2-cs2/app.vue
new file mode 100644
index 000000000..99fc5fc78
--- /dev/null
+++ b/ej2-vue/code-snippet/common/fluent2-cs2/app.vue
@@ -0,0 +1,28 @@
+<template>
+<div>
+    <ejs-button cssClass='e-primary'>Button</ejs-button>
+</div>
+</template>
+
+<script>
+import Vue from 'vue';
+import { ButtonPlugin } from '@syncfusion/ej2-vue-buttons';
+import { enableRipple } from '@syncfusion/ej2-base';
+
+enableRipple(true);
+Vue.use(ButtonPlugin);
+
+export default {}
+</script>
+
+<style>
+@import '../node_modules/@syncfusion/ej2-base/styles/fluent2.css';
+@import '../node_modules/@syncfusion/ej2-buttons/styles/fluent2.css';
+
+button {
+  margin: 25px 5px 20px 20px;
+}
+:root {
+	--color-sf-primary: 104, 134, 164;
+}
+</style>
\ No newline at end of file
diff --git a/ej2-vue/code-snippet/common/fluent2-cs2/index.css b/ej2-vue/code-snippet/common/fluent2-cs2/index.css
new file mode 100644
index 000000000..9f06f8abd
--- /dev/null
+++ b/ej2-vue/code-snippet/common/fluent2-cs2/index.css
@@ -0,0 +1,7 @@
+button {
+  margin: 25px 5px 20px 20px;
+}
+
+:root {
+	--color-sf-primary: 104, 134, 164;
+}
\ No newline at end of file
diff --git a/ej2-vue/code-snippet/common/fluent2-cs2/index.html b/ej2-vue/code-snippet/common/fluent2-cs2/index.html
new file mode 100644
index 000000000..01a02c4c0
--- /dev/null
+++ b/ej2-vue/code-snippet/common/fluent2-cs2/index.html
@@ -0,0 +1,23 @@
+
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js"></script>
+    <title>EJ2 Vue Sample</title>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="Typescript UI Controls" />
+    <meta name="author" content="Syncfusion" />
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
+    <link href="https://cdn.syncfusion.com/ej2/26.1.35/fluent2.css" rel="stylesheet" />
+    <link href="index.css" rel="stylesheet" />
+    <script src="systemjs.config.js"></script>
+</head>
+
+<body>
+    <div id='app'>Loading....</div>
+</body>
+
+</html>
+
diff --git a/ej2-vue/code-snippet/common/fluent2-cs2/index.js b/ej2-vue/code-snippet/common/fluent2-cs2/index.js
new file mode 100644
index 000000000..f633506a9
--- /dev/null
+++ b/ej2-vue/code-snippet/common/fluent2-cs2/index.js
@@ -0,0 +1,20 @@
+
+import Vue from 'vue';
+import { ButtonPlugin } from '@syncfusion/ej2-vue-buttons';
+import { enableRipple } from '@syncfusion/ej2-base';
+
+enableRipple(true);
+Vue.use(ButtonPlugin);
+
+new Vue({
+    el: '#app',
+    data() {
+      return {
+      };
+    },
+    template: `
+      <div>
+        <ejs-button cssClass='e-primary'>Button</ejs-button>
+      </div>
+    `,
+  });
\ No newline at end of file
diff --git a/ej2-vue/code-snippet/common/fluent2-cs2/systemjs.config.js b/ej2-vue/code-snippet/common/fluent2-cs2/systemjs.config.js
new file mode 100644
index 000000000..da5b29b9b
--- /dev/null
+++ b/ej2-vue/code-snippet/common/fluent2-cs2/systemjs.config.js
@@ -0,0 +1,25 @@
+System.config({
+    transpiler: "typescript",
+    typescriptOptions: {
+        compilerOptions: {
+            target: "umd",
+            module: "commonjs",
+            moduleResolution: "node",
+            emitDecoratorMetadata: true,
+            experimentalDecorators: true
+        }
+    },
+    paths: {
+        "syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/"
+    },
+    map: {
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+vue: "https://unpkg.com/vue@2.6.14/dist/vue.min.js",
+        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-vue-base": "syncfusion:ej2-vue-base/dist/ej2-vue-base.umd.min.js",
+        "@syncfusion/ej2-vue-buttons": "syncfusion:ej2-vue-buttons/dist/ej2-vue-buttons.umd.min.js",
+    }
+});
+
+System.import('index.js');
\ No newline at end of file
diff --git a/ej2-vue/schedule/appointments.md b/ej2-vue/schedule/appointments.md
index 6a6bd9490..2b2ed5083 100644
--- a/ej2-vue/schedule/appointments.md
+++ b/ej2-vue/schedule/appointments.md
@@ -49,7 +49,7 @@ Represents an appointment that is created for more than 24 hours, and usually di
 
 Represents an appointment that is created for an entire day such as holiday events. It is usually displayed separately in an all-day row, a separate row for all-day appointments below the date header section. In Timeline views, the all-day appointments displays in the working space area, and no separate all-day row is present in that view.
 
-> To change normal appointment into all-day event, set `isAllDay` field to true.
+> To change normal appointment into all-day event, set [`isAllDay`](https://ej2.syncfusion.com/vue/documentation/api/schedule/field/#isallday) field to `true`.
 
 ### Hide all-day row events
 
@@ -81,7 +81,7 @@ When you have larger number of appointments in all-day view, you can show all al
 
 ## Customize the rendering of the spanned events
 
-By default, Scheduler will renders the spanned events (appointment with more than 24 hours duration) in the all-day row by setting `AllDayRow` will the default type renders to the `spannedEventPlacement` option within the [`eventSettings`](../api/schedule/eventSettings/) property. Now we can customize rendering of the that events inside the work cells itself by modifying the `spannedEventPlacement` option as `TimeSlot`. In this following example, shows how to render the spanned appointments inside the work cells as follows.
+By default, Scheduler will renders the spanned events (appointment with more than 24 hours duration) in the all-day row by setting `AllDayRow` will the default type renders to the [`spannedEventPlacement`](https://ej2.syncfusion.com/vue/documentation/api/schedule/eventSettings/#spannedeventplacement) option within the [`eventSettings`](../api/schedule/eventSettings/) property. Now we can customize rendering of the that events inside the work cells itself by modifying the [`spannedEventPlacement`](https://ej2.syncfusion.com/vue/documentation/api/schedule/eventSettings/#spannedeventplacement) option as `TimeSlot`. In this following example, shows how to render the spanned appointments inside the work cells as follows.
 
 {% tabs %}
 {% highlight html tabtitle="Composition API (~/src/App.vue)" %}
@@ -115,7 +115,7 @@ The following example depicts how to create a recurring event on Scheduler with
 
 ### Adding exceptions
 
-A few instance of the recurrence series can be excluded on specific dates, by adding those exceptional dates to the `recurrenceException` field. These date values should be given in the ISO date time format with no hyphens(-) separating the date elements.
+A few instance of the recurrence series can be excluded on specific dates, by adding those exceptional dates to the  [`recurrenceException`](https://ej2.syncfusion.com/vue/documentation/api/schedule/field/#recurrenceexception)  field. These date values should be given in the ISO date time format with no hyphens(-) separating the date elements.
 
 For example, 22nd February 2018 can be represented as 20180222. Also, the time part being represented in UTC format needs to add "Z" after the time portion with no space. "07:30:00 UTC" is therefore represented as "073000Z".
 
@@ -132,9 +132,9 @@ For example, 22nd February 2018 can be represented as 20180222. Also, the time p
 
 ### Editing an occurrence from a series
 
-To dynamically edit a particular occurrence from an event series and display it on the initial load of Scheduler, the edited occurrence needs to be added as a new event to the dataSource collection, with an additional `recurrenceID` field defined to it. The `recurrenceID` field of edited occurrence usually maps the ID value of the parent event.
+To dynamically edit a particular occurrence from an event series and display it on the initial load of Scheduler, the edited occurrence needs to be added as a new event to the dataSource collection, with an additional [`recurrenceID`](https://ej2.syncfusion.com/vue/documentation/api/schedule/field/#recurrenceid) field defined to it. The [`recurrenceID`](https://ej2.syncfusion.com/vue/documentation/api/schedule/field/#recurrenceid) field of edited occurrence usually maps the ID value of the parent event.
 
-In this example, a recurring instance that displays on the date 30th Jan 2018 is edited with different timings. Therefore, this particular date is excluded from the parent recurring event that repeats from 28th January 2018 to 4th February 2018. This can be done by adding the `recurrenceException` field with the excluded date value on the parent event. Also, the edited occurrence event which is created as a new event should carry the `recurrenceID` field pointing to the parent event's `Id` value.
+In this example, a recurring instance that displays on the date 30th Jan 2018 is edited with different timings. Therefore, this particular date is excluded from the parent recurring event that repeats from 28th January 2018 to 4th February 2018. This can be done by adding the [`recurrenceException`](https://ej2.syncfusion.com/vue/documentation/api/schedule/field/#recurrenceexception) field with the excluded date value on the parent event. Also, the edited occurrence event which is created as a new event should carry the [`recurrenceID`](https://ej2.syncfusion.com/vue/documentation/api/schedule/field/#recurrenceid)  field pointing to the parent event's [`Id`](https://ej2.syncfusion.com/vue/documentation/api/schedule/field/#id) value.
 
 {% tabs %}
 {% highlight html tabtitle="Composition API (~/src/App.vue)" %}
@@ -149,9 +149,9 @@ In this example, a recurring instance that displays on the date 30th Jan 2018 is
 
 ### Edit only the current and following events
 
-To edit only the current and following events enable the property `editFollowingEvents` within [`eventSettings`](../api/schedule/eventSettings/) property. The edited occurrence needs to be added as a new event to the dataSource collection, with an additional `followingID` field defined to it. The `followingID` field of edited occurrence usually maps the ID value of the immediate parent event.
+To edit only the current and following events enable the property [`editFollowingEvents`](https://ej2.syncfusion.com/vue/documentation/api/schedule/eventSettings/#editfollowingevents) within [`eventSettings`](../api/schedule/eventSettings/) property. The edited occurrence needs to be added as a new event to the dataSource collection, with an additional [`followingID`](https://ej2.syncfusion.com/vue/documentation/api/schedule/field/#followingid) field defined to it. The [`followingID`](https://ej2.syncfusion.com/vue/documentation/api/schedule/field/#followingid) field of edited occurrence usually maps the ID value of the immediate parent event.
 
-In this example, a recurring instance that displays on the date 30th Jan 2018 and its following dates are edited with different subject. Therefore, this particular date and its following dates are excluded from the parent recurring event that repeats from 28th January 2018 to 4th February 2018. This can be done by updating the `recurrenceRule` field with the until date value on the parent event. Also, the edited events which is created as a new event should carry the `followingID` field pointing to the immediate parent event's `Id` value.
+In this example, a recurring instance that displays on the date 30th Jan 2018 and its following dates are edited with different subject. Therefore, this particular date and its following dates are excluded from the parent recurring event that repeats from 28th January 2018 to 4th February 2018. This can be done by updating the [`recurrenceRule`](https://ej2.syncfusion.com/vue/documentation/api/schedule/field/#recurrencerule) field with the until date value on the parent event. Also, the edited events which is created as a new event should carry the [`followingID`](https://ej2.syncfusion.com/vue/documentation/api/schedule/field/#followingid) field pointing to the immediate parent event's [`Id`](https://ej2.syncfusion.com/vue/documentation/api/schedule/field/#id) value.
 
 {% tabs %}
 {% highlight html tabtitle="Composition API (~/src/App.vue)" %}
@@ -166,7 +166,7 @@ In this example, a recurring instance that displays on the date 30th Jan 2018 an
 
 ### Recurrence options and rules
 
-Events can be repeated on a daily, weekly, monthly or yearly basis based on the recurrence rule which accepts the string value. The following details should be assigned to the `recurrenceRule` property to generate the recurring instances.
+Events can be repeated on a daily, weekly, monthly or yearly basis based on the recurrence rule which accepts the string value. The following details should be assigned to the [`recurrenceRule`](https://ej2.syncfusion.com/vue/documentation/api/schedule/field/#recurrencerule) property to generate the recurring instances.
 
 * Repeat type - daily/weekly/monthly/yearly.
 * How many times it needs to be repeated?
@@ -254,7 +254,7 @@ The built-in validation support has been added by default for recurring appointm
 
 The Scheduler dataSource usually holds the event instances, where each of the instance includes a collection of appropriate [fields](https://ej2.syncfusion.com/vue/documentation/api/schedule/field/). It is mandatory to map these fields with the equivalent fields of database, when remote data is bound to it. When the local JSON data is bound, then the field names defined within the instances needs to be mapped with the scheduler event fields correctly.
 
-> To create an event on Scheduler, it is enough to define the `startTime` and `endTime`. Also `id` field becomes mandatory to process CRUD actions on appropriate events.
+> To create an event on Scheduler, it is enough to define the [`startTime`](https://ej2.syncfusion.com/vue/documentation/api/schedule/field/#starttime) and [`endTime`](https://ej2.syncfusion.com/vue/documentation/api/schedule/field/#endtime). Also [`id`](https://ej2.syncfusion.com/vue/documentation/api/schedule/field/#id) field becomes mandatory to process CRUD actions on appropriate events.
 
 ### Built-in fields
 
@@ -262,20 +262,20 @@ The built-in fields available on Scheduler event object are as follows.
 
 | Field name          | Description                                                                                                                                                                                                                                                                                                                                                                 |
 | ------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| id                  | The `id` field needs to be defined as mandatory and this field usually assigns a unique ID value to each of the events.                                                                                                                                                                                                                                                     |
-| subject             | The `subject` field is optional, and usually assigns the summary text to each of the events.                                                                                                                                                                                                                                                                                |
-| startTime           | The `startTime` field defines the start time of an event and it is mandatory to provide it for any of the valid event objects.                                                                                                                                                                                                                                              |
-| endTime             | The `endTime` field defines the end time of an event and it is mandatory to provide the end time for any of the valid event objects.                                                                                                                                                                                                                                        |
-| startTimezone       | It maps the `startTimezone` field from the dataSource and usually accepts the valid IANA timezone names. It is assumed that the value provided for this field is taken into consideration while processing the `startTime` field. When this field is not mapped with any timezone names, then the events will be processed based on the timezone assigned to the Scheduler. |
-| endTimezone         | It maps the `endTimezone` field from the dataSource and usually accepts the valid IANA timezone names. It is assumed that the value provided for this field is taken into consideration while processing the `endTime` field. When this field is not mapped with any timezone names, then the events will be processed based on the timezone assigned to the Scheduler.     |
-| location            | It maps the `location` field from the dataSource and the location text value will be displayed over the events.                                                                                                                                                                                                                                                             |
-| description         | It maps the `description` field from the dataSource and denotes the event description which is optional.                                                                                                                                                                                                                                                                    |
-| isAllDay            | The `isAllDay` field is mapped from the dataSource and is used to denote whether an event is created for an entire day or for specific time alone. Usually, an event with `isAllDay` field set to true will be considered as an all-day event.                                                                                                                              |
-| recurrenceID        | It maps the `recurrenceID` field from dataSource and usually holds the ID value of the parent recurrence event. This field is applicable only for the edited occurrence events.                                                                                                                                                                                             |
-| recurrenceRule      | It maps the `recurrenceRule` field from dataSource and holds the recurrence rule value in a string format. Also, it uniquely identifies whether the event belongs to a recurring type or normal ones.                                                                                                                                                                       |
-| recurrenceException | It maps the `recurrenceException` field from dataSource and is used to hold the collection of exception dates, on which the recurring occurrences needs to be excluded. The `recurrenceException` should be specified in UTC format.                                                                                                                                        |
-| isReadonly          | It maps the `isReadonly` field from dataSource. It is mainly used to make specific appointments as readonly when set to `true`.                                                                                                                                                                                                                                             |
-| isBlock             | It maps the `isBlock` field from dataSource. It is used to block the particular time ranges in the Scheduler and prevents the event creation on those time slots.                                                                                                                                                                                                           |
+| id                  | The [`id`](https://ej2.syncfusion.com/vue/documentation/api/schedule/field/#id) field needs to be defined as mandatory and this field usually assigns a unique ID value to each of the events.                                                                                                                                                                                                                                                     |
+| subject             | The [`subject`](https://ej2.syncfusion.com/vue/documentation/api/schedule/field/#subject) field is optional, and usually assigns the summary text to each of the events.                                                                                                                                                                                                                                                                                |
+| startTime           | The [`startTime`](https://ej2.syncfusion.com/vue/documentation/api/schedule/field/#starttime) field defines the start time of an event and it is mandatory to provide it for any of the valid event objects.                                                                                                                                                                                                                                              |
+| endTime             | The [`endTime`](https://ej2.syncfusion.com/vue/documentation/api/schedule/field/#endtime) field defines the end time of an event and it is mandatory to provide the end time for any of the valid event objects.                                                                                                                                                                                                                                        |
+| startTimezone       | It maps the [`startTimezone`](https://ej2.syncfusion.com/vue/documentation/api/schedule/field/#starttimezone) field from the dataSource and usually accepts the valid IANA timezone names. It is assumed that the value provided for this field is taken into consideration while processing the `startTime` field. When this field is not mapped with any timezone names, then the events will be processed based on the timezone assigned to the Scheduler. |
+| endTimezone         | It maps the [`endTimezone`](https://ej2.syncfusion.com/vue/documentation/api/schedule/field/#endtimezone)  field from the dataSource and usually accepts the valid IANA timezone names. It is assumed that the value provided for this field is taken into consideration while processing the `endTime` field. When this field is not mapped with any timezone names, then the events will be processed based on the timezone assigned to the Scheduler.     |
+| location            | It maps the  [`location`](https://ej2.syncfusion.com/vue/documentation/api/schedule/field/#location) field from the dataSource and the location text value will be displayed over the events.                                                                                                                                                                                                                                                             |
+| description         | It maps the [`description`](https://ej2.syncfusion.com/vue/documentation/api/schedule/field/#description) field from the dataSource and denotes the event description which is optional.                                                                                                                                                                                                                                                                    |
+| isAllDay            | The [`isAllDay`](https://ej2.syncfusion.com/vue/documentation/api/schedule/field/#isallday) field is mapped from the dataSource and is used to denote whether an event is created for an entire day or for specific time alone. Usually, an event with `isAllDay` field set to true will be considered as an all-day event.                                                                                                                              |
+| recurrenceID        | It maps the [`recurrenceID`](https://ej2.syncfusion.com/vue/documentation/api/schedule/field/#recurrenceid) field from dataSource and usually holds the ID value of the parent recurrence event. This field is applicable only for the edited occurrence events.                                                                                                                                                                                             |
+| recurrenceRule      | It maps the [`recurrenceRule`](https://ej2.syncfusion.com/vue/documentation/api/schedule/field/#recurrencerule) field from dataSource and holds the recurrence rule value in a string format. Also, it uniquely identifies whether the event belongs to a recurring type or normal ones.                                                                                                                                                                       |
+| recurrenceException | It maps the [`recurrenceException`](https://ej2.syncfusion.com/vue/documentation/api/schedule/field/#recurrenceexception) field from dataSource and is used to hold the collection of exception dates, on which the recurring occurrences needs to be excluded. The `recurrenceException` should be specified in UTC format.                                                                                                                                        |
+| isReadonly          | It maps the [`isReadonly`](https://ej2.syncfusion.com/vue/documentation/api/schedule/field/#isreadonly) field from dataSource. It is mainly used to make specific appointments as readonly when set to `true`.                                                                                                                                                                                                                                             |
+| isBlock             | It maps the [`isBlock`](https://ej2.syncfusion.com/vue/documentation/api/schedule/field/#isblock) field from dataSource. It is used to block the particular time ranges in the Scheduler and prevents the event creation on those time slots.                                                                                                                                                                                                           |
 
 ### Binding different field names
 
@@ -292,7 +292,7 @@ When the fields of event instances has the default mapping name, it is not manda
         
 {% previewsample "page.domainurl/code-snippet/schedule/event-cs8" %}
 
-> The mapper field `id` is of string type and has no additional validation options, whereas all other fields are of `Object` type and has additional options.
+> The mapper field [`id`](https://ej2.syncfusion.com/vue/documentation/api/schedule/field/#id) is of string type and has no additional validation options, whereas all other fields are of `Object` type and has additional options.
 
 ### Event field settings
 
@@ -350,7 +350,7 @@ By default, the scheduler will render the overlapping events based on the start
 
 ## Drag and drop appointments
 
-Appointments can be rescheduled to any time by dragging and dropping them onto the desired location. To work with drag and drop functionality, it is necessary to inject the module `DragAndDrop` and make sure that [`allowDragAndDrop`](../api/schedule/#allowdraganddrop) is set to true on Scheduler. In mobile mode, you can drag and drop the events by tap holding an event and dropping them on to the desired location.
+Appointments can be rescheduled to any time by dragging and dropping them onto the desired location. To work with drag and drop functionality, it is necessary to inject the module `DragAndDrop` and make sure that [`allowDragAndDrop`](../api/schedule/#allowdraganddrop) is set to `true` on Scheduler. In mobile mode, you can drag and drop the events by tap holding an event and dropping them on to the desired location.
 
 > By default, drag and drop action is applicable on all Scheduler views, except Agenda, Month-Agenda and Year view.
 
@@ -401,7 +401,7 @@ By default, you can drag and drop the events within any of the applicable schedu
 
 ### Preventing drag and drop on specific targets
 
-It is possible to prevent the drag action on particular target, by passing the target to be excluded in the `excludeSelectors` option within [`dragStart`](../api/schedule/#dragstart) event. In this example, we have prevented the drag action on all-day row.
+It is possible to prevent the drag action on particular target, by passing the target to be excluded in the [`excludeSelectors`](https://ej2.syncfusion.com/vue/documentation/api/schedule/dragEventArgs/#excludeselectors) option within [`dragStart`](../api/schedule/#dragstart) event. In this example, we have prevented the drag action on all-day row.
 
 {% tabs %}
 {% highlight html tabtitle="Composition API (~/src/App.vue)" %}
@@ -416,7 +416,7 @@ It is possible to prevent the drag action on particular target, by passing the t
 
 ### Disable scrolling on drag action
 
-By default, while dragging an appointment to the edges, either top/bottom in the vertical Scheduler or left/right in the timeline Scheduler, scrolling action takes place automatically. To prevent this scrolling, set `false` to the `scroll` value within the [`dragStart`](../api/schedule/#dragstart) event arguments.
+By default, while dragging an appointment to the edges, either top/bottom in the vertical Scheduler or left/right in the timeline Scheduler, scrolling action takes place automatically. To prevent this scrolling, set `false` to the [`scroll`](https://ej2.syncfusion.com/vue/documentation/api/schedule/dragEventArgs/#scroll)  value within the [`dragStart`](../api/schedule/#dragstart) event arguments.
 
 {% tabs %}
 {% highlight html tabtitle="Composition API (~/src/App.vue)" %}
@@ -431,7 +431,7 @@ By default, while dragging an appointment to the edges, either top/bottom in the
 
 ### Controlling scroll speed while dragging an event
 
-The speed of the scrolling action while dragging an appointment to the Scheduler edges, can be controlled within the [`dragStart`](../api/schedule/#dragstart) event by setting the desired value to the `scrollBy` and `timeDelay` option whereas its default value is 30 minutes and 100ms.
+The speed of the scrolling action while dragging an appointment to the Scheduler edges, can be controlled within the [`dragStart`](../api/schedule/#dragstart) event by setting the desired value to the [`scrollBy`](https://ej2.syncfusion.com/vue/documentation/api/schedule/scrollOptions/#scrollby) and [`timeDelay`](https://ej2.syncfusion.com/vue/documentation/api/schedule/scrollOptions/#timedelay) option whereas its default value is 30 minutes and 100ms.
 
 {% tabs %}
 {% highlight html tabtitle="Composition API (~/src/App.vue)" %}
@@ -446,9 +446,9 @@ The speed of the scrolling action while dragging an appointment to the Scheduler
 
 ### Auto navigation of date ranges on dragging an event
 
-When an event is dragged either to the left or right extreme edges of the Scheduler and kept hold for few seconds without dropping, the auto navigation of date ranges will be enabled allowing the Scheduler to navigate from current date range to back and forth respectively. This action is set to `false` by default and to enable it, you need to set `navigation` to true within the [`dragStart`](../api/schedule/#dragstart) event.
+When an event is dragged either to the left or right extreme edges of the Scheduler and kept hold for few seconds without dropping, the auto navigation of date ranges will be enabled allowing the Scheduler to navigate from current date range to back and forth respectively. This action is set to `false` by default and to enable it, you need to set [`navigation`](https://ej2.syncfusion.com/vue/documentation/api/schedule/dragEventArgs/#navigation) to true within the [`dragStart`](../api/schedule/#dragstart) event.
 
-By default, the navigation delay is set to 2000ms. The navigation delay decides how long the user needs to drag and hold the appointments at the extremities. You can also set your own delay value for letting the users to navigate based on it, using the `timeDelay` within the `dragStart` event.
+By default, the navigation delay is set to 2000ms. The navigation delay decides how long the user needs to drag and hold the appointments at the extremities. You can also set your own delay value for letting the users to navigate based on it, using the  [`timeDelay`](https://ej2.syncfusion.com/vue/documentation/api/schedule/scrollOptions/#timedelay) within the [`dragStart`](https://ej2.syncfusion.com/vue/documentation/api/schedule#dragstart) event.
 
 {% tabs %}
 {% highlight html tabtitle="Composition API (~/src/App.vue)" %}
@@ -463,7 +463,7 @@ By default, the navigation delay is set to 2000ms. The navigation delay decides
 
 ### Setting drag time interval
 
-By default, while dragging an appointment, it moves at an interval of 30 minutes. To change the dragging time interval, pass the appropriate values to the `interval` option within the [`dragStart`](../api/schedule/#dragstart) event.
+By default, while dragging an appointment, it moves at an interval of 30 minutes. To change the dragging time interval, pass the appropriate values to the [`interval`](https://ej2.syncfusion.com/vue/documentation/api/schedule/dragEventArgs/#interval) option within the [`dragStart`](../api/schedule/#dragstart) event.
 
 {% tabs %}
 {% highlight html tabtitle="Composition API (~/src/App.vue)" %}
@@ -478,13 +478,13 @@ By default, while dragging an appointment, it moves at an interval of 30 minutes
 
 ### Drag and drop items from external source
 
-It is possible to drag and drop the unplanned items from any of the external source into the scheduler, by manually saving those dropped item as a new appointment data through `addEvent` method of Scheduler.
+It is possible to drag and drop the unplanned items from any of the external source into the scheduler, by manually saving those dropped item as a new appointment data through [`addEvent`](https://ej2.syncfusion.com/vue/documentation/api/schedule#addevent) method of Scheduler.
 
 Visit this video to find out more about drag and drop events from an external source into the Vue Scheduler:
 
 {% youtube "https://www.youtube.com/watch?v=MlRNsYaug48" %}
 
-In this example, we have used the tree view control as an external source and the child nodes from the tree view component are dragged and dropped onto the Scheduler. Therefore, it is necessary to make use of the `nodeDragStop` event of the TreeView component, where we can form an event object and save it using the `addEvent` method.
+In this example, we have used the tree view control as an external source and the child nodes from the tree view component are dragged and dropped onto the Scheduler. Therefore, it is necessary to make use of the [`nodeDragStop`](https://ej2.syncfusion.com/vue/documentation/api/treeview/#nodedragstop) event of the TreeView component, where we can form an event object and save it using the [`addEvent`](https://ej2.syncfusion.com/vue/documentation/api/schedule#addevent) method.
 
 {% tabs %}
 {% highlight html tabtitle="Composition API (~/src/App.vue)" %}
@@ -522,7 +522,7 @@ To enable the inline edit mode, single click on any of the existing appointment
 
 The inline option can be enabled/disabled on the Scheduler by using the allowInline API, whereas its default value is set to false.
 
-While using the [`allowInline`](../api/schedule/#allowinline) the `showQuickInfo` will be turned off. The `quickPopup` will not show on clicking the work cell or clicking the appointment when the `allowInline` property is set to true.
+While using the [`allowInline`](../api/schedule/#allowinline) the [`showQuickInfo`](https://ej2.syncfusion.com/vue/documentation/api/schedule/#showquickinfo) will be turned off. The `quickPopup` will not show on clicking the work cell or clicking the appointment when the `allowInline` property is set to `true`.
 In work cells, select multiple cells using keyboard, and then press enter key. The appointment wrapper will be created, and focus will be on the subject field. Also, consider the overlapping scenarios when creating an inline event.
 
 ### Normal Event
@@ -546,7 +546,7 @@ While editing the occurrence from the recurrence series, it is only possible to
 
 ## Appointment Resizing
 
-Another way of rescheduling an appointment can be done by resizing it through either of its handlers. To work with resizing functionality, it is necessary to inject the module `Resize` and make sure that [`allowResizing`](../api/schedule/#allowresizing) property is set to true.
+Another way of rescheduling an appointment can be done by resizing it through either of its handlers. To work with resizing functionality, it is necessary to inject the module `Resize` and make sure that [`allowResizing`](../api/schedule/#allowresizing) property is set to `true`.
 
 {% tabs %}
 {% highlight html tabtitle="Composition API (~/src/App.vue)" %}
@@ -561,7 +561,7 @@ Another way of rescheduling an appointment can be done by resizing it through ei
 
 ### Disable the resize action
 
-By default, resizing of events is allowed on all Scheduler views except Agenda and Month-Agenda view. To disable this event resizing action, set false to the [`allowResizing`](../api/schedule/#allowresizing) property.
+By default, resizing of events is allowed on all Scheduler views except Agenda and Month-Agenda view. To disable this event resizing action, set `false` to the [`allowResizing`](../api/schedule/#allowresizing) property.
 
 {% tabs %}
 {% highlight html tabtitle="Composition API (~/src/App.vue)" %}
@@ -576,7 +576,7 @@ By default, resizing of events is allowed on all Scheduler views except Agenda a
 
 ### Disable scrolling on resize action
 
-By default, while resizing an appointment, when its handler reaches the extreme edges of the Scheduler, scrolling action will takes place along with event resizing. To prevent this scrolling action, set false to `scroll` value within the [`resizeStart`](../api/schedule/#resizestart) event.
+By default, while resizing an appointment, when its handler reaches the extreme edges of the Scheduler, scrolling action will takes place along with event resizing. To prevent this scrolling action, set `false` to [`scroll`](https://ej2.syncfusion.com/vue/documentation/api/schedule/resizeEventArgs/#scroll) value within the [`resizeStart`](../api/schedule/#resizestart) event.
 
 {% tabs %}
 {% highlight html tabtitle="Composition API (~/src/App.vue)" %}
@@ -591,7 +591,7 @@ By default, while resizing an appointment, when its handler reaches the extreme
 
 ### Controlling scroll speed while resizing an event
 
-The speed of the scrolling action while resizing an appointment to the Scheduler edges, can be controlled within the [`resizeStart`](../api/schedule/#resizestart) event by setting the desired value to the `scrollBy` option.
+The speed of the scrolling action while resizing an appointment to the Scheduler edges, can be controlled within the [`resizeStart`](../api/schedule/#resizestart) event by setting the desired value to the [`scrollBy`](https://ej2.syncfusion.com/vue/documentation/api/schedule/scrollOptions/#scrollby) option.
 
 {% tabs %}
 {% highlight html tabtitle="Composition API (~/src/App.vue)" %}
@@ -606,7 +606,7 @@ The speed of the scrolling action while resizing an appointment to the Scheduler
 
 ### Setting resize time interval
 
-By default, while resizing an appointment, it extends or shrinks at an interval of 30 minutes. To change this default resize interval, set appropriate values to `interval` option within the [`resizeStart`](../api/schedule/#resizestart) event.
+By default, while resizing an appointment, it extends or shrinks at an interval of 30 minutes. To change this default resize interval, set appropriate values to [`interval`](https://ej2.syncfusion.com/vue/documentation/api/schedule/resizeEventArgs/#interval) option within the [`resizeStart`](../api/schedule/#resizestart) event.
 
 {% tabs %}
 {% highlight html tabtitle="Composition API (~/src/App.vue)" %}
@@ -651,7 +651,7 @@ The following code example customizes the appointment's default color and time f
 
 ### Using eventRendered event
 
-The `eventRendered` event triggers before the appointment renders on the Scheduler. Therefore, this client-side event can be utilized to customize the look of events based on any specific criteria, before rendering them on the scheduler.
+The [`eventRendered`](https://ej2.syncfusion.com/vue/documentation/api/schedule#eventrendered) event triggers before the appointment renders on the Scheduler. Therefore, this client-side event can be utilized to customize the look of events based on any specific criteria, before rendering them on the scheduler.
 
 {% tabs %}
 {% highlight html tabtitle="Composition API (~/src/App.vue)" %}
@@ -666,7 +666,7 @@ The `eventRendered` event triggers before the appointment renders on the Schedul
 
 ### Using cssClass
 
-The customization of events can also be achieved using `cssClass` property of the Scheduler. In the following example, the background of appointments has been changed using the cssClass.
+The customization of events can also be achieved using [`cssClass`](https://ej2.syncfusion.com/vue/documentation/api/schedule#cssclass) property of the Scheduler. In the following example, the background of appointments has been changed using the cssClass.
 
 {% tabs %}
 {% highlight html tabtitle="Composition API (~/src/App.vue)" %}
@@ -681,7 +681,7 @@ The customization of events can also be achieved using `cssClass` property of th
 
 ## Setting minimum height
 
-It is possible to set minimal height for appointments on Scheduler using `eventRendered` event, when its start and end time duration is less than the default duration of a single slot.
+It is possible to set minimal height for appointments on Scheduler using [`eventRendered`](https://ej2.syncfusion.com/vue/documentation/api/schedule#eventrendered) event, when its start and end time duration is less than the default duration of a single slot.
 
 {% tabs %}
 {% highlight html tabtitle="Composition API (~/src/App.vue)" %}
@@ -696,7 +696,7 @@ It is possible to set minimal height for appointments on Scheduler using `eventR
 
 ## Block Dates and Times
 
-It is possible to block a set of dates or a particular time ranges on the Scheduler. To do so, define an appointment object within [`eventSettings`](../api/schedule/eventSettings/) along with the required time range to block and set the `isBlock` field to true. Usually, the event objects defined with isBlock field set to true will block the entire time cells lying within the appropriate time ranges specified through `startTime` and `endTime` fields.
+It is possible to block a set of dates or a particular time ranges on the Scheduler. To do so, define an appointment object within [`eventSettings`](../api/schedule/eventSettings/) along with the required time range to block and set the [`isBlock`](https://ej2.syncfusion.com/vue/documentation/api/schedule/field/#isblock) field to true. Usually, the event objects defined with isBlock field set to true will block the entire time cells lying within the appropriate time ranges specified through [`startTime`](https://ej2.syncfusion.com/vue/documentation/api/schedule/field/#starttime)  and [`endTime`](https://ej2.syncfusion.com/vue/documentation/api/schedule/field/#endtime) fields.
 
 {% tabs %}
 {% highlight html tabtitle="Composition API (~/src/App.vue)" %}
@@ -739,7 +739,7 @@ An interaction with the appointments of Scheduler can be enabled/disabled using
 
 ## Make specific events readonly
 
-There are scenarios where you need to restrict the CRUD action on specific appointments alone based on certain conditions. In the following example, the events that has occurred on the past hours from the current date of the Scheduler are made as read-only and the CRUD actions has been prevented only on those appointments. This can be achieved by setting `isReadonly` field of read-only events to `true`.
+There are scenarios where you need to restrict the CRUD action on specific appointments alone based on certain conditions. In the following example, the events that has occurred on the past hours from the current date of the Scheduler are made as read-only and the CRUD actions has been prevented only on those appointments. This can be achieved by setting [`isReadonly`](https://ej2.syncfusion.com/vue/documentation/api/schedule/field/#isreadonly) field of read-only events to `true`.
 
 {% tabs %}
 {% highlight html tabtitle="Composition API (~/src/App.vue)" %}
@@ -752,11 +752,11 @@ There are scenarios where you need to restrict the CRUD action on specific appoi
         
 {% previewsample "page.domainurl/code-snippet/schedule/event-cs33" %}
 
-> By default, the event editor is prevented to open on the read-only events when `isReadonly` field is set to `true`.
+> By default, the event editor is prevented to open on the read-only events when [`isReadonly`](https://ej2.syncfusion.com/vue/documentation/api/schedule/field/#isreadonly) field is set to `true`.
 
 ## Restricting event creation on specific time slots
 
-You can restrict the users to create and update more than one appointment on specific time slots. Also, you can disable the CRUD action on those time slots if it is already occupied, which can be achieved using Scheduler's public method `isSlotAvailable`.
+You can restrict the users to create and update more than one appointment on specific time slots. Also, you can disable the CRUD action on those time slots if it is already occupied, which can be achieved using Scheduler's public method [`isSlotAvailable`](https://ej2.syncfusion.com/vue/documentation/api/schedule#isslotavailable).
 
 >Note: The **isSlotAvailable** is centered around verifying appointments within the present view's date range. Yet, it does not encompass an evaluation of availability for recurrence occurrences that fall beyond this particular date range.
 
@@ -773,7 +773,7 @@ You can restrict the users to create and update more than one appointment on spe
 
 ## Differentiate the past time events
 
-To differentiate the appearance of the appointments based on specific criteria such as displaying the past hour appointments with different colors on Scheduler, `eventRendered` event can be used which triggers before the appointment renders on the Scheduler.
+To differentiate the appearance of the appointments based on specific criteria such as displaying the past hour appointments with different colors on Scheduler, [`eventRendered`](https://ej2.syncfusion.com/vue/documentation/api/schedule#eventrendered) event can be used which triggers before the appointment renders on the Scheduler.
 
 {% tabs %}
 {% highlight html tabtitle="Composition API (~/src/App.vue)" %}
@@ -788,9 +788,9 @@ To differentiate the appearance of the appointments based on specific criteria s
 
 ## Appointments occupying entire cell
 
-The Scheduler allows the event to occupies the full height of the cell without its header part by setting `true` for `enableMaxHeight` Property.
+The Scheduler allows the event to occupies the full height of the cell without its header part by setting `true` for [`enableMaxHeight`](https://ej2.syncfusion.com/vue/documentation/api/schedule/eventSettings/#enablemaxheight) Property.
 
-We can show more indicator if more than one appointment is available in a same cell by setting `true` to `enableIndicator` property whereas its default value is false.
+We can show more indicator if more than one appointment is available in a same cell by setting `true` to [`enableIndicator`](https://ej2.syncfusion.com/vue/documentation/api/schedule/eventSettings/#enableindicator) property whereas its default value is false.
 
 {% tabs %}
 {% highlight html tabtitle="Composition API (~/src/App.vue)" %}
@@ -829,7 +829,7 @@ The tooltip shows the Scheduler appointment's information in a formatted style b
 
 ### Show or hide built-in tooltip
 
-The tooltip can be displayed for appointments by setting `true` to the `enableTooltip` option within the [`eventSettings`](../api/schedule/eventSettings/) property.
+The tooltip can be displayed for appointments by setting `true` to the [`enableTooltip`](https://ej2.syncfusion.com/vue/documentation/api/schedule/eventSettings/#enabletooltip) option within the [`eventSettings`](../api/schedule/eventSettings/) property.
 
 {% tabs %}
 {% highlight html tabtitle="Composition API (~/src/App.vue)" %}
@@ -844,7 +844,7 @@ The tooltip can be displayed for appointments by setting `true` to the `enableTo
 
 ### Customizing event tooltip using template
 
-After enabling the default tooltip, it is possible to customize the display of needed event information on tooltip by making use of the `tooltipTemplate` option within the [`eventSettings`](../api/schedule/eventSettings/).
+After enabling the default tooltip, it is possible to customize the display of needed event information on tooltip by making use of the [`tooltipTemplate`](https://ej2.syncfusion.com/vue/documentation/api/schedule/eventSettings/#tooltiptemplate) option within the [`eventSettings`](../api/schedule/eventSettings/).
 
 {% tabs %}
 {% highlight html tabtitle="Composition API (~/src/App.vue)" %}
@@ -857,11 +857,11 @@ After enabling the default tooltip, it is possible to customize the display of n
         
 {% previewsample "page.domainurl/code-snippet/schedule/tooltip-cs1" %}
 
-> All the field names that are mapped from the Scheduler dataSource to the appropriate field properties such as subject, description, location, startTime and endTime within the `eventSettings` can be accessed within the template.
+> All the field names that are mapped from the Scheduler dataSource to the appropriate field properties such as subject, description, location, startTime and endTime within the [`eventSettings`](https://ej2.syncfusion.com/vue/documentation/api/schedule/eventSettings/) can be accessed within the template.
 
 ## Appointment filtering
 
-The appointments can be filtered by passing the predicate value to `query` option in `eventSettings`. The following code example shows how to filter and render the selected appointments alone in the Scheduler.
+The appointments can be filtered by passing the predicate value to [`query`](https://ej2.syncfusion.com/vue/documentation/api/schedule/eventSettings/#query) option in [`eventSettings`](https://ej2.syncfusion.com/vue/documentation/api/schedule/eventSettings/) . The following code example shows how to filter and render the selected appointments alone in the Scheduler.
 
 {% tabs %}
 {% highlight html tabtitle="Composition API (~/src/App.vue)" %}
@@ -889,7 +889,7 @@ With the options available to select multiple appointments, it is also possible
 
 ## Retrieve event details from the UI of an event
 
-It is possible to access the information about the event fields of an appointment element displayed on the Scheduler UI. This can be achieved by passing an appointment element as argument to the public method `getEventDetails`.
+It is possible to access the information about the event fields of an appointment element displayed on the Scheduler UI. This can be achieved by passing an appointment element as argument to the public method [`getEventDetails`](https://ej2.syncfusion.com/vue/documentation/api/schedule#geteventdetails).
 
 In the following example, the subject of the appointment clicked has been displayed.
 
@@ -906,7 +906,7 @@ In the following example, the subject of the appointment clicked has been displa
 
 ## Get the current view appointments
 
-To retrieve the appointments present in the current view of the Scheduler, you can make use of the `getCurrentViewEvents` public method. In the following example, the count of current view appointment collection rendered has been traced in [`dataBound`](../api/schedule/#databound) event.
+To retrieve the appointments present in the current view of the Scheduler, you can make use of the [`getCurrentViewEvents`](https://ej2.syncfusion.com/vue/documentation/api/schedule#getcurrentviewevents) public method. In the following example, the count of current view appointment collection rendered has been traced in [`dataBound`](../api/schedule/#databound) event.
 
 {% tabs %}
 {% highlight html tabtitle="Composition API (~/src/App.vue)" %}
@@ -921,7 +921,7 @@ To retrieve the appointments present in the current view of the Scheduler, you c
 
 ## Get the entire appointment collections
 
-The entire collection of appointments rendered on the Scheduler can be accessed using the `getEvents` public method. In the following example, the count of entire appointment collection rendered on the Scheduler has been traced in [`dataBound`](../api/schedule/#databound) event.
+The entire collection of appointments rendered on the Scheduler can be accessed using the [`getEvents`](https://ej2.syncfusion.com/vue/documentation/api/schedule#getevents) public method. In the following example, the count of entire appointment collection rendered on the Scheduler has been traced in [`dataBound`](../api/schedule/#databound) event.
 
 {% tabs %}
 {% highlight html tabtitle="Composition API (~/src/App.vue)" %}
diff --git a/ej2-vue/schedule/cell-customization.md b/ej2-vue/schedule/cell-customization.md
index 6586d0982..5d106129a 100644
--- a/ej2-vue/schedule/cell-customization.md
+++ b/ej2-vue/schedule/cell-customization.md
@@ -10,11 +10,11 @@ domainurl: ##DomainURL##
 
 # Cell customization in Vue Schedule component
 
-The cells of the Scheduler can be easily customized either using the cell template or `RenderCell` event.
+The cells of the Scheduler can be easily customized either using the cell template or [`RenderCell`](https://ej2.syncfusion.com/vue/documentation/api/schedule#rendercell) event.
 
 ## Setting cell dimensions in all views
 
-The height and width of the Scheduler cells can be customized either to increase or reduce its size through the `cssClass` property, which overrides the default CSS applied on cells.
+The height and width of the Scheduler cells can be customized either to increase or reduce its size through the [`cssClass`](https://ej2.syncfusion.com/vue/documentation/api/schedule#cssclass) property, which overrides the default CSS applied on cells.
 
 {% tabs %}
 {% highlight html tabtitle="Composition API (~/src/App.vue)" %}
@@ -29,7 +29,7 @@ The height and width of the Scheduler cells can be customized either to increase
 
 ## Check for cell availability
 
-You can check whether the given time range slots are available for event creation or already occupied by other events using the `isSlotAvailable` method. In the following code example, if a specific time slot already contains an appointment, then no more appointments can be added to that cell.
+You can check whether the given time range slots are available for event creation or already occupied by other events using the [`isSlotAvailable`](https://ej2.syncfusion.com/vue/documentation/api/schedule#isslotavailable) method. In the following code example, if a specific time slot already contains an appointment, then no more appointments can be added to that cell.
 
 >Note: The **isSlotAvailable** is centered around verifying appointments within the present view's date range. Yet, it does not encompass an evaluation of availability for recurrence occurrences that fall beyond this particular date range.
 
@@ -46,7 +46,7 @@ You can check whether the given time range slots are available for event creatio
 
 ## Customizing cells in all the views
 
-It is possible to customize the appearance of the cells using both template options and `renderCell` event on all the views.
+It is possible to customize the appearance of the cells using both template options and [`renderCell`](https://ej2.syncfusion.com/vue/documentation/api/schedule#rendercell) event on all the views.
 
 ### Using template
 
@@ -65,7 +65,7 @@ The [`cellTemplate`](../api/schedule/#celltemplate) option accepts the template
 
 ### Using renderCell event
 
-An alternative to [`cellTemplate`](../api/schedule/#celltemplate) is the `renderCell` event, which can also be used to customize the cells with appropriate images or formatted text values.
+An alternative to [`cellTemplate`](../api/schedule/#celltemplate) is the [`renderCell`](https://ej2.syncfusion.com/vue/documentation/api/schedule#rendercell) event, which can also be used to customize the cells with appropriate images or formatted text values.
 
 {% tabs %}
 {% highlight html tabtitle="Composition API (~/src/App.vue)" %}
@@ -78,7 +78,7 @@ An alternative to [`cellTemplate`](../api/schedule/#celltemplate) is the `render
         
 {% previewsample "page.domainurl/code-snippet/schedule/cell-dimension-cs4" %}
 
-You can customize cells such as work cells, month cells, all-day cells, header cells, resource header cells using `renderCell` event by checking the `elementType` option within the event. You can check elementType with any of the following.
+You can customize cells such as work cells, month cells, all-day cells, header cells, resource header cells using [`renderCell`](https://ej2.syncfusion.com/vue/documentation/api/schedule#rendercell) event by checking the [`elementType`](https://ej2.syncfusion.com/vue/documentation/api/schedule/renderCellEventArgs/#elementtype) option within the event. You can check elementType with any of the following.
 
 | Element type | Description |
 |-------|---------|
diff --git a/ej2-vue/schedule/context-menu.md b/ej2-vue/schedule/context-menu.md
index 36333bcdd..75ca73df7 100644
--- a/ej2-vue/schedule/context-menu.md
+++ b/ej2-vue/schedule/context-menu.md
@@ -10,11 +10,11 @@ domainurl: ##DomainURL##
 
 # Context menu in Vue Schedule component
 
-You can display context menu on work cells and appointments of Scheduler by making use of the `ContextMenu` control manually from the application end. In the following code example, context menu control is being added from sample end and set its target as `Scheduler`.
+You can display context menu on work cells and appointments of Scheduler by making use of the [`ContextMenu`](https://ej2.syncfusion.com/vue/documentation/context-menu/getting-started) control manually from the application end. In the following code example, context menu control is being added from sample end and set its target as `Scheduler`.
 
 On Scheduler cells, you can display the menu items such as `New Event`, `New Recurring Event` and `Today` option. For appointments, you can display its related options such as `Edit Event` and `Delete Event`. The default event window can be opened for appointment creation and editing using the [`openEditor`](../api/schedule/#openeditor) method of Scheduler.
 
-The deletion of appointments can be done by using the `deleteEvent` public method. Also, the [`selectedDate`](../api/schedule/#selecteddate) property can be used to navigate between different dates.
+The deletion of appointments can be done by using the [`deleteEvent`](https://ej2.syncfusion.com/vue/documentation/api/schedule#deleteevent) public method. Also, the [`selectedDate`](../api/schedule/#selecteddate) property can be used to navigate between different dates.
 
 > You can also display custom menu options on Scheduler cells and appointments. Context menu will open on tap-hold in responsive mode.
 
diff --git a/ej2-vue/schedule/crud-actions.md b/ej2-vue/schedule/crud-actions.md
index 8327cee8b..d6203ada9 100644
--- a/ej2-vue/schedule/crud-actions.md
+++ b/ej2-vue/schedule/crud-actions.md
@@ -28,7 +28,7 @@ In case, if you need to add some other additional fields to the editor window, t
 
 ### Creation using addEvent method
 
-The appointments can be created dynamically by using `addEvent` method. Either you can add a single or a collection of appointment objects using `addEvent` method. The following code example let you know how to use the `addEvent` method to create multiple appointments simultaneously.
+The appointments can be created dynamically by using [`addEvent`](https://ej2.syncfusion.com/vue/documentation/api/schedule#addevent) method. Either you can add a single or a collection of appointment objects using `addEvent` method. The following code example let you know how to use the `addEvent` method to create multiple appointments simultaneously.
 
 {% tabs %}
 {% highlight html tabtitle="Composition API (~/src/App.vue)" %}
@@ -117,9 +117,9 @@ You can open the default editor window filled with appointment details by double
 
 ### Update using saveEvent method
 
-The appointments can be edited and updated manually using the `saveEvent` method. The following code examples shows how to edit the normal and recurring events.
+The appointments can be edited and updated manually using the [`saveEvent`](https://ej2.syncfusion.com/vue/documentation/api/schedule#saveevent) method. The following code examples shows how to edit the normal and recurring events.
 
-**Normal event** - Here, an event with ID `3` is edited and its subject is changed with a new text. When the modified data object is passed onto the `saveEvent` method, the changes gets reflected onto the original event. The `Id` field is mandatory in this edit process, where the modified event object should hold the valid `Id` value that exists in the Scheduler data source.
+**Normal event** - Here, an event with ID `3` is edited and its subject is changed with a new text. When the modified data object is passed onto the [`saveEvent`](https://ej2.syncfusion.com/vue/documentation/api/schedule#saveevent) method, the changes gets reflected onto the original event. The `Id` field is mandatory in this edit process, where the modified event object should hold the valid `Id` value that exists in the Scheduler data source.
 
 {% tabs %}
 {% highlight html tabtitle="Composition API (~/src/App.vue)" %}
@@ -132,11 +132,11 @@ The appointments can be edited and updated manually using the `saveEvent` method
         
 {% previewsample "page.domainurl/code-snippet/schedule/edit-event-cs1" %}
 
-**Recurring event** - The following code example shows how to edit a single occurrence of a recurring event. In this case, the modified data should hold an additional field namely `RecurrenceID` mapping to its parent recurring event's Id value. Also, this modified occurrence will be considered as a new event in the Scheduler dataSource, where it is linked with its parent event through the `RecurrenceID` field value. The `saveEvent` method takes 2 arguments, first one accepting the modified event data object and second argument accepting either of the 2 text values - `EditOccurrence` or `EditSeries`.
+**Recurring event** - The following code example shows how to edit a single occurrence of a recurring event. In this case, the modified data should hold an additional field namely [`RecurrenceID`](https://ej2.syncfusion.com/vue/documentation/api/schedule/field/#recurrenceid) mapping to its parent recurring event's Id value. Also, this modified occurrence will be considered as a new event in the Scheduler dataSource, where it is linked with its parent event through the [`RecurrenceID`](https://ej2.syncfusion.com/vue/documentation/api/schedule/field/#recurrenceid) field value. The [`saveEvent`](https://ej2.syncfusion.com/vue/documentation/api/schedule#saveevent) method takes 2 arguments, first one accepting the modified event data object and second argument accepting either of the 2 text values - `EditOccurrence` or `EditSeries`.
 
 When the second argument is passed as `EditOccurrence`, which means that the passed event data is a single modified occurrence - whereas if the second argument is passed as `EditSeries`, it means that the modified data needs to be edited as a whole series and therefore no new event object will be maintained in the Scheduler dataSource.
 
-In case of modifying the single occurrence, it is also necessary to update the `RecurrenceException` field of parent event altogether with the occurrence editing. To know more about how to set `RecurrenceException` values, refer the [recurring events](./appointments/#adding-exceptions) topic.
+In case of modifying the single occurrence, it is also necessary to update the [`RecurrenceException`](https://ej2.syncfusion.com/vue/documentation/api/schedule/field/#recurrenceexception) field of parent event altogether with the occurrence editing. To know more about how to set [`RecurrenceException`](https://ej2.syncfusion.com/vue/documentation/api/schedule/field/#recurrenceexception) values, refer the [recurring events](./appointments/#adding-exceptions) topic.
 
 {% tabs %}
 {% highlight html tabtitle="Composition API (~/src/App.vue)" %}
@@ -188,9 +188,9 @@ The recurring appointments can be edited in either of the following two ways.
 
 **Editing single occurrence** - When you double click on a recurring event, a popup prompts you to choose either to edit the single event or entire series. From this, if you choose to select **EDIT EVENT** option, a single occurrence of the recurring appointment alone will be edited. The following process takes place while editing a single occurrence,
 
-* A new event will be created from the parent event data and added to the Scheduler dataSource, with all its default field values overwritten with the newly modified data and additionally, the `recurrenceID` field will be added to it, that holds the `id` value of the parent recurring event. Also, a new `Id` will be generated for this event in the dataSource.
+* A new event will be created from the parent event data and added to the Scheduler dataSource, with all its default field values overwritten with the newly modified data and additionally, the [`recurrenceID`](https://ej2.syncfusion.com/vue/documentation/api/schedule/field/#recurrenceid) field will be added to it, that holds the `id` value of the parent recurring event. Also, a new `Id` will be generated for this event in the dataSource.
 
-* The parent recurring event needs to be updated with appropriate `recurrenceException` field to hold the edited occurrence appointment's date collection.
+* The parent recurring event needs to be updated with appropriate [`recurrenceException`](https://ej2.syncfusion.com/vue/documentation/api/schedule/field/#recurrenceexception) field to hold the edited occurrence appointment's date collection.
 
 Therefore, when a single occurrence is edited from a recurring event, the batch action takes place by allowing both the `Add` and `Edit` action requests to take place together.
 
@@ -292,13 +292,13 @@ if (param.action == "remove" || (param.action == "batch" && param.deleted != nul
 
 ### How to edit from the current and following events of a series
 
-The recurring appointments can be edited from current and following events when enable the property `editFollowingEvents`.
+The recurring appointments can be edited from current and following events when enable the property [`editFollowingEvents`](https://ej2.syncfusion.com/vue/documentation/api/schedule/eventSettings/#editfollowingevents).
 
 **Editing Following Events** - When you double click on a recurring event, a popup prompts you to choose either to edit the single event or Edit Following Events or entire series. From this, if you choose to select **EDIT FOLLOWING EVENTS** option, a current and following events of the recurring appointment will be edited. The following process takes place while editing a following events,
 
-* A new event will be created from the parent event data and added to the Scheduler dataSource, with all its default field values overwritten with the newly modified data and additionally, the `followingID` field will be added to it, that holds the `id` value of the immediate parent recurring event. Also, a new `Id` will be generated for this event in the dataSource.
+* A new event will be created from the parent event data and added to the Scheduler dataSource, with all its default field values overwritten with the newly modified data and additionally, the [`followingID`](https://ej2.syncfusion.com/vue/documentation/api/schedule/field/#followingid) field will be added to it, that holds the [`id`](https://ej2.syncfusion.com/vue/documentation/api/schedule/field/#id) value of the immediate parent recurring event. Also, a new `Id` will be generated for this event in the dataSource.
 
-* The parent recurring event needs to be updated with appropriate `recurrenceRule` field to hold the modified occurrence appointment's end date.
+* The parent recurring event needs to be updated with appropriate [`recurrenceRule`](https://ej2.syncfusion.com/vue/documentation/api/schedule/field/#recurrencerule) field to hold the modified occurrence appointment's end date.
 
 Therefore, when a following events are edited from a recurring event, the batch action takes place by allowing the `Add`, `Edit` and `Delete` action requests to take place together.
 
@@ -400,9 +400,9 @@ When you double click an event, the default editor window will be opened which i
 
 ### Deletion using deleteEvent method
 
-The appointments can be removed manually using the `deleteEvent` method. The following code examples shows how to edit the normal and recurring events.
+The appointments can be removed manually using the [`deleteEvent`](https://ej2.syncfusion.com/vue/documentation/api/schedule#deleteevent) method. The following code examples shows how to edit the normal and recurring events.
 
-**Normal event** - You can delete the normal appointments of Scheduler by simply passing its `Id` value or the entire event object collection to the `deleteEvent` method.
+**Normal event** - You can delete the normal appointments of Scheduler by simply passing its `Id` value or the entire event object collection to the [`deleteEvent`](https://ej2.syncfusion.com/vue/documentation/api/schedule#deleteevent) method.
 
 {% tabs %}
 {% highlight html tabtitle="Composition API (~/src/App.vue)" %}
@@ -465,7 +465,7 @@ The recurring events can be deleted in either of the following two ways.
 **Single occurrence** - When you attempt to delete the recurring events, a popup prompts you to choose either to delete the single event or entire series. From this, if you choose to select **DELETE EVENT** option, a single occurrence of the recurring appointment alone will be removed. The following process takes place while removing a single occurrence,
 
 * The selected occurrence will be deleted from the Scheduler user interface.
-* In code, the parent recurring event object will be updated with appropriate `recurrenceException` field, to hold the deleted occurrence appointment's date collection.
+* In code, the parent recurring event object will be updated with appropriate  [`recurrenceException`](https://ej2.syncfusion.com/vue/documentation/api/schedule/field/#recurrenceexception) field, to hold the deleted occurrence appointment's date collection.
 
 Therefore, when a single occurrence is deleted from a recurring event, the `update` action takes place on the parent recurring event as shown in the following code example.
 
@@ -520,12 +520,12 @@ if (param.action == "remove" || (param.action == "batch" && param.deleted != nul
 
 ### How to delete only the current and following events of a series
 
-The recurring events can be deleted from current and following events only when enable `editFollowingEvents` property.
+The recurring events can be deleted from current and following events only when enable [`editFollowingEvents`](https://ej2.syncfusion.com/vue/documentation/api/schedule/eventSettings/#editfollowingevents) property.
 
 **Delete Following Events** - When you attempt to delete the recurring events, a popup prompts you to choose either to delete the single event or Following Events or entire series. From this, if you choose to select **FOLLOWING EVENT** option, a current and following events of the recurring appointment alone will be removed. The following process takes place while removing a single occurrence,
 
 * The selected occurrence and the following events in same series will be deleted from the Scheduler user interface.
-* In code, the parent recurring event object will be updated with appropriate `recurrenceRule` field, to update the end date of the recurring events.
+* In code, the parent recurring event object will be updated with appropriate [`recurrenceRule`](https://ej2.syncfusion.com/vue/documentation/api/schedule/field/#recurrencerule) field, to update the end date of the recurring events.
 
 Therefore, when following events are deleted from a recurring event, the `remove` and `update` action takes place on the immediate parent recurring event as shown in the following code example.
 
diff --git a/ej2-vue/schedule/data-binding.md b/ej2-vue/schedule/data-binding.md
index b07c37931..f7c20997c 100644
--- a/ej2-vue/schedule/data-binding.md
+++ b/ej2-vue/schedule/data-binding.md
@@ -32,7 +32,7 @@ To bind local JSON data to the Scheduler, you can simply assign a JavaScript obj
 
 > By default, `DataManager` uses `JsonAdaptor` for binding local data.
 
-You can also bind different field names to the default event fields as well as include additional custom fields to the event object collection which can be referred [here](./appointments/#event-fields).
+> You can also bind different field names to the default event fields as well as include additional `custom fields` to the event object collection which can be referred [here](./appointments/#event-fields).
 
 ## Binding remote data
 
@@ -380,7 +380,7 @@ namespace ScheduleSample.Controllers
 
 ## Configuring Scheduler with Google API service
 
-We have assigned our custom created Google Calendar url to the DataManager and assigned the same to the Scheduler `dataSource`. Since the events data retrieved from the Google Calendar will be in its own object format, therefore it needs to be resolved manually within the Scheduler’s `dataBinding` event. Within this event, the event fields needs to be mapped properly and then assigned to the result.
+We have assigned our custom created Google Calendar url to the DataManager and assigned the same to the Scheduler [`dataSource`](https://ej2.syncfusion.com/vue/documentation/api/schedule/eventSettings/#datasource). Since the events data retrieved from the Google Calendar will be in its own object format, therefore it needs to be resolved manually within the Scheduler’s [`dataBinding`](https://ej2.syncfusion.com/vue/documentation/api/schedule#databinding) event. Within this event, the event fields needs to be mapped properly and then assigned to the result.
 
 {% tabs %}
 {% highlight html tabtitle="Composition API (~/src/App.vue)" %}
diff --git a/ej2-vue/schedule/editor-template.md b/ej2-vue/schedule/editor-template.md
index d873a9129..03b1084fc 100644
--- a/ej2-vue/schedule/editor-template.md
+++ b/ej2-vue/schedule/editor-template.md
@@ -18,7 +18,7 @@ The editor window usually opens on the Scheduler, when a cell or event is double
 
 In mobile devices, you can open the detailed editor window in edit mode by clicking the edit icon on the popup, that opens on single tapping an event. You can also open it in add mode by single tapping a cell, which will display a `+` indication, clicking on it again will open the editor window.
 
-> You can also prevent the editor window from opening, by rendering Scheduler in a `readonly` mode or by doing code customization within the [`popupOpen`](../api/schedule/#popupopen) event.
+> You can also prevent the editor window from opening, by rendering Scheduler in a [`readonly`](https://ej2.syncfusion.com/vue/documentation/api/schedule#readonly) mode or by doing code customization within the [`popupOpen`](../api/schedule/#popupopen) event.
 
 ### How to change the editor window header title and text of footer buttons
 
@@ -37,7 +37,7 @@ You can change the header title and the text of buttons displayed at the footer
 
 ### How to change the label text of default editor fields
 
-To change the default labels such as Subject, Location and other field names in the editor window, make use of the `title` property available within the field option of `eventSettings`.
+To change the default labels such as Subject, Location and other field names in the editor window, make use of the `title` property available within the field option of [`eventSettings`](https://ej2.syncfusion.com/vue/documentation/api/schedule/eventSettings/).
 
 {% tabs %}
 {% highlight html tabtitle="Composition API (~/src/App.vue)" %}
@@ -69,7 +69,7 @@ It is possible to validate the required fields of the editor window from client-
 
 ### Add additional fields to the default editor
 
-The additional fields can be added to the default event editor by making use of the [`popupOpen`](../api/schedule/#popupopen) event which gets triggered before the event editor opens on the Scheduler. The `popupOpen` is a client-side event that triggers before any of the generic popups opens on the Scheduler. The additional field (any of the form elements) should be added with a common class name `e-field`, so as to handle and process those additional data along with the default event object. In the following example, an additional field `Event Type` has been added to the default event editor and its value is processed accordingly.
+The additional fields can be added to the default event editor by making use of the [`popupOpen`](../api/schedule/#popupopen) event which gets triggered before the event editor opens on the Scheduler. The [`popupOpen`](https://ej2.syncfusion.com/vue/documentation/api/schedule#popupopen) is a client-side event that triggers before any of the generic popups opens on the Scheduler. The additional field (any of the form elements) should be added with a common class name `e-field`, so as to handle and process those additional data along with the default event object. In the following example, an additional field `Event Type` has been added to the default event editor and its value is processed accordingly.
 
 {% tabs %}
 {% highlight html tabtitle="Composition API (~/src/App.vue)" %}
@@ -84,7 +84,7 @@ The additional fields can be added to the default event editor by making use of
 
 ### Customizing the default time duration in editor window
 
-In default event editor window, start and end time duration are processed based on the `interval` value set within the [`timeScale`](../api/schedule/#timescale) property. By default, `interval` value is set to 30, and therefore the start/end time duration within the event editor will be in a 30 minutes time difference. You can change this duration value by changing the `duration` option within the [`popupOpen`](../api/schedule/#popupopen) event as shown in the following code example.
+In default event editor window, start and end time duration are processed based on the [`interval`](https://ej2.syncfusion.com/vue/documentation/api/schedule/timeScale/#interval) value set within the [`timeScale`](../api/schedule/#timescale) property. By default, [`interval`](https://ej2.syncfusion.com/vue/documentation/api/schedule/timeScale/#interval) value is set to 30, and therefore the start/end time duration within the event editor will be in a 30 minutes time difference. You can change this duration value by changing the [`duration`](https://ej2.syncfusion.com/vue/documentation/api/schedule/popupOpenEventArgs/#duration) option within the [`popupOpen`](../api/schedule/#popupopen) event as shown in the following code example.
 
 {% tabs %}
 {% highlight html tabtitle="Composition API (~/src/App.vue)" %}
@@ -112,7 +112,7 @@ It is possible to prevent the display of editor and quick popup windows by passi
         
 {% previewsample "page.domainurl/code-snippet/schedule/editor-window-cs6" %}
 
-In case, if you need to prevent only specific popups on Scheduler, then you can check the condition based on the popup type. The types of the popup that can be checked within the `popupOpen` event are as follows.
+In case, if you need to prevent only specific popups on Scheduler, then you can check the condition based on the popup type. The types of the popup that can be checked within the [`popupOpen`](https://ej2.syncfusion.com/vue/documentation/api/schedule#popupopen) event are as follows.
 
 | Type | Description |
 |------|-------------|
@@ -128,7 +128,7 @@ In case, if you need to prevent only specific popups on Scheduler, then you can
 
 ### Customizing timezone collection in the editor window
 
-By default, the timezone collections in the editor window have been loaded with built-in timezone collections. Now we can be able to customize the timezone collections using the `timezoneDataSource` property with the collection of `TimezoneFields` data.
+By default, the timezone collections in the editor window have been loaded with built-in timezone collections. Now we can be able to customize the timezone collections using the [`timezoneDataSource`](https://ej2.syncfusion.com/vue/documentation/api/schedule#timezonedatasource) property with the collection of  [`TimezoneFields`](https://ej2.syncfusion.com/vue/documentation/api/schedule/timezoneFields/) data.
 
 {% tabs %}
 {% highlight html tabtitle="Composition API (~/src/App.vue)" %}
@@ -145,7 +145,7 @@ By default, the timezone collections in the editor window have been loaded with
 
 The event editor window can be customized by making use of the [`editorTemplate`](../api/schedule/#editortemplate) option. Here, the custom window design is built with the required fields using the script template and its type should be of **text/x-template**.
 
-Each field defined within template should contain the **e-field** class, so as to allow the processing of those field values internally. The ID of this customized script template section is assigned to the `editorTemplate` option, so that these customized fields will be replaced onto the default editor window.
+Each field defined within template should contain the **e-field** class, so as to allow the processing of those field values internally. The ID of this customized script template section is assigned to the [`editorTemplate`](https://ej2.syncfusion.com/vue/documentation/api/schedule#editortemplate) option, so that these customized fields will be replaced onto the default editor window.
 
 >Note: **e-field** class only applicable for **DropDownList**, **DateTimePicker**, **MultiSelect**, **DatePicker**, **CheckBox** and **TextBox** components. Since we have processed the field values internally for the above mentioned components.
 
@@ -234,7 +234,7 @@ The **e-field** class is not added to each field defined within the template, so
 
 Note: You can allow to retrieve the data only on the `save` and `delete` option. Data cannot be retrieved on the `close` and `cancel` options in the editor window.
 
-The following code example shows how to save the customized event editor using a template by the `popupClose` event.
+The following code example shows how to save the customized event editor using a template by the [`popupClose`](https://ej2.syncfusion.com/vue/documentation/api/schedule#popupclose) event.
 
 {% tabs %}
 {% highlight html tabtitle="Composition API (~/src/App.vue)" %}
@@ -282,7 +282,7 @@ By default, these popups are displayed over cells and appointments of Scheduler
 
 ### How to open QuickInfo popup on multiple cell selection
 
-By default the `QuickInfo` popup will open on single click of the cell. To open the quick info popup on multiple cell selection, you need to select the cells and press `enter` key. You can open this popup immediately after multiple cell selection by setting up `true` to `quickInfoOnSelectionEnd` property where as its default value is `false`.
+By default the `QuickInfo` popup will open on single click of the cell. To open the quick info popup on multiple cell selection, you need to select the cells and press `enter` key. You can open this popup immediately after multiple cell selection by setting up `true` to [`quickInfoOnSelectionEnd`](https://ej2.syncfusion.com/vue/documentation/api/schedule#quickinfoonselectionend) property where as its default value is `false`.
 
 {% tabs %}
 {% highlight html tabtitle="Composition API (~/src/App.vue)" %}
@@ -328,7 +328,7 @@ The look and feel of the built-in quick popup window, which opens when single cl
         
 {% previewsample "page.domainurl/code-snippet/schedule/quick-info-cs1" %}
 
-> The quick popup in adaptive mode can also be customized using `quickInfoTemplates` using `e-device` class.
+> The quick popup in adaptive mode can also be customized using [`quickInfoTemplates`](https://ej2.syncfusion.com/vue/documentation/api/schedule#quickinfotemplates)  using `e-device` class.
 
 ## More events indicator and popup
 
@@ -368,7 +368,7 @@ The following code example shows you how to customize the default more indicator
 
 ### How to prevent the display of popup when clicking on the more text indicator
 
-It is possible to prevent the display of popup window by passing the value `true` to `cancel` option within the `MoreEventsClick` event.
+It is possible to prevent the display of popup window by passing the value `true` to `cancel` option within the [`MoreEventsClick`](https://ej2.syncfusion.com/vue/documentation/api/schedule#moreeventsclick) event.
 
 {% tabs %}
 {% highlight html tabtitle="Composition API (~/src/App.vue)" %}
diff --git a/ej2-vue/schedule/exporting.md b/ej2-vue/schedule/exporting.md
index a7bf2c211..59335e44b 100644
--- a/ej2-vue/schedule/exporting.md
+++ b/ej2-vue/schedule/exporting.md
@@ -14,7 +14,7 @@ The Scheduler supports exporting all its appointments both to an Excel or ICS ex
 
 ## Excel Exporting
 
-The Scheduler allows you to export all its events into an Excel format file by using the [`exportToExcel`] client-side method. By default, it exports all the default fields of Scheduler mapped through `eventSettings` property.
+The Scheduler allows you to export all its events into an Excel format file by using the [`exportToExcel`] client-side method. By default, it exports all the default fields of Scheduler mapped through [`eventSettings`](https://ej2.syncfusion.com/vue/documentation/api/schedule/eventSettings/)  property.
 
 > Before you start with excel exporting functionality, you need to import and inject the `ExcelExport` module from the '@syncfusion/ej2-schedule' package using the `Inject` method of Scheduler.
 
@@ -31,7 +31,7 @@ The Scheduler allows you to export all its events into an Excel format file by u
 
 ### Exporting with custom fields
 
-By default, Scheduler exports all the default event fields that are mapped to it through the `eventSettings` property. To limit the number of fields on the exported excel file, it provides an option to export only the custom fields of the event data. To export such custom fields alone, define the required `fields` through the [`ExportOptions`](../api/schedule/exportOptions/) interface and pass it as argument to the `exportToExcel` method as shown in the following example. For example: `['Id', 'Subject', 'StartTime', 'EndTime', 'Location']`.
+By default, Scheduler exports all the default event fields that are mapped to it through the [`eventSettings`](https://ej2.syncfusion.com/vue/documentation/api/schedule/eventSettings/) property. To limit the number of fields on the exported excel file, it provides an option to export only the custom fields of the event data. To export such custom fields alone, define the required `fields` through the [`ExportOptions`](../api/schedule/exportOptions/) interface and pass it as argument to the `exportToExcel` method as shown in the following example. For example: `['Id', 'Subject', 'StartTime', 'EndTime', 'Location']`.
 
 {% tabs %}
 {% highlight html tabtitle="Composition API (~/src/App.vue)" %}
@@ -46,7 +46,7 @@ By default, Scheduler exports all the default event fields that are mapped to it
 
 ### Exporting individual occurrences of a recurring series
 
-By default, the Scheduler exports recurring events as a single data by exporting only its parent record into the excel file. If you want to export each individual occurrences of a recurring series appointment as separate records in an Excel file, define the `includeOccurrences` option as `true` through the [`ExportOptions`](../api/schedule/exportOptions/) interface and pass it as argument to the `exportToExcel` method. By default, the `includeOccurrences` option is set to `false`.
+By default, the Scheduler exports recurring events as a single data by exporting only its parent record into the excel file. If you want to export each individual occurrences of a recurring series appointment as separate records in an Excel file, define the [`includeOccurrences`](https://ej2.syncfusion.com/vue/documentation/api/schedule/exportOptions/#includeoccurrences) option as `true` through the [`ExportOptions`](../api/schedule/exportOptions/) interface and pass it as argument to the [`exportToExcel`](https://ej2.syncfusion.com/vue/documentation/api/schedule#exporttoexcel) method. By default, the [`includeOccurrences`](https://ej2.syncfusion.com/vue/documentation/api/schedule/exportOptions/#includeoccurrences) option is set to `false`.
 
 {% tabs %}
 {% highlight html tabtitle="Composition API (~/src/App.vue)" %}
@@ -61,7 +61,7 @@ By default, the Scheduler exports recurring events as a single data by exporting
 
 ### Exporting custom event data
 
-By default, the whole event collection bound to the Scheduler gets exported as an excel file. To export only specific events of Scheduler or some custom event collection, you need to pass those custom data collection as a parameter to the `exportToExcel` method as shown in this following example, through the `customData` option of [`ExportOptions`](../api/schedule/exportOptions/) interface.
+By default, the whole event collection bound to the Scheduler gets exported as an excel file. To export only specific events of Scheduler or some custom event collection, you need to pass those custom data collection as a parameter to the [`exportToExcel`](https://ej2.syncfusion.com/vue/documentation/api/schedule#exporttoexcel) method as shown in this following example, through the `customData` option of [`ExportOptions`](../api/schedule/exportOptions/) interface.
 
 > By default, the event data are taken from Scheduler dataSource.
 
@@ -78,7 +78,7 @@ By default, the whole event collection bound to the Scheduler gets exported as a
 
 ### Customizing column header with custom fields exporting
 
-Using fields property, we can only export the defined fields into excel without customizing the header. Now we can provide the alternate support to customize the header of custom fields exporting using the `fieldsInfo` option through the [`ExportFieldInfo`](../api/schedule/exportFieldInfo/) interface and pass it as an argument to the `exportToExcel` method as shown in the following example.
+Using fields property, we can only export the defined fields into excel without customizing the header. Now we can provide the alternate support to customize the header of custom fields exporting using the `fieldsInfo` option through the [`ExportFieldInfo`](../api/schedule/exportFieldInfo/) interface and pass it as an argument to the [`exportToExcel`](https://ej2.syncfusion.com/vue/documentation/api/schedule#exporttoexcel) method as shown in the following example.
 
 {% tabs %}
 {% highlight html tabtitle="Composition API (~/src/App.vue)" %}
@@ -93,7 +93,7 @@ Using fields property, we can only export the defined fields into excel without
 
 ### Export with custom file name
 
-By default, the Scheduler allows you to download the exported Excel file with a name `Schedule.xlsx`. It also provides an option to export the excel file with a custom file name, by defining the desired `fileName` through the [`ExportOptions`](../api/schedule/exportOptions/) interface and passing it as an argument to the `exportToExcel` method.
+By default, the Scheduler allows you to download the exported Excel file with a name `Schedule.xlsx`. It also provides an option to export the excel file with a custom file name, by defining the desired `fileName` through the [`ExportOptions`](../api/schedule/exportOptions/) interface and passing it as an argument to the [`exportToExcel`](https://ej2.syncfusion.com/vue/documentation/api/schedule#exporttoexcel) method.
 
 {% tabs %}
 {% highlight html tabtitle="Composition API (~/src/App.vue)" %}
@@ -140,7 +140,7 @@ The Scheduler exports the event data to CSV format with `,` as separator. You ca
 
 You can export the Scheduler events to a calendar (.ics) file format, and open it on any of the other default calendars such as Google or Outlook. To export the events of Scheduler to an ICS file, you need to first import the `ICalendarExport` module from `@syncfusion/ej2-schedule` package and then inject it using the `Schedule.Inject(ICalendarExport)` method.
 
-The following code example shows how the Scheduler events are exported to a calendar (.ics) file by making use of the `exportToICalendar` public method.
+The following code example shows how the Scheduler events are exported to a calendar (.ics) file by making use of the [`exportToICalendar`](https://ej2.syncfusion.com/vue/documentation/api/schedule#exporttoicalendar)  public method.
 
 {% tabs %}
 {% highlight html tabtitle="Composition API (~/src/App.vue)" %}
@@ -200,7 +200,7 @@ The Scheduler allows you to print the Scheduler element by using the [`print`](.
 
 ### Using print method without options
 
-You can print the Schedule element with the current view by using the [`print`](../api/schedule/#print) method without passing the options. The following example shows how to print the Scheduler using the `print` method without passing options.
+You can print the Schedule element with the current view by using the [`print`](../api/schedule/#print) method without passing the options. The following example shows how to print the Scheduler using the [`print`](https://ej2.syncfusion.com/vue/documentation/api/schedule#print) method without passing options.
 
 {% tabs %}
 {% highlight html tabtitle="Composition API (~/src/App.vue)" %}
@@ -215,7 +215,7 @@ You can print the Schedule element with the current view by using the [`print`](
 
 ### Using a print method with options
 
-You can print the Schedule element based on your needs using the [`print`](../api/schedule/#print) method by passing the print options used in this example with its values. The following example shows how to print the Scheduler using the `print` method by passing the options.
+You can print the Schedule element based on your needs using the [`print`](../api/schedule/#print) method by passing the print options used in this example with its values. The following example shows how to print the Scheduler using the [`print`](https://ej2.syncfusion.com/vue/documentation/api/schedule#print) method by passing the options.
 
 {% tabs %}
 {% highlight html tabtitle="Composition API (~/src/App.vue)" %}
diff --git a/ej2-vue/schedule/frequently-asked-questions.md b/ej2-vue/schedule/frequently-asked-questions.md
index f704174d7..3a5f041b3 100644
--- a/ej2-vue/schedule/frequently-asked-questions.md
+++ b/ej2-vue/schedule/frequently-asked-questions.md
@@ -99,7 +99,7 @@ The above problem occurs when missing CSS references for the scheduler in a proj
 
 ## QuickInfoTemplate at bottom
 
-When using the `quickInfoTemplate` in scheduler, sometimes quickinfo popup not shown fully at the bottom area of scheduler. You can resolve this by using `cellClick` and `eventClick` events and below code snippet.
+When using the [`quickInfoTemplate`](https://ej2.syncfusion.com/vue/documentation/api/schedule#quickinfotemplates) in scheduler, sometimes quickinfo popup not shown fully at the bottom area of scheduler. You can resolve this by using [`cellClick`](https://ej2.syncfusion.com/vue/documentation/api/schedule#cellclick) and [`eventClick`](https://ej2.syncfusion.com/vue/documentation/api/schedule#eventclick) events and below code snippet.
 
 ```
 <template>
@@ -117,13 +117,14 @@ When using the `quickInfoTemplate` in scheduler, sometimes quickinfo popup not s
 var eventAdded = false;
 
 methods: {
- onClick: function () {
-  if (!this.eventAdded) {
-    let popupInstance = document.querySelector('.e-quick-popup-wrapper').ej2_instances[0];
-    popupInstance.open = () => {
-      popupInstance.refreshPosition();
-    };
-    this.eventAdded = true;
+  onClick: function () {
+    if (!this.eventAdded) {
+      let popupInstance = document.querySelector('.e-quick-popup-wrapper').ej2_instances[0];
+      popupInstance.open = () => {
+        popupInstance.refreshPosition();
+      };
+      this.eventAdded = true;
+    }
   }
 }
 ```
diff --git a/ej2-vue/schedule/getting-started.md b/ej2-vue/schedule/getting-started.md
index 45cc40108..f926ca77e 100644
--- a/ej2-vue/schedule/getting-started.md
+++ b/ej2-vue/schedule/getting-started.md
@@ -42,7 +42,7 @@ yarn run serve
 
 When creating a new project, choose the option `Default ([Vue 2] babel, eslint)` from the menu.
 
-![Vue 2 project](../appearance/images/vue2-terminal.png)
+![Vue 2 project](./images/vue2-terminal.png)
 
 Once the `quickstart` project is set up with default settings, proceed to add Syncfusion components to the project.
 
@@ -171,7 +171,7 @@ The output will display the empty Scheduler.
 
 ## Populating appointments
 
-To populate the empty Scheduler with appointments, define either the local JSON data or remote data through the `dataSource` property available within the `eventSettings` option. To define any appointments, start and end time fields are mandatory. In the following example, you can see the appointment defined with default fields such as Id, Subject, StartTime and EndTime.
+To populate the empty Scheduler with appointments, define either the local JSON data or remote data through the [`dataSource`](https://ej2.syncfusion.com/vue/documentation/api/schedule/eventSettings/#datasource) property available within the [`eventSettings`](https://ej2.syncfusion.com/vue/documentation/api/schedule/eventSettings/) option. To define any appointments, start and end time fields are mandatory. In the following example, you can see the appointment defined with default fields such as Id, Subject, StartTime and EndTime.
 
 ```html
 <template>
diff --git a/ej2-vue/schedule/header-bar.md b/ej2-vue/schedule/header-bar.md
index a02d15478..eac7b5709 100644
--- a/ej2-vue/schedule/header-bar.md
+++ b/ej2-vue/schedule/header-bar.md
@@ -44,7 +44,7 @@ Apart from the default date navigation and view options available on the header
 
 ## Customizing header bar using events
 
-Apart from the default date navigation and view options available on the header bar, you can add custom items into the Scheduler header bar by making use of the `actionBegin` event. Here, an employee image is added to the header bar, clicking on which will open the popup showing that person's short profile information.
+Apart from the default date navigation and view options available on the header bar, you can add custom items into the Scheduler header bar by making use of the [`actionBegin`](https://ej2.syncfusion.com/vue/documentation/api/schedule#actionbegin) event. Here, an employee image is added to the header bar, clicking on which will open the popup showing that person's short profile information.
 
 {% tabs %}
 {% highlight html tabtitle="Composition API (~/src/App.vue)" %}
@@ -127,7 +127,7 @@ The [`dateRangeTemplate`](https://ej2.syncfusion.com/vue/documentation/api/sched
 
 ## Customizing header indent cells
 
-It is possible to customize the header indent cells using the `headerIndentTemplate` option and change the look and appearance in both the vertical and timeline views. In vertical views, You can customize the header indent cells at the hierarchy level and you can customize the resource header left indent cell in timeline views using the template option.
+It is possible to customize the header indent cells using the [`headerIndentTemplate`](https://ej2.syncfusion.com/vue/documentation/api/schedule#headerindenttemplate) option and change the look and appearance in both the vertical and timeline views. In vertical views, You can customize the header indent cells at the hierarchy level and you can customize the resource header left indent cell in timeline views using the template option.
 
 **Example:** To customize the header left indent cell to display resources text, refer to the below code example.
 
diff --git a/ej2-vue/schedule/header-rows.md b/ej2-vue/schedule/header-rows.md
index ef4f0239a..226135ddc 100644
--- a/ej2-vue/schedule/header-rows.md
+++ b/ej2-vue/schedule/header-rows.md
@@ -69,7 +69,7 @@ The week number can be displayed in a separate header row of the timeline Schedu
 
 ## Timeline view displaying dates of a complete year
 
-It is possible to display a complete year in a timeline view by setting `interval` value as 12 and defining **TimelineMonth** view option within the [`views`](../api/schedule/views/) property of Scheduler.
+It is possible to display a complete year in a timeline view by setting `interval`[`interval`](https://ej2.syncfusion.com/vue/documentation/api/schedule/views/#interval) value as 12 and defining **TimelineMonth** view option within the [`views`](../api/schedule/views/) property of Scheduler.
 
 {% tabs %}
 {% highlight html tabtitle="Composition API (~/src/App.vue)" %}
diff --git a/ej2-vue/schedule/how-to/add-edit-and-remove-events.md b/ej2-vue/schedule/how-to/add-edit-and-remove-events.md
index dc87a0053..0d18245b3 100644
--- a/ej2-vue/schedule/how-to/add-edit-and-remove-events.md
+++ b/ej2-vue/schedule/how-to/add-edit-and-remove-events.md
@@ -10,7 +10,7 @@ domainurl: ##DomainURL##
 
 # Add edit and remove events in Vue Schedule component
 
-CRUD actions can be manually performed on appointments using `addEvent`, `saveEvent` and `deleteEvent` methods as shown below.
+CRUD actions can be manually performed on appointments using [`addEvent`](https://ej2.syncfusion.com/vue/documentation/api/schedule/#addevent), [`saveEvent`](https://ej2.syncfusion.com/vue/documentation/api/schedule/#saveevent) and [`deleteEvent`](https://ej2.syncfusion.com/vue/documentation/api/schedule/#deleteevent) methods as shown below.
 
 ## Normal event
 
diff --git a/ej2-vue/schedule/how-to/enable-scroll-option-on-all-day-section.md b/ej2-vue/schedule/how-to/enable-scroll-option-on-all-day-section.md
index 5acdc2c63..0a868dc8b 100644
--- a/ej2-vue/schedule/how-to/enable-scroll-option-on-all-day-section.md
+++ b/ej2-vue/schedule/how-to/enable-scroll-option-on-all-day-section.md
@@ -1,6 +1,6 @@
 ---
 layout: post
-title: Enable scroll option on all day section in Vue Schedule component | Syncfusion
+title: Enable Scroll in All-Day Section of Vue Schedule | Syncfusion
 description: Learn here all about Enable scroll option on all day section in Syncfusion Vue Schedule component of Syncfusion Essential JS 2 and more.
 control: Enable scroll option on all day section 
 platform: ej2-vue
@@ -10,7 +10,7 @@ domainurl: ##DomainURL##
 
 # Enable scroll option on all day section in Vue Schedule component
 
-When you have larger number of appointments in all-day row, it is difficult to view all the appointments properly. In that case you can enable scroller option for all-day row by setting true to `enableAllDayScroll` whereas its default value is false. When setting this property to true, individual scroller for all-day row is enabled when it reaches its maximum height on expanding.
+When you have larger number of appointments in all-day row, it is difficult to view all the appointments properly. In that case you can enable scroller option for all-day row by setting `true` to [`enableAllDayScroll`](https://ej2.syncfusion.com/vue/documentation/api/schedule/#enablealldayscroll) whereas its default value is `false`. When setting this property to `true`, individual scroller for all-day row is enabled when it reaches its maximum height on expanding.
 
 >Note: This property is not applicable for Scheduler with height `auto`.
 
diff --git a/ej2-vue/schedule/how-to/open-event-editor-manually.md b/ej2-vue/schedule/how-to/open-event-editor-manually.md
index 87ccb14d2..ed97d7dd9 100644
--- a/ej2-vue/schedule/how-to/open-event-editor-manually.md
+++ b/ej2-vue/schedule/how-to/open-event-editor-manually.md
@@ -27,7 +27,7 @@ Scheduler allows the user to manually open the event editor on specific time or
 
 ## Open editor window on single click
 
-By default, Scheduler Editor window will open when double clicking the cells or appointments. You can also open the editor window with single click by using [`openEditor`](../api/schedule/#openeditor) method in `eventClick` and `cellClick` events of scheduler and setting false to [`showQuickInfo`](../api/schedule/#showquickinfo). The following example shows how to open editor window on single click of cells and appointments.
+By default, Scheduler Editor window will open when double clicking the cells or appointments. You can also open the editor window with single click by using [`openEditor`](../api/schedule/#openeditor) method in [`eventClick`](https://ej2.syncfusion.com/vue/documentation/api/schedule/#eventclick) and [`cellClick`](https://ej2.syncfusion.com/vue/documentation/api/schedule/#cellclick) events of scheduler and setting `false` to [`showQuickInfo`](../api/schedule/#showquickinfo). The following example shows how to open editor window on single click of cells and appointments.
 
 {% tabs %}
 {% highlight html tabtitle="Composition API (~/src/App.vue)" %}
diff --git a/ej2-vue/schedule/how-to/prevent-date-navigation.md b/ej2-vue/schedule/how-to/prevent-date-navigation.md
index b8abfec3c..92b0e2239 100644
--- a/ej2-vue/schedule/how-to/prevent-date-navigation.md
+++ b/ej2-vue/schedule/how-to/prevent-date-navigation.md
@@ -10,7 +10,7 @@ domainurl: ##DomainURL##
 
 # Prevent date navigation in Vue Schedule component
 
-We can prevent navigation while clicking on the date header by simply removing `e-navigate` class from header cells which can be achieved in the `renderCell` event as shown in the following code example.
+We can prevent navigation while clicking on the date header by simply removing `e-navigate` class from header cells which can be achieved in the [`renderCell`](https://ej2.syncfusion.com/vue/documentation/api/schedule/#rendercell) event as shown in the following code example.
 
 {% tabs %}
 {% highlight html tabtitle="Composition API (~/src/App.vue)" %}
diff --git a/ej2-vue/schedule/images/missing-css-reference.png b/ej2-vue/schedule/images/missing-css-reference.png
index f5121e3aa..572bdd268 100644
Binary files a/ej2-vue/schedule/images/missing-css-reference.png and b/ej2-vue/schedule/images/missing-css-reference.png differ
diff --git a/ej2-vue/schedule/images/vue2-terminal.png b/ej2-vue/schedule/images/vue2-terminal.png
new file mode 100644
index 000000000..b591ba09a
Binary files /dev/null and b/ej2-vue/schedule/images/vue2-terminal.png differ
diff --git a/ej2-vue/schedule/localization.md b/ej2-vue/schedule/localization.md
index 6348c5c59..25a9f6b20 100644
--- a/ej2-vue/schedule/localization.md
+++ b/ej2-vue/schedule/localization.md
@@ -230,7 +230,7 @@ L10n.load({
 
 ## Setting date format
 
-Scheduler can be used with all valid date formats and by default it follows the universal date format "MM/dd/yyyy". If the `dateFormat` property is not specified particularly, then it will work based on the locale that is assigned to the Scheduler. As the default locale applied on Scheduler is "en-US", this makes it to follow the "MM/dd/yyyy" pattern.
+Scheduler can be used with all valid date formats and by default it follows the universal date format "MM/dd/yyyy". If the [`dateFormat`](https://ej2.syncfusion.com/vue/documentation/api/schedule#dateformat) property is not specified particularly, then it will work based on the locale that is assigned to the Scheduler. As the default locale applied on Scheduler is "en-US", this makes it to follow the "MM/dd/yyyy" pattern.
 
 {% tabs %}
 {% highlight html tabtitle="Composition API (~/src/App.vue)" %}
@@ -245,7 +245,7 @@ Scheduler can be used with all valid date formats and by default it follows the
 
 ## Setting the time format
 
-Time formats is a way of representing the time value in different string formats in the Scheduler. By default, the time mode of the Scheduler can be either 12 or 24 hours format which is completely based on the `locale` set to the Scheduler. Since the default `locale` value of the Scheduler is en-US, the time mode will be set to 12 hours format automatically. You can also customize the format by using the `timeFormat` property. To know more about the time format standards, refer to the [Date and Time Format](https://ej2.syncfusion.com/vue/documentation/common/internationalization/#custom-formats) section.
+Time formats is a way of representing the time value in different string formats in the Scheduler. By default, the time mode of the Scheduler can be either 12 or 24 hours format which is completely based on the `locale` set to the Scheduler. Since the default `locale` value of the Scheduler is en-US, the time mode will be set to 12 hours format automatically. You can also customize the format by using the [`timeFormat`](https://ej2.syncfusion.com/vue/documentation/api/schedule#timeformat) property. To know more about the time format standards, refer to the [Date and Time Format](https://ej2.syncfusion.com/vue/documentation/common/internationalization/#custom-formats) section.
 
 The following example demonstrates the Scheduler component in 24 hours format.
 
@@ -260,7 +260,7 @@ The following example demonstrates the Scheduler component in 24 hours format.
         
 {% previewsample "page.domainurl/code-snippet/schedule/localization-cs4" %}
 
->Note: `timeFormat` property only accepts the valid time format's.
+>Note: [`timeFormat`](https://ej2.syncfusion.com/vue/documentation/api/schedule#timeformat) property only accepts the valid time format's.
 
 ## Displaying Scheduler in RTL mode
 
diff --git a/ej2-vue/schedule/module-injection.md b/ej2-vue/schedule/module-injection.md
index d955b216f..3e2cf883a 100644
--- a/ej2-vue/schedule/module-injection.md
+++ b/ej2-vue/schedule/module-injection.md
@@ -40,6 +40,6 @@ The required modules should be injected into the Scheduler using the `provide` m
   },
 ```
 
-**Note:** If a Scheduler `currentView` is set to any one of the available views without injecting that respective view module, then a script error will occur and the Scheduler will not render.
+**Note:** If a Scheduler [`currentView`](https://ej2.syncfusion.com/vue/documentation/api/schedule#currentview) is set to any one of the available views without injecting that respective view module, then a script error will occur and the Scheduler will not render.
 
 > You can refer to our [Vue Scheduler](https://www.syncfusion.com/vue-components/vue-scheduler) feature tour page for its groundbreaking feature representations. You can also explore our [Vue Scheduler example](https://ej2.syncfusion.com/vue/demos/#/material/schedule/overview.html) to knows how to present and manipulate data.
\ No newline at end of file
diff --git a/ej2-vue/schedule/recurrence-editor.md b/ej2-vue/schedule/recurrence-editor.md
index a1016549b..30049b515 100644
--- a/ej2-vue/schedule/recurrence-editor.md
+++ b/ej2-vue/schedule/recurrence-editor.md
@@ -12,7 +12,7 @@ domainurl: ##DomainURL##
 
 The Recurrence editor is integrated into Scheduler editor window by default, to process the recurrence rule generation for events. Apart from this, it can also be used as an individual component referring from the Scheduler repository to work with the recurrence related processes.
 
-> All the valid recurrence rule string mentioned in the [iCalendar](https://tools.ietf.org/html/rfc5545#section-3.3.10) specifications are applicable to use with the recurrence editor.
+> All the valid recurrence rule string mentioned in the [`iCalendar`](https://tools.ietf.org/html/rfc5545#section-3.3.10) specifications are applicable to use with the recurrence editor.
 
 ## Customizing the repeat type option in editor
 
@@ -24,7 +24,7 @@ By default, there are 5 types of repeat options available in recurrence editor s
 * Monthly
 * Yearly
 
-It is possible to customize the recurrence editor to display only the specific repeat options such as `Daily` and `Weekly` options alone by setting the appropriate `frequencies` option.
+It is possible to customize the recurrence editor to display only the specific repeat options such as `Daily` and `Weekly` options alone by setting the appropriate [`frequencies`](https://ej2.syncfusion.com/vue/documentation/api/recurrence-editor#frequencies) option.
 
 {% tabs %}
 {% highlight html tabtitle="Composition API (~/src/App.vue)" %}
@@ -60,7 +60,7 @@ By default, there are 3 types of end options available in the recurrence editor
 * Until
 * Count
 
-It is possible to customize the recurrence editor to display only the specific end options, such as the `Until` and `Count` options alone, by setting the appropriate `endTypes` option.
+It is possible to customize the recurrence editor to display only the specific end options, such as the `Until` and `Count` options alone, by setting the appropriate [`endTypes`](https://ej2.syncfusion.com/vue/documentation/api/recurrence-editor/#endtypes) option.
 
 {% tabs %}
 {% highlight html tabtitle="Composition API (~/src/App.vue)" %}
diff --git a/ej2-vue/schedule/resources.md b/ej2-vue/schedule/resources.md
index a9f091cfb..81d085a22 100644
--- a/ej2-vue/schedule/resources.md
+++ b/ej2-vue/schedule/resources.md
@@ -18,25 +18,25 @@ The HTML5 JavaScript Scheduler groups the resources based on different criteria.
 
 ## Resource fields
 
-The default options available within the `resources` collection are as follows,
+The default options available within the [`resources`](https://ej2.syncfusion.com/vue/documentation/api/schedule/group/#resources) collection are as follows,
 
 | Field name      |  Type   | Description |
 |-----------------|---------|----------------|
-| `field` | String | A value that binds to the resource field of event object. |
-| `title` | String | It holds the title of the resource field to be displayed on the event editor window. |
-| `name` | String | A unique resource name used for differentiating various resource objects while grouping. |
-| `allowMultiple` | Boolean | When set to `true`, allows multiple selection of resource names, thus creating multiple instances of same appointment for the selected resources. |
-| `dataSource` | Object | Assigns the resource `dataSource`, where data can be passed either as an array of JavaScript objects, or else can create an instance of [`DataManager`](https://ej2.syncfusion.com/documentation/api/data/dataManager/) in case of processing remote data and can be assigned to the `dataSource` property. With the remote data assigned to `dataSource`, check the available [adaptors](https://ej2.syncfusion.com/documentation/data/adaptors/) to customize the data processing. |
-| `query` | Query | Defines the external [`query`](https://ej2.syncfusion.com/documentation/api/data/query/) that will be executed along with the data processing. |
-| `idField` | String | Binds the resource ID field name from the resources `dataSource`. |
-| `expandedField` | String | Binds the `expandedField` name from the resources `dataSource`. It usually holds boolean value which decide whether the resource of timeline views is in collapse or expand state on initial load. |
-| `textField` | String | Binds the text field name from the resources `dataSource`. It usually holds the resource names. |
-| `groupIDField` | String | Binds the group ID field name from the resource `dataSource`. It usually holds the value of resource IDs of parent level resources. |
-| `colorField` | String | Binds the color field name from the resource `dataSource`. The color value mapped in this field will be applied to the events of resources. |
-| `startHourField` | String | Binds the start hour field name from the resource `dataSource`. It allows to provide different work start hour for the resources. |
-| `endHourField` | String | Binds the end hour field name from the resource `dataSource`. It allows to provide different work end hour for the resources. |
-| `workDaysField` | String | Binds the work days field name from the resources `dataSource`. It allows to provide different working days collection for the resources. |
-| `cssClassField` | String | Binds the custom CSS class field name from the resources `dataSource`. It maps the CSS class written for the specific resources and applies it to the events of those resources. |
+| [`field`](https://ej2.syncfusion.com/vue/documentation/api/schedule/resources/#field) | String | A value that binds to the resource field of event object. |
+| [`title`](https://ej2.syncfusion.com/vue/documentation/api/schedule/resources/#title) | String | It holds the title of the resource field to be displayed on the event editor window. |
+| [`name`](https://ej2.syncfusion.com/vue/documentation/api/schedule/resources/#name) | String | A unique resource name used for differentiating various resource objects while grouping. |
+| [`allowMultiple`](https://ej2.syncfusion.com/vue/documentation/api/schedule/resources/#allowmultiple) | Boolean | When set to `true`, allows multiple selection of resource names, thus creating multiple instances of same appointment for the selected resources. |
+| [`dataSource`](https://ej2.syncfusion.com/vue/documentation/api/schedule/resources/#datasource) | Object | Assigns the resource `dataSource`, where data can be passed either as an array of JavaScript objects, or else can create an instance of [`DataManager`](https://ej2.syncfusion.com/documentation/api/data/dataManager/) in case of processing remote data and can be assigned to the `dataSource` property. With the remote data assigned to `dataSource`, check the available [adaptors](https://ej2.syncfusion.com/documentation/data/adaptors/) to customize the data processing. |
+| [`query`](https://ej2.syncfusion.com/vue/documentation/api/schedule/resources/#query) | Query | Defines the external [`query`](https://ej2.syncfusion.com/documentation/api/data/query/) that will be executed along with the data processing. |
+| [`idField`](https://ej2.syncfusion.com/vue/documentation/api/schedule/resources/#idfield) | String | Binds the resource ID field name from the resources `dataSource`. |
+| [`expandedField`](https://ej2.syncfusion.com/vue/documentation/api/schedule/resources/#expandedfield) | String | Binds the `expandedField` name from the resources `dataSource`. It usually holds boolean value which decide whether the resource of timeline views is in collapse or expand state on initial load. |
+| [`textField`](https://ej2.syncfusion.com/vue/documentation/api/schedule/resources/#textfield) | String | Binds the text field name from the resources `dataSource`. It usually holds the resource names. |
+| [`groupIDField`](https://ej2.syncfusion.com/vue/documentation/api/schedule/resources/#groupidfield) | String | Binds the group ID field name from the resource `dataSource`. It usually holds the value of resource IDs of parent level resources. |
+| [`colorField`](https://ej2.syncfusion.com/vue/documentation/api/schedule/resources/#colorfield) | String | Binds the color field name from the resource `dataSource`. The color value mapped in this field will be applied to the events of resources. |
+| [`startHourField`](https://ej2.syncfusion.com/vue/documentation/api/schedule/resources/#starthourfield)  | String | Binds the start hour field name from the resource `dataSource`. It allows to provide different work start hour for the resources. |
+| [`endHourField`](https://ej2.syncfusion.com/vue/documentation/api/schedule/resources/#expandedfield) | String | Binds the end hour field name from the resource `dataSource`. It allows to provide different work end hour for the resources. |
+| [`workDaysField`](https://ej2.syncfusion.com/vue/documentation/api/schedule/resources/#workdaysfield) | String | Binds the work days field name from the resources `dataSource`. It allows to provide different working days collection for the resources. |
+| [`cssClassField`](https://ej2.syncfusion.com/vue/documentation/api/schedule/resources/#cssclassfield) | String | Binds the custom CSS class field name from the resources `dataSource`. It maps the CSS class written for the specific resources and applies it to the events of those resources. |
 
 ## Resource data binding
 
@@ -44,7 +44,7 @@ The data for resources can bind with Scheduler either as a local JSON collection
 
 ### Using local JSON data
 
-The following code example depicts how to bind the local JSON data to the `dataSource` of `resources` collection.
+The following code example depicts how to bind the local JSON data to the `dataSource` of [`resources`](https://ej2.syncfusion.com/vue/documentation/api/schedule/group/#resources) collection.
 
 {% tabs %}
 {% highlight html tabtitle="Composition API (~/src/App.vue)" %}
@@ -341,7 +341,7 @@ Learn how to add appointments from multiple resources to Vue Scheduler by watchi
         
 {% previewsample "page.domainurl/code-snippet/schedule/multiple-resources-cs1" %}
 
-> Setting `allowMultiple` to `true` in the above code example allows you to select multiple resources from the event editor and also creates multiple copies of the same appointment in the Scheduler for each resources while rendering.
+> Setting [`allowMultiple`](https://ej2.syncfusion.com/vue/documentation/api/schedule/resources/#allowmultiple) to `true` in the above code example allows you to select multiple resources from the event editor and also creates multiple copies of the same appointment in the Scheduler for each resources while rendering.
 
 ## Resource grouping
 
@@ -381,7 +381,7 @@ The following code example depicts how to group the multiple resources on Timeli
 
 ### Grouping single-level resources
 
-This kind of grouping allows the Scheduler to display all the resources at a single level simultaneously. The appointments mapped under resources will be displayed with the colors as per the `colorField` defined on the resources collection.
+This kind of grouping allows the Scheduler to display all the resources at a single level simultaneously. The appointments mapped under resources will be displayed with the colors as per the [`colorField`](https://ej2.syncfusion.com/vue/documentation/api/schedule/resources/#colorfield) defined on the resources collection.
 
 **Example:** To display the Scheduler with single level resource grouping,
 
@@ -396,11 +396,11 @@ This kind of grouping allows the Scheduler to display all the resources at a sin
         
 {% previewsample "page.domainurl/code-snippet/schedule/single-level-resource-cs1" %}
 
-> The `name` field defined in the **resources** collection namely `Owners` will be mapped within the `group` property, in order to enable the grouping option with those resource levels on the Scheduler.
+> The `name` field defined in the **resources** collection namely `Owners` will be mapped within the [`group`](https://ej2.syncfusion.com/vue/documentation/api/schedule#group) property, in order to enable the grouping option with those resource levels on the Scheduler.
 
 ### Grouping multi-level resources
 
-It is possible to group the resources of Scheduler in multiple levels, by mapping the child resources to each parent resource. In the following example, there are 2 levels of resources, on which the second level resources are defined with `groupID` mapping to the first level resource's ID so as to establish the parent-child relationship between them.
+It is possible to group the resources of Scheduler in multiple levels, by mapping the child resources to each parent resource. In the following example, there are 2 levels of resources, on which the second level resources are defined with [`groupID`](https://ej2.syncfusion.com/vue/documentation/api/schedule/resources/#groupidfield) mapping to the first level resource's ID so as to establish the parent-child relationship between them.
 
 To get start quickly about Grouping Multiple Resources in Vue Scheduler, you can check on this video:
 
@@ -421,7 +421,7 @@ To get start quickly about Grouping Multiple Resources in Vue Scheduler, you can
 
 ### One-to-One grouping
 
-In multi-level grouping, Scheduler usually groups the resources on the child level based on the `GroupID` that maps with the `Id` field of parent level resources (as `byGroupID` set to true by default). There are also option which allows you to group all the child resource(s) against each of its parent resource(s). To enable this kind of grouping, set `false` to the `byGroupID` option within the `group` property. In the following code example, there are two levels of resources, on which all the 3 resources at the child level is mapped one to one with each resource on the first level.
+In multi-level grouping, Scheduler usually groups the resources on the child level based on the [`GroupID`](https://ej2.syncfusion.com/vue/documentation/api/schedule/resources/#groupidfield) that maps with the `Id` field of parent level resources (as [`byGroupID`](https://ej2.syncfusion.com/vue/documentation/api/schedule/group/#bygroupid) set to true by default). There are also option which allows you to group all the child resource(s) against each of its parent resource(s). To enable this kind of grouping, set `false` to the [`byGroupID`](https://ej2.syncfusion.com/vue/documentation/api/schedule/group/#bygroupid) option within the [`group`](https://ej2.syncfusion.com/vue/documentation/api/schedule#group) property. In the following code example, there are two levels of resources, on which all the 3 resources at the child level is mapped one to one with each resource on the first level.
 
 {% tabs %}
 {% highlight html tabtitle="Composition API (~/src/App.vue)" %}
@@ -436,7 +436,7 @@ In multi-level grouping, Scheduler usually groups the resources on the child lev
 
 ### Grouping resources by date
 
-It groups the number of resources under each date and is applicable only on the calendar views such as Day, Week, Work Week, Month, Agenda and Month-Agenda. To enable such grouping, set `byDate` option to `true` within the `group` property.
+It groups the number of resources under each date and is applicable only on the calendar views such as Day, Week, Work Week, Month, Agenda and Month-Agenda. To enable such grouping, set [`byDate`](https://ej2.syncfusion.com/vue/documentation/api/schedule/group/#bydate) option to `true` within the [`group`](https://ej2.syncfusion.com/vue/documentation/api/schedule#group) property.
 
 **Example:** To display the Scheduler with resources grouped by date,
 
@@ -455,7 +455,7 @@ It groups the number of resources under each date and is applicable only on the
 
 ## Customizing parent resource cells
 
-In timeline view work cells of parent resource can be customized by checking the `elementType` as `resourceGroupCells` in the event `renderCell`. In the following code example, background color of the work hours has been changed.
+In timeline view work cells of parent resource can be customized by checking the [`elementType`](https://ej2.syncfusion.com/vue/documentation/api/schedule/renderCellEventArgs/#elementtype) as `resourceGroupCells` in the event [`renderCell`](https://ej2.syncfusion.com/vue/documentation/api/schedule#rendercell). In the following code example, background color of the work hours has been changed.
 
 {% tabs %}
 {% highlight html tabtitle="Composition API (~/src/App.vue)" %}
@@ -470,7 +470,7 @@ In timeline view work cells of parent resource can be customized by checking the
 
 ## Working with shared events
 
-Multiple resources can share the same events, thus allowing the CRUD action made on it to reflect on all other shared instances simultaneously. To enable such option, set `allowGroupEdit` option to `true` within the `group` property. With this property enabled, a single appointment
+Multiple resources can share the same events, thus allowing the CRUD action made on it to reflect on all other shared instances simultaneously. To enable such option, set [`allowGroupEdit`](https://ej2.syncfusion.com/vue/documentation/api/schedule/group/#allowgroupedit) option to `true` within the [`group`](https://ej2.syncfusion.com/vue/documentation/api/schedule/group/) property. With this property enabled, a single appointment
 object will be maintained within the appointment collection, even if it is shared by more than one resource – whereas the resource fields of such appointment object will be in array which hold the IDs of the multiple resources.
 
 > Any actions such as create, edit or delete held on any one of the shared event instances, will be reflected on all other related instances visible on the UI.
@@ -492,7 +492,7 @@ object will be maintained within the appointment collection, even if it is share
 
 It is possible to customize the resource header cells using built-in template option and change the look and appearance of it in both the vertical and timeline view modes. All the resource related fields and other information can be accessed within the resource header template option.
 
-**Example:** To customize the resource header and display it along with designation field, refer the below code example.
+**Example:** To customize the resource header and display it along with designation [`resource field`](https://helpej2.syncfusion.com/vue/documentation/api/schedule/resources/), refer the below code example.
 
 {% tabs %}
 {% highlight html tabtitle="Composition API (~/src/App.vue)" %}
@@ -526,7 +526,7 @@ It is possible to customize the resource headers to display with multiple column
 
 ## Collapse/Expand child resources in timeline views
 
-It is possible to expand and collapse the resources which have child resource in timeline views dynamically. By default, resources are in expanded state with their child resource. We can collapse and expand the child resources in UI by setting `expandedField` option as `false` whereas its default value is `true`.
+It is possible to expand and collapse the resources which have child resource in timeline views dynamically. By default, resources are in expanded state with their child resource. We can collapse and expand the child resources in UI by setting [`expandedField`](https://ej2.syncfusion.com/vue/documentation/api/schedule/resources/#expandedfield) option as `false` whereas its default value is `true`.
 
 {% tabs %}
 {% highlight html tabtitle="Composition API (~/src/App.vue)" %}
@@ -541,7 +541,7 @@ It is possible to expand and collapse the resources which have child resource in
 
 ## Displaying tooltip for resource headers
 
-It is possible to display tooltips over the resource headers showing the resource information. By default, there won't be any tooltips displayed on the resource headers, and to enable it, you need to assign the customized template design to the `headerTooltipTemplate` option within the `group` property.
+It is possible to display tooltips over the resource headers showing the resource information. By default, there won't be any tooltips displayed on the resource headers, and to enable it, you need to assign the customized template design to the [`headerTooltipTemplate`](https://ej2.syncfusion.com/vue/documentation/api/schedule/group/#headertooltiptemplate) option within the  [`group`](https://ej2.syncfusion.com/vue/documentation/api/schedule/group/) property.
 
 {% tabs %}
 {% highlight html tabtitle="Composition API (~/src/App.vue)" %}
@@ -556,7 +556,7 @@ It is possible to display tooltips over the resource headers showing the resourc
 
 ## Choosing among resource colors for appointments
 
-By default, the colors defined on the top level resources collection will be applied for the events. In case, if you want to apply specific resource color to events irrespective of its top-level parent resource color, it can be achieved by defining `resourceColorField` option within the `eventSettings` property.
+By default, the colors defined on the top level resources collection will be applied for the events. In case, if you want to apply specific resource color to events irrespective of its top-level parent resource color, it can be achieved by defining [`resourceColorField`](https://ej2.syncfusion.com/vue/documentation/api/schedule/eventSettings/#resourcecolorfield) option within the [`eventSettings`](https://ej2.syncfusion.com/vue/documentation/api/schedule/eventSettings/) property.
 
 In the following example, the colors mentioned in the second level will get applied over the events.
 
@@ -571,13 +571,13 @@ In the following example, the colors mentioned in the second level will get appl
         
 {% previewsample "page.domainurl/code-snippet/schedule/resource-color-cs1" %}
 
-> The value of the `resourceColorField` field should be mapped with the `name` value given within the `resources` property.
+> The value of the `resourceColorField` field should be mapped with the [`name`](https://ej2.syncfusion.com/vue/documentation/api/schedule/resources/#name) value given within the [`resources`](https://ej2.syncfusion.com/vue/documentation/api/schedule/resources/) property.
 
 ## Dynamically add and remove resources
 
-It is possible to add or remove the resources dynamically to and from the Scheduler respectively. In the following example, when the checkboxes are checked and unchecked, the respective resources gets added up or removed from the Scheduler layout. To add new resource dynamically, `addResource` method is used which accepts the arguments such as resource object, resource name (within which level, the resource object to be added) and index (position where the resource needs to be added).
+It is possible to add or remove the resources dynamically to and from the Scheduler respectively. In the following example, when the checkboxes are checked and unchecked, the respective resources gets added up or removed from the Scheduler layout. To add new resource dynamically, [`addResource`](https://ej2.syncfusion.com/vue/documentation/api/schedule#addresource) method is used which accepts the arguments such as resource object, resource name (within which level, the resource object to be added) and index (position where the resource needs to be added).
 
-To remove the resources dynamically, `removeResource` method is used which accepts the index (position from where the resource to be removed) and resource name (within which level, the resource object presents) as parameters.
+To remove the resources dynamically, [`removeResource`](https://ej2.syncfusion.com/vue/documentation/api/schedule#removeresource)  method is used which accepts the index (position from where the resource to be removed) and resource name (within which level, the resource object presents) as parameters.
 
 {% tabs %}
 {% highlight html tabtitle="Composition API (~/src/App.vue)" %}
@@ -594,9 +594,12 @@ To remove the resources dynamically, `removeResource` method is used which accep
 
 Each resource in the Scheduler can have different working hours as well as different working days set to it. There are default options available within the `resources` collection, to customize the default working hours and days of the Scheduler.
 
+* [Using the work day field for different work days](#Set-different-work-days)
+* [Using the start hour and end hour fields for different work hours](#Set-different-work-hours)
+
 ### Set different work days
 
-Different working days can be set for the resources of Scheduler using the `workDaysField` property which maps the working days field from the resource dataSource. This field accepts the collection of day indexes (from 0 to 6) of a week. By default, it is set to [1, 2, 3, 4, 5] and in the following example, each resource has been set with different values and therefore each of them will render only those working days. This option is applicable only on the calendar views and is not applicable on timeline views.
+Different `working days` can be set for the resources of Scheduler using the [`workDaysField`](https://ej2.syncfusion.com/react/documentation/api/schedule/resources/#workdaysfield) property which maps the working days field from the resource dataSource. This field accepts the collection of day indexes (from 0 to 6) of a week. By default, it is set to [1, 2, 3, 4, 5] and in the following example, each resource has been set with different values and therefore each of them will render only those working days. This option is applicable only on the calendar views and is not applicable on timeline views.
 
 {% tabs %}
 {% highlight html tabtitle="Composition API (~/src/App.vue)" %}
@@ -611,11 +614,13 @@ Different working days can be set for the resources of Scheduler using the `work
 
 ### Set different work hours
 
-Working hours indicates the work hour duration of a day, which is highlighted visually with active color over the work cells. Each resource on the Scheduler can be defined with its own set of working hours as depicted in the following example.
+Different `working Hours` can be set for the resources of Scheduler using the [`startHourField`](https://ej2.syncfusion.com/vue/documentation/api/schedule/resources/#starthourfield) and [`endHourField`](https://ej2.syncfusion.com/vue/documentation/api/schedule/resources/#endhourfield) property which maps the `startHourField` and `endHourField` field from the resource dataSource.
 
 * `startHourField` - Denotes the start time of the working/business hour in a day.
 * `endHourField` - Denotes the end time limit of the working/business hour in a day.
 
+Working hours indicates the work hour duration of a day, which is highlighted visually with active color over the work cells. Each resource on the Scheduler can be defined with its own set of working hours as depicted in the following example.
+
 {% tabs %}
 {% highlight html tabtitle="Composition API (~/src/App.vue)" %}
 {% include code-snippet/schedule/multiple-resources-cs3/app-composition.vue %}
@@ -652,7 +657,7 @@ To use the [`hideNonWorkingDays`](https://ej2.syncfusion.com/vue/documentation/a
 
 ## Compact view in mobile
 
-Although the Scheduler views are designed keeping in mind the responsiveness of the control in mobile devices, however when using Scheduler with multiple resources - it is difficult to view all the resources and its relevant events at once on the mobile. Therefore, we have introduced a new compact mode specially for displaying multiple resources of Scheduler on mobile devices. By default, this mode is enabled while using Scheduler with multiple resources on mobile devices. If in case, you need to disable this compact mode, set `false` to the `enableCompactView` option within the `group` property. Disabling this option will display the exact desktop mode of Scheduler view on mobile devices.
+Although the Scheduler views are designed keeping in mind the responsiveness of the control in mobile devices, however when using Scheduler with multiple resources - it is difficult to view all the resources and its relevant events at once on the mobile. Therefore, we have introduced a new compact mode specially for displaying multiple resources of Scheduler on mobile devices. By default, this mode is enabled while using Scheduler with multiple resources on mobile devices. If in case, you need to disable this compact mode, set `false` to the [`enableCompactView`](https://ej2.syncfusion.com/vue/documentation/api/schedule/group/#enablecompactview) option within the [`group`](https://ej2.syncfusion.com/vue/documentation/api/schedule/group/) property. Disabling this option will display the exact desktop mode of Scheduler view on mobile devices.
 
 With this compact view enabled on mobile, you can view only single resource at a time and to switch to other resources, there is a treeview at the left listing out all other available resources - clicking on which will display that particular resource and its related appointments.
 
@@ -664,7 +669,7 @@ Clicking on the menu icon before the resource text will show the resources avail
 
 ## Adaptive UI in desktop
 
-By default, the Scheduler layout adapts automatically in the desktop and mobile devices with appropriate UI changes. In case, if the user wants to display the Adaptive scheduler in desktop mode with adaptive enhancements, then the property `enableAdaptiveUI` can be set to true. Enabling this option will display the exact mobile mode of Scheduler view on desktop devices.
+By default, the Scheduler layout adapts automatically in the desktop and mobile devices with appropriate UI changes. In case, if the user wants to display the Adaptive scheduler in desktop mode with adaptive enhancements, then the property [`enableAdaptiveUI`](https://ej2.syncfusion.com/vue/documentation/api/schedule#enableadaptiveui) can be set to `true`. Enabling this option will display the exact mobile mode of Scheduler view on desktop devices.
 
 Some of the default changes made for compact Scheduler to render in desktop devices are as follows,
 * View options displayed in the Navigation drawer.
diff --git a/ej2-vue/schedule/row-auto-height.md b/ej2-vue/schedule/row-auto-height.md
index bacefae31..2a7311921 100644
--- a/ej2-vue/schedule/row-auto-height.md
+++ b/ej2-vue/schedule/row-auto-height.md
@@ -20,7 +20,7 @@ Now, let's see how it works on those applicable views with examples.
 
 ## Calendar month view
 
-By default, the rows of the calendar Month view can hold only the limited appointments count based on its row height, and the rest of the overlapping appointments are indicated with a `+n more` text indicator. The following example shows how the month view row auto-adjusts based on the number of appointments count, when this `RowAutoHeight` feature is enabled.
+By default, the rows of the calendar Month view can hold only the limited appointments count based on its row height, and the rest of the overlapping appointments are indicated with a `+n more` text indicator. The following example shows how the month view row auto-adjusts based on the number of appointments count, when this [`rowAutoHeight`](https://ej2.syncfusion.com/vue/documentation/api/schedule#rowautoheight) feature is enabled.
 
 {% tabs %}
 {% highlight html tabtitle="Composition API (~/src/App.vue)" %}
@@ -35,7 +35,7 @@ By default, the rows of the calendar Month view can hold only the limited appoin
 
 ## Timeline views
 
-When the feature `RowAutoHeight` is enabled in Timeline views, the row height gets auto-adjusted based on the number of overlapping events occupied on the same time range, which is demonstrated in the following example.
+When the feature [`rowAutoHeight`](https://ej2.syncfusion.com/vue/documentation/api/schedule#rowautoheight) is enabled in Timeline views, the row height gets auto-adjusted based on the number of overlapping events occupied on the same time range, which is demonstrated in the following example.
 
 {% tabs %}
 {% highlight html tabtitle="Composition API (~/src/App.vue)" %}
@@ -78,6 +78,6 @@ By default, with the feature [`rowAutoHeight`](../api/schedule/#rowautoheight),
         
 {% previewsample "page.domainurl/code-snippet/schedule/ignore-whitespace-cs1" %}
 
-**Note**: The property `ignoreWhitespace` will be applicable only when `rowAutoHeight` feature is enabled in the Scheduler
+**Note**: The property [`ignoreWhitespace`](https://ej2.syncfusion.com/vue/documentation/api/schedule/eventSettings/#ignorewhitespace) will be applicable only when [`rowAutoHeight`](https://ej2.syncfusion.com/vue/documentation/api/schedule#rowautoheight) feature is enabled in the Scheduler
 
 > You can refer to our [Vue Scheduler](https://www.syncfusion.com/vue-components/vue-scheduler) feature tour page for its groundbreaking feature representations. You can also explore our [Vue Scheduler example](https://ej2.syncfusion.com/vue/demos/#/material/schedule/overview.html) to knows how to present and manipulate data.
\ No newline at end of file
diff --git a/ej2-vue/schedule/timescale.md b/ej2-vue/schedule/timescale.md
index 9e9c28775..3aea80af8 100644
--- a/ej2-vue/schedule/timescale.md
+++ b/ej2-vue/schedule/timescale.md
@@ -12,15 +12,15 @@ domainurl: ##DomainURL##
 
 The time slots are usually the time cells that are displayed on the Day, Week and Work Week views of both the calendar (to the left most position) and timeline views (at the top position). The [`timeScale`](../api/schedule/timeScale/) property allows you to control and set the required time slot duration for the work cells displayed on Scheduler. It includes the following sub-options such as,
 
-* `enable` - When set to `true`, allows the Scheduler to display the appointments accurately against the exact time duration. If set to `false`, all the appointments of a day will be displayed one below the other with no grid lines displayed. Its default value is `true`.
-* `interval` – Defines the time duration on which the time axis to be displayed either in 1 hour or 30 minutes interval and so on. It accepts the values in minutes and defaults to 60.
-* `slotCount` – Decides the number of slot count to be split for the specified time interval duration. It defaults to 2, thus displaying two slots to represent an hour(each slot depicting 30 minutes duration).
+* [`enable`](https://ej2.syncfusion.com/vue/documentation/api/schedule/timeScale/#enable) - When set to `true`, allows the Scheduler to display the appointments accurately against the exact time duration. If set to `false`, all the appointments of a day will be displayed one below the other with no grid lines displayed. Its default value is `true`.
+* [`interval`](https://ej2.syncfusion.com/vue/documentation/api/schedule/timeScale/#interval) – Defines the time duration on which the time axis to be displayed either in 1 hour or 30 minutes interval and so on. It accepts the values in minutes and defaults to 60.
+* [`slotCount`](https://ej2.syncfusion.com/vue/documentation/api/schedule/timeScale/#slotcount) – Decides the number of slot count to be split for the specified time interval duration. It defaults to 2, thus displaying two slots to represent an hour(each slot depicting 30 minutes duration).
 
 >Note: The upper limit for rendering slots within a single day, utilizing the **interval** and **slotCount** properties of the **timeScale**, stands at 1000. This constraint aligns with the maximum **colspan** value permissible for the **table** element, also capped at 1000. This particular restriction is relevant exclusively to the `TimelineDay`, `TimelineWeek` and `TimelineWorkWeek` views.
 
 ## Setting different time slot duration
 
-The `interval` and `slotCount` properties can be used together on the Scheduler to set different time slot duration which is depicted in the following code example. Here, six time slots together represents an hour.
+The [`interval`](https://ej2.syncfusion.com/vue/documentation/api/schedule/timeScale/#interval) and [`slotCount`](https://ej2.syncfusion.com/vue/documentation/api/schedule/timeScale/#slotcount) properties can be used together on the Scheduler to set different time slot duration which is depicted in the following code example. Here, six time slots together represents an hour.
 
 {% tabs %}
 {% highlight html tabtitle="Composition API (~/src/App.vue)" %}
@@ -37,8 +37,8 @@ The `interval` and `slotCount` properties can be used together on the Scheduler
 
 The [`timeScale`](../api/schedule/timeScale/) property also provides template option to allow customization of time slots which are as follows,
 
-* `majorSlotTemplate` - The template option to be applied for major time slots. Here, the template accepts either the string or HTMLElement as template design and then the parsed design is displayed onto the time cells. The time details can be accessed within this template.
-* `minorSlotTemplate` - The template option to be applied for minor time slots. Here, the template accepts either the string or HTMLElement as template design and then the parsed design is displayed onto the time cells. The time details can be accessed within this template.
+* [`majorSlotTemplate`](https://ej2.syncfusion.com/vue/documentation/api/schedule/timeScale/#majorslottemplate) - The template option to be applied for major time slots. Here, the template accepts either the string or HTMLElement as template design and then the parsed design is displayed onto the time cells. The time details can be accessed within this template.
+* [`minorSlotTemplate`](https://ej2.syncfusion.com/vue/documentation/api/schedule/timeScale/#minorslottemplate) - The template option to be applied for minor time slots. Here, the template accepts either the string or HTMLElement as template design and then the parsed design is displayed onto the time cells. The time details can be accessed within this template.
 
 {% tabs %}
 {% highlight html tabtitle="Composition API (~/src/App.vue)" %}
diff --git a/ej2-vue/schedule/timezone.md b/ej2-vue/schedule/timezone.md
index 7189b2d57..0f8d284b6 100644
--- a/ej2-vue/schedule/timezone.md
+++ b/ej2-vue/schedule/timezone.md
@@ -10,7 +10,7 @@ domainurl: ##DomainURL##
 
 # Timezone in Vue Schedule component
 
-The Scheduler makes use of the current system time zone by default. If it needs to follow some other user-specific time zone, then the [`timezone`](../api/schedule/#timezone) property needs to be used. Apart from the default action of applying specific timezone to the Scheduler, it is also possible to set different time zone values for each appointments through the properties `startTimezone` and `endTimezone` which can be defined as separate fields within the event fields collection.
+The Scheduler makes use of the current system time zone by default. If it needs to follow some other user-specific time zone, then the [`timezone`](../api/schedule/#timezone) property needs to be used. Apart from the default action of applying specific timezone to the Scheduler, it is also possible to set different time zone values for each appointments through the properties [`startTimezone`](https://helpej2.syncfusion.com/vue/documentation/api/schedule/field/#starttimezone) and [`endTimezone`](https://helpej2.syncfusion.com/vue/documentation/api/schedule/field/#endtimezone) which can be defined as separate fields within the event fields collection.
 
 >Note: **timezone** property only applicable for the appointment processing and current time indication.
 
@@ -67,7 +67,7 @@ Setting [`timezone`](../api/schedule/#timezone) to UTC for Scheduler will displa
 
 ## Set specific timezone for events
 
-It is possible to set different timezone for Scheduler events by setting `startTimezone` and `endTimezone` properties within the [`eventSettings`](../api/schedule/eventSettings/) option. It allows each appointment to maintain different timezone and displays on Scheduler with appropriate time differences.
+It is possible to set different timezone for Scheduler events by setting [`startTimezone`](https://helpej2.syncfusion.com/vue/documentation/api/schedule/field/#starttimezone) and [`endTimezone`](https://helpej2.syncfusion.com/vue/documentation/api/schedule/field/#endtimezone) properties within the [`eventSettings`](../api/schedule/eventSettings/) option. It allows each appointment to maintain different timezone and displays on Scheduler with appropriate time differences.
 
 {% tabs %}
 {% highlight html tabtitle="Composition API (~/src/App.vue)" %}
diff --git a/ej2-vue/schedule/views.md b/ej2-vue/schedule/views.md
index cf2d3e462..2a9b0b82d 100644
--- a/ej2-vue/schedule/views.md
+++ b/ej2-vue/schedule/views.md
@@ -18,7 +18,7 @@ To navigate between different views and dates, the navigation options are availa
 
 ## Setting specific view on scheduler
 
-As the Scheduler displays `week` view by default, therefore to change the active view, set `currentView` property with the desired view name. The applicable view names that the Scheduler accepts are as follows,
+As the Scheduler displays `week` view by default, therefore to change the active view, set [`currentView`](https://helpej2.syncfusion.com/vue/documentation/api/schedule#currentview) property with the desired view name. The applicable view names that the Scheduler accepts are as follows,
 
 * Day
 * Week
@@ -67,29 +67,29 @@ There are scenarios where each view may need to have different configurations. F
 
 | Property       | Type      | Description | Applicable views |
 |----------------|-----------|-------------|------------------|
-| `option` | View | It accepts the Scheduler view name, based on which we can define its related properties. The view names can be `Day`, `Week` and so on. | All views.|
-| `isSelected` | Boolean | It acts similar to the `currentView` property and defines the active view of the Scheduler.| All views. |
-| `dateFormat` | Date | By default, Scheduler follows the date format as per the default culture assigned to it. When it is defined under specific view, only those assigned views follows this date format. | All views. |
-| `readonly` | Boolean | When set to `true`, prevents the CRUD actions on the respective view under where it is defined. | All views. |
-| `resourceHeaderTemplate` | String | The template option which is used to customize the resource header cells on the Scheduler. It gets applied only on the views, wherever it is defined.| All views. |
-| `dateHeaderTemplate` | String | The template option which is used to customize the date header cells and is applied only on the views, wherever it is defined. | All views. |
-| `eventTemplate` | String | The template option to customize the events background. It will get applied to the events of the view to which it is currently being defined. | All views. |
-| `showWeekend` | Boolean | When set to `false`, it hides the weekend days of a week from the views on which it is defined.| All views. |
-| `group` | [GroupModel](https://ej2.syncfusion.com/vue/documentation/api/schedule/groupModel/) | Allows to set different resource grouping options on all available Scheduler view modes. | All views. |
-| `cellTemplate` | String | The template option to customize the work cells of the Scheduler and is applied only on the views, on which it is defined. | Applicable on all views except Agenda view. |
-| `workDays` | Number[] | It is used to set the working days on the Scheduler views. | Applicable on all views except Agenda view. |
-| `displayName` | String | When a particular view is customized to display with different intervals, this property allows the user to set different display name for each of the views. | Applicable on all views except Agenda and Month Agenda. |
-| `interval` | Number | It allows to customize the default Scheduler views with different set of days, weeks, work weeks or months on the applicable view type. | Applicable on all views except Agenda and Month Agenda. |
-| `startHour` | String | It is used to specify the start hour, from which the Scheduler should be displayed. It accepts the time string in a short skeleton format and also, hides the time beyond the specified start time. | Applicable on Day, Week, Work Week, Timeline Day, Timeline Week and Timeline Work Week views. |
-| `endHour` | String | It is used to specify the end hour, at which the Scheduler ends. It accepts the time string in a short skeleton format. | Applicable on Day, Week, Work Week, Timeline Day, Timeline Week, and Timeline Work Week views. |
-| `timeScale` | [TimeScaleModel](https://ej2.syncfusion.com/vue/documentation/api/schedule/timeScaleModel) | Allows to set different timescale configuration on each applicable view modes. | Applicable on Day, Week, Work Week, Timeline Day, Timeline Week, and Timeline Work Week views. |
-| `showWeekNumber` | Boolean | When set to `true`, shows the week number on the respective weeks.| Applicable on Day, Week, Work Week, and Month views. |
-| `allowVirtualScrolling` | Boolean | It is used to enable or disable the virtual scrolling functionality. | Applicable on Agenda and Timeline views. |
-| `headerRows` | [HeaderRowsModel](https://ej2.syncfusion.com/vue/documentation/api/schedule/headerRowsModel) | Allows defining the custom header rows on timeline views of the Scheduler to display the year, month, week, date and hour label as an individual row. | Applicable only on all timeline views. |
+| [`option`](https://helpej2.syncfusion.com/vue/documentation/api/schedule/views/#option) | View | It accepts the Scheduler view name, based on which we can define its related properties. The view names can be `Day`, `Week` and so on. | All views.|
+| [`isSelected`](https://helpej2.syncfusion.com/vue/documentation/api/schedule/views/#isselected) | Boolean | It acts similar to the `currentView` property and defines the active view of the Scheduler.| All views. |
+| [`dateFormat`](https://helpej2.syncfusion.com/vue/documentation/api/schedule/views/#dateformat) | Date | By default, Scheduler follows the date format as per the default culture assigned to it. When it is defined under specific view, only those assigned views follows this date format. | All views. |
+| [`readonly`](https://helpej2.syncfusion.com/vue/documentation/api/schedule/views/#readonly) | Boolean | When set to `true`, prevents the CRUD actions on the respective view under where it is defined. | All views. |
+| [`resourceHeaderTemplate`](https://helpej2.syncfusion.com/vue/documentation/api/schedule/views/#resourceheadertemplate) | String | The template option which is used to customize the resource header cells on the Scheduler. It gets applied only on the views, wherever it is defined.| All views. |
+| [`dateHeaderTemplate`](https://helpej2.syncfusion.com/vue/documentation/api/schedule/views/#dayheadertemplate) | String | The template option which is used to customize the date header cells and is applied only on the views, wherever it is defined. | All views. |
+| [`eventTemplate`](https://helpej2.syncfusion.com/vue/documentation/api/schedule/views/#eventtemplate) | String | The template option to customize the events background. It will get applied to the events of the view to which it is currently being defined. | All views. |
+| [`showWeekend`](https://helpej2.syncfusion.com/vue/documentation/api/schedule/views/#showweekend) | Boolean | When set to `false`, it hides the weekend days of a week from the views on which it is defined.| All views. |
+| [`group`](https://helpej2.syncfusion.com/vue/documentation/api/schedule/group/) | [GroupModel](https://ej2.syncfusion.com/vue/documentation/api/schedule/groupModel/) | Allows to set different resource grouping options on all available Scheduler view modes. | All views. |
+| [`cellTemplate`](https://helpej2.syncfusion.com/vue/documentation/api/schedule/views/#celltemplate) | String | The template option to customize the work cells of the Scheduler and is applied only on the views, on which it is defined. | Applicable on all views except Agenda view. |
+| [`workDays`](https://helpej2.syncfusion.com/vue/documentation/api/schedule/views/#workdays) | Number[] | It is used to set the working days on the Scheduler views. | Applicable on all views except Agenda view. |
+| [`displayName`](https://helpej2.syncfusion.com/vue/documentation/api/schedule/views/#displayname) | String | When a particular view is customized to display with different intervals, this property allows the user to set different display name for each of the views. | Applicable on all views except Agenda and Month Agenda. |
+| [`interval`](https://helpej2.syncfusion.com/vue/documentation/api/schedule/views/#interval) | Number | It allows to customize the default Scheduler views with different set of days, weeks, work weeks or months on the applicable view type. | Applicable on all views except Agenda and Month Agenda. |
+| [`startHour`](https://helpej2.syncfusion.com/vue/documentation/api/schedule/views/#starthour) | String | It is used to specify the start hour, from which the Scheduler should be displayed. It accepts the time string in a short skeleton format and also, hides the time beyond the specified start time. | Applicable on Day, Week, Work Week, Timeline Day, Timeline Week and Timeline Work Week views. |
+| [`endHour`](https://helpej2.syncfusion.com/vue/documentation/api/schedule/views/#endhour) | String | It is used to specify the end hour, at which the Scheduler ends. It accepts the time string in a short skeleton format. | Applicable on Day, Week, Work Week, Timeline Day, Timeline Week, and Timeline Work Week views. |
+| [`timeScale`](https://helpej2.syncfusion.com/vue/documentation/api/schedule/views/#timescale) | [TimeScaleModel](https://ej2.syncfusion.com/vue/documentation/api/schedule/timeScaleModel) | Allows to set different timescale configuration on each applicable view modes. | Applicable on Day, Week, Work Week, Timeline Day, Timeline Week, and Timeline Work Week views. |
+| [`showWeekNumber`](https://helpej2.syncfusion.com/vue/documentation/api/schedule/views/#showweeknumber) | Boolean | When set to `true`, shows the week number on the respective weeks.| Applicable on Day, Week, Work Week, and Month views. |
+|  [`allowVirtualScrolling`](https://helpej2.syncfusion.com/vue/documentation/api/schedule/views/#allowvirtualscrolling) | Boolean | It is used to enable or disable the virtual scrolling functionality. | Applicable on Agenda and Timeline views. |
+| [`headerRows`](https://helpej2.syncfusion.com/vue/documentation/api/schedule/views/#headerrows) | [HeaderRowsModel](https://ej2.syncfusion.com/vue/documentation/api/schedule/headerRowsModel) | Allows defining the custom header rows on timeline views of the Scheduler to display the year, month, week, date and hour label as an individual row. | Applicable only on all timeline views. |
 
 ### Day view
 
-Usually a day view displays a single day with all its related appointments. It is possible to customize the day view to display more number of days by extending the `views` property with `interval` option. You can also define any of the above defined properties within the `views` object definition as depicted in the following code example.  
+Usually a day view displays a single day with all its related appointments. It is possible to customize the day view to display more number of days by extending the [`views`](https://helpej2.syncfusion.com/vue/documentation/api/schedule/views/) property with [`interval`](https://helpej2.syncfusion.com/vue/documentation/api/schedule/views/#interval) option. You can also define any of the above defined properties within the `views` object definition as depicted in the following code example.  
 
 {% tabs %}
 {% highlight html tabtitle="Composition API (~/src/App.vue)" %}
@@ -102,11 +102,11 @@ Usually a day view displays a single day with all its related appointments. It i
         
 {% previewsample "page.domainurl/code-snippet/schedule/view-cs4" %}
 
-> All the above defined properties can be accessed within Day view except `allowVirtualScrolling` and `headerRows`.
+> All the above defined properties can be accessed within Day view except  [`allowVirtualScrolling`](https://helpej2.syncfusion.com/vue/documentation/api/schedule/views/#allowvirtualscrolling) and [`headerRows`](https://helpej2.syncfusion.com/vue/documentation/api/schedule/views/#headerrows).
 
 ### Week view
 
-The Week view displays a count of 7 days (from Sunday to Saturday) with all its related appointments. The first day of the week can be changed using the `firstDayOfWeek` which accepts the integer (Sunday=0, Monday=1, Tuesday=2 and so on) value. You can navigate to a particular date in day view from the week view by clicking on the appropriate dates on the date header bar.
+The Week view displays a count of 7 days (from Sunday to Saturday) with all its related appointments. The first day of the week can be changed using the [`firstDayOfWeek`](https://helpej2.syncfusion.com/vue/documentation/api/schedule/views/#firstdayofweek) which accepts the integer (Sunday=0, Monday=1, Tuesday=2 and so on) value. You can navigate to a particular date in day view from the week view by clicking on the appropriate dates on the date header bar.
 
 {% tabs %}
 {% highlight html tabtitle="Composition API (~/src/App.vue)" %}
@@ -119,11 +119,11 @@ The Week view displays a count of 7 days (from Sunday to Saturday) with all its
         
 {% previewsample "page.domainurl/code-snippet/schedule/view-cs5" %}
 
-> All the above defined properties in the table can be accessed within Week and Work week views except `allowVirtualScrolling` and `headerRows`.
+> All the above defined properties in the table can be accessed within Week and Work week views except [`allowVirtualScrolling`](https://helpej2.syncfusion.com/vue/documentation/api/schedule/views/#allowvirtualscrolling) and [`headerRows`](https://helpej2.syncfusion.com/vue/documentation/api/schedule/views/#headerrows).
 
 ### Work Week view
 
-The Work week view displays only the working days of a week (count of 5 days) and its associated appointments. It is possible to customize the working days on the work week view by using the `workDays` property which accepts an array of integer values (such as Sunday=0, Monday=1, Tuesday=2 and so on). By default, it displays from Monday to Friday (5 days). You can also navigate to a particular date in the day view from the work week view by clicking on the appropriate dates in the date header bar.
+The Work week view displays only the working days of a week (count of 5 days) and its associated appointments. It is possible to customize the working days on the work week view by using the [`workDays`](https://helpej2.syncfusion.com/vue/documentation/api/schedule/views/#workdays) property which accepts an array of integer values (such as Sunday=0, Monday=1, Tuesday=2 and so on). By default, it displays from Monday to Friday (5 days). You can also navigate to a particular date in the day view from the work week view by clicking on the appropriate dates in the date header bar.
 
 The following code example depicts how to change the working days only on the `Work Week` view of the Scheduler.
 
@@ -163,7 +163,7 @@ You can also have the `+ more` text indicator on each day cell of a Month view,
 
 A Year view displays all the days of a particular year with months and all its related appointments. You can navigate to a particular date in the day view by clicking on the appropriate date text on the year cells.
 
-Year view is available in both the `Horizontal` and `Vertical` orientations. You can manage the orientation of year view through `views` property.
+Year view is available in both the `Horizontal` and `Vertical` orientations. You can manage the orientation of year view through [`views`](https://helpej2.syncfusion.com/vue/documentation/api/schedule/views/#orientation) property.
 
 {% tabs %}
 {% highlight html tabtitle="Composition API (~/src/App.vue)" %}
@@ -180,7 +180,7 @@ Year view is available in both the `Horizontal` and `Vertical` orientations. You
 
 ### Agenda view
 
-The Agenda view lists out the appointments in a grid-like view for the next 7 days by default from the current date. The count of the days can be changed using the API `agendaDaysCount`. It allows virtual scrolling of dates by enabling the `allowVirtualScrolling` property. Also, you can enable or disable the display of days on Scheduler that has no appointments by setting true or false to the `hideEmptyAgendaDays` property.
+The Agenda view lists out the appointments in a grid-like view for the next 7 days by default from the current date. The count of the days can be changed using the API [`agendaDaysCount`](https://helpej2.syncfusion.com/vue/documentation/api/schedule#agendadayscount). It allows virtual scrolling of dates by enabling the [`allowVirtualScrolling`](https://helpej2.syncfusion.com/vue/documentation/api/schedule/views/#allowvirtualscrolling) property. Also, you can enable or disable the display of days on Scheduler that has no appointments by setting true or false to the [`hideEmptyAgendaDays`](https://helpej2.syncfusion.com/react/documentation/api/schedule#hideemptyagendadays)  property.
 
 The following code example depicts how to customize the display of events within Agenda view alone.
 
@@ -424,7 +424,7 @@ export default {
 
 #### Auto row height
 
-Timeline Year view supports Auto row height. When the feature `rowAutoHeight` is enabled, the row height gets auto-adjusted based on the number of overlapping events occupied in the same time range. If you disable the Auto row height, you have the `+ more` text indicator on each day cell of a Timeline Year view, clicking on which will allow you to view the hidden appointments of a day.
+Timeline Year view supports Auto row height. When the feature [`rowAutoHeight`](https://helpej2.syncfusion.com/vue/documentation/api/schedule#rowautoheight) is enabled, the row height gets auto-adjusted based on the number of overlapping events occupied in the same time range. If you disable the Auto row height, you have the `+ more` text indicator on each day cell of a Timeline Year view, clicking on which will allow you to view the hidden appointments of a day.
 
 {% tabs %}
 {% highlight html tabtitle="Composition API (~/src/App.vue)" %}
@@ -439,9 +439,9 @@ Timeline Year view supports Auto row height. When the feature `rowAutoHeight` is
 
 ## Extending view intervals
 
-It is possible to customize the display of default number of days on different Scheduler view modes. For example, a day view can be extended to display 3 days by setting the `interval` option as 3 for the `Day` option within the `views` property as depicted in the following code example. In the same way, you can also display 2 weeks by setting interval 2 for the `Week` option.
+It is possible to customize the display of default number of days on different Scheduler view modes. For example, a day view can be extended to display 3 days by setting the [`interval`](https://helpej2.syncfusion.com/vue/documentation/api/schedule/views/#interval) option as 3 for the `Day` option within the [`views`](https://helpej2.syncfusion.com/vue/documentation/api/schedule/views/) property as depicted in the following code example. In the same way, you can also display 2 weeks by setting interval 2 for the `Week` option.
 
-You can provide the alternative display name for such customized views on the Scheduler header bar, by setting the appropriate `displayName` property.
+You can provide the alternative display name for such customized views on the Scheduler header bar, by setting the appropriate [`displayName`](https://helpej2.syncfusion.com/vue/documentation/api/schedule/views/#displayname) property.
 
 {% tabs %}
 {% highlight html tabtitle="Composition API (~/src/App.vue)" %}
diff --git a/ej2-vue/schedule/working-days.md b/ej2-vue/schedule/working-days.md
index 5f216e716..d706ba84f 100644
--- a/ej2-vue/schedule/working-days.md
+++ b/ej2-vue/schedule/working-days.md
@@ -42,9 +42,9 @@ The following example code depicts how to set the Scheduler to display Monday, W
 
 ## Hiding weekend days
 
-The `showWeekend` property is used to either show or hide the weekend days of a week and it is not applicable on Work week view (as non-working days are usually not displayed on work week view). By default, it is set to `true`. The days which are not a part of the working days collection of a Scheduler are usually considered as non-working or weekend days.
+The [`showWeekend`](https://helpej2.syncfusion.com/vue/documentation/api/schedule/views/#showweekend) property is used to either show or hide the weekend days of a week and it is not applicable on Work week view (as non-working days are usually not displayed on work week view). By default, it is set to `true`. The days which are not a part of the working days collection of a Scheduler are usually considered as non-working or weekend days.
 
-Here, the working days are defined as [1, 3, 4, 5] on Scheduler and therefore the remaining days (0, 2, 6 – Sunday, Tuesday and Saturday) are considered as non-working or weekend days and will be hidden from all the views when `showWeekend` property is set to `false`.
+Here, the working days are defined as [1, 3, 4, 5] on Scheduler and therefore the remaining days (0, 2, 6 – Sunday, Tuesday and Saturday) are considered as non-working or weekend days and will be hidden from all the views when [`showWeekend`](https://helpej2.syncfusion.com/vue/documentation/api/schedule/views/#showweekend) property is set to `false`.
 
 {% tabs %}
 {% highlight html tabtitle="Composition API (~/src/App.vue)" %}
@@ -59,9 +59,9 @@ Here, the working days are defined as [1, 3, 4, 5] on Scheduler and therefore th
 
 ## Show week numbers
 
-It is possible to show the week number count of a week in the header bar of the Scheduler by setting true to `showWeekNumber` property. By default, its default value is `false`. In Month view, the week numbers are displayed as a first column.
+It is possible to show the week number count of a week in the header bar of the Scheduler by setting true to [`showWeekNumber`](https://helpej2.syncfusion.com/vue/documentation/api/schedule/views/#showweeknumber) property. By default, its default value is `false`. In Month view, the week numbers are displayed as a first column.
 
-> The `showWeekNumber` property is not applicable on Timeline views, as it has the equivalent [headerRows](./header-rows/#display-week-numbers-in-timeline-views) property to handle such requirement with additional customizations.
+> The [`showWeekNumber`](https://helpej2.syncfusion.com/vue/documentation/api/schedule/views/#showweeknumber) property is not applicable on Timeline views, as it has the equivalent [headerRows](./header-rows/#display-week-numbers-in-timeline-views) property to handle such requirement with additional customizations.
 
 {% tabs %}
 {% highlight html tabtitle="Composition API (~/src/App.vue)" %}
@@ -97,15 +97,15 @@ For more details refer to [this link](https://docs.microsoft.com/en-us/dotnet/ap
         
 {% previewsample "page.domainurl/code-snippet/schedule/working-days-cs8" %}
 
- **Note**: Enable the `showWeekNumber` property to configure the `weekRule` property. Also, the weekRule property depends on the value of the `firstDayOfWeek` property.
+ **Note**: Enable the [`showWeekNumber`](https://helpej2.syncfusion.com/vue/documentation/api/schedule/views/#showweeknumber) property to configure the `weekRule` property. Also, the weekRule property depends on the value of the [`firstDayOfWeek`](https://helpej2.syncfusion.com/vue/documentation/api/schedule/views/#firstdayofweek) property.
 
 ## Set working hours
 
-Working hours indicates the work hour limit within the Scheduler, which is visually highlighted with an active color on work cells. The working hours can be set on Scheduler using the `workHours` property which is of object type and includes the following sub-options,
+Working hours indicates the work hour limit within the Scheduler, which is visually highlighted with an active color on work cells. The working hours can be set on Scheduler using the [`workHours`](https://helpej2.syncfusion.com/vue/documentation/api/schedule#workhours) property which is of object type and includes the following sub-options,
 
-* `highlight` – enables/disables the highlighting of work hours.
-* `start` - sets the start time of the working/business hour of a day.
-* `end` - sets the end time limit of the working/business hour of a day.
+* [`highlight`](https://helpej2.syncfusion.com/vue/documentation/api/schedule/workHoursModel/#highlight) – enables/disables the highlighting of work hours.
+* [`start`](https://helpej2.syncfusion.com/vue/documentation/api/schedule/workHoursModel/#start) - sets the start time of the working/business hour of a day.
+* [`end`](https://helpej2.syncfusion.com/vue/documentation/api/schedule/workHoursModel/#end) - sets the end time limit of the working/business hour of a day.
 
 {% tabs %}
 {% highlight html tabtitle="Composition API (~/src/App.vue)" %}
@@ -120,7 +120,7 @@ Working hours indicates the work hour limit within the Scheduler, which is visua
 
 ## Scheduler displaying custom hours
 
-It is possible to display the event Scheduler layout with specific time durations by hiding the unwanted hours. To do so, set the start and end hour for the Scheduler using the `startHour` and `endHour` properties respectively.
+It is possible to display the event Scheduler layout with specific time durations by hiding the unwanted hours. To do so, set the start and end hour for the Scheduler using the  [`startHour`](https://helpej2.syncfusion.com/vue/documentation/api/schedule#starthour) and [`endHour`](https://helpej2.syncfusion.com/vue/documentation/api/schedule#endhour) properties respectively.
 
 The following code example displays the Scheduler starting from the time range 7.00 AM to 6.00 PM and the remaining hours are hidden on the UI.
 
@@ -137,7 +137,7 @@ The following code example displays the Scheduler starting from the time range 7
 
 ## Setting start day of the week
 
-By default, Scheduler defaults to `Sunday` as its first day of a week. To change the Scheduler's start day of a week with different day, set the `firstDayOfWeek` property with the values ranging from 0 to 6.
+By default, Scheduler defaults to `Sunday` as its first day of a week. To change the Scheduler's start day of a week with different day, set the [`firstDayOfWeek`](https://helpej2.syncfusion.com/vue/documentation/api/schedule#firstdayofweek) property with the values ranging from 0 to 6.
 
 > Here, Sunday is always denoted as 0, Monday as 1 and so on.
 
@@ -154,7 +154,7 @@ By default, Scheduler defaults to `Sunday` as its first day of a week. To change
 
 ## Scroll to specific time and date
 
-You can manually scroll to a specific time on Scheduler by making use of the `scrollTo` method as depicted in the following code example.
+You can manually scroll to a specific time on Scheduler by making use of the [`scrollTo`](https://helpej2.syncfusion.com/vue/documentation/api/schedule#scrollto) method as depicted in the following code example.
 
 {% tabs %}
 {% highlight html tabtitle="Composition API (~/src/App.vue)" %}