[update] Integration guides (#25)

* [update] Angular integration guide * [update] React integration guide * [update] Angular and React integration guides (styles) * [update] React and Vue integration guides * [update] Svelte integration guide
DHTMLX · Aug 30, 2024 · a49826d · a49826d
1 parent 901c701
commit a49826d
Show file tree

Hide file tree

Showing 3 changed files with 58 additions and 81 deletions.
diff --git a/docs/guides/integration_with_react.md b/docs/guides/integration_with_react.md
@@ -111,7 +111,7 @@ export default function EventCalendarComponent(props) {
 
 #### Adding styles
 
-To display Event Calendar correctly, you need to provide the corresponding styles. You can use the **index.css** file to specify important styles for Event Calendar and its container:
+To display Event Calendar correctly, you need to specify important styles for Event Calendar and its container in the main css file of the project:
 
 ~~~css title="index.css"
 /* specify styles for initial page */
@@ -160,7 +160,7 @@ export function getData() {
             text: ' Olympic Stadium - Munich ',
             details: ' Munich, GER '
         }
-    ];
+    ]
 }
 ~~~
 
@@ -257,22 +257,6 @@ useEffect(() => {
 // ...
 ~~~
 
-### Step 3. Adding Event Calendar into the app
-
-To add the component into the app, open the **App.js** file and replace the default code with the following one:
-
-~~~jsx title="App.js"
-import EventCalendar from "./EventCalendar";
-import { getData } from "./data";
-
-function App() {
-    const events= getData();
-    return <EventCalendar events={events} date={new Date(2024, 5, 10)} />;
-}
-
-export default App;
-~~~
-
 After that, you can start the app to see Event Calendar loaded with data on a page.
 
 ![Event Calendar initialization](../assets/trial_eventcalendar.png)

diff --git a/docs/guides/integration_with_svelte.md b/docs/guides/integration_with_svelte.md
@@ -18,23 +18,17 @@ DHTMLX Event Calendar is compatible with **Svelte**. We have prepared code examp
 Before you start to create a new project, install [**Vite**](https://vitejs.dev/) (optional) and [**Node.js**](https://nodejs.org/en/).
 :::
 
-There are several ways of creating a **Svelte** project:
-
-- you can use the [**SvelteKit**](https://kit.svelte.dev/)
-
-or
-
-- you can also use **Svelte with Vite** (but without SvelteKit):
+To create a **Svelte** JS project, run the following command:
 
 ~~~json
 npm create vite@latest
 ~~~
 
-Check the details in the [related article](https://svelte.dev/docs/introduction#start-a-new-project-alternatives-to-sveltekit).
+Let's name the project as **my-svelte-event-calendar-app**.
 
 ### Installation of dependencies
 
-Let's name the project as **my-svelte-event-calendar-app** and go to the app directory:
+Go to the app directory:
 
 ~~~json
 cd my-svelte-event-calendar-app
@@ -44,9 +38,9 @@ Install dependencies and start the dev server. For this, use a package manager:
 
 - if you use [**yarn**](https://yarnpkg.com/), run the following commands:
 
-~~~json
+~~~jsx
 yarn 
-yarn start
+yarn start // or yarn dev
 ~~~
 
 - if you use [**npm**](https://www.npmjs.com/), run the following commands:
@@ -100,7 +94,7 @@ In this tutorial you can see how to configure the **trial** version of Event Cal
 
 To display Event Calendar on the page, you need to create the container for Event Calendar, and initialize this component using the corresponding constructor:
 
-~~~html {3,6,10-11} title="EventCalendar.svelte"
+~~~html {3,6,10-11,19} title="EventCalendar.svelte"
 <script>
     import { onMount, onDestroy } from "svelte";
     import { EventCalendar } from "@dhx/trial-eventcalendar";
@@ -119,7 +113,27 @@ To display Event Calendar on the page, you need to create the container for Even
     });
 </script>
 
-<div bind:this={container} style="width: 100%; height: 100%;"></div>
+<div bind:this={container} class="widget"></div>
+~~~
+
+#### Adding styles
+
+To display Event Calendar correctly, you need to specify important styles for Event Calendar and its container in the main css file of the project:
+
+~~~css title="main.css"
+/* specify styles for initial page */
+html,
+body,
+#app { /* make sure that you use the #app root container */
+    height: 100%;
+    padding: 0;
+    margin: 0;
+}
+
+/* specify styles for the Event Calendar container */
+.widget {
+    height: 100%;
+}
 ~~~
 
 #### Loading data
@@ -196,7 +210,7 @@ onDestroy(() => {
 });
 </script>
 
-<div bind:this={container} style="width: 100%; height: 100%;"></div>
+<div bind:this={container} class="widget"></div>
 ~~~
 
 You can also use the [`parse()`](/api/methods/js_eventcalendar_parse_method/) method inside the `onMount()` method of Svelte to load data into Event Calendar:
@@ -258,21 +272,6 @@ onDestroy(() => {
 // ...
 ~~~
 
-### Step 3. Adding Event Calendar into the app
-
-To add the component into the app, open the **App.svelte** file and replace the default code with the following one:
-
-~~~html title="App.svelte"
-<script>
-import EventCalendar from "./EventCalendar.svelte";
-import { getData } from "./data.js";
-
-const events = getData();
-</script>
-
-<EventCalendar events={events} date={new Date(2024, 5, 10)} />
-~~~
-
 After that, you can start the app to see Event Calendar loaded with data on a page.
 
 ![Event Calendar initialization](../assets/trial_eventcalendar.png)

diff --git a/docs/guides/integration_with_vue.md b/docs/guides/integration_with_vue.md
@@ -40,9 +40,9 @@ Install dependencies and start the dev server. For this, use a package manager:
 
 - if you use [**yarn**](https://yarnpkg.com/), run the following commands:
 
-~~~json
+~~~jsx
 yarn
-yarn start
+yarn start // or yarn dev
 ~~~
 
 - if you use [**npm**](https://www.npmjs.com/), run the following commands:
@@ -64,7 +64,7 @@ Download the [**trial Event Calendar package**](/how_to_start/#installing-event-
 
 ### Step 2. Component creation
 
-Now you need to create a Vue component, to add Event Calendar into the application. Create a new file in the ***src/components/*** directory and name it ***EventCalendar***.
+Now you need to create a Vue component, to add Event Calendar into the application. Create a new file in the ***src/components/*** directory and name it ***EventCalendar.vue***.
 
 #### Import source files
 
@@ -96,7 +96,7 @@ In this tutorial you can see how to configure the **trial** version of Event Cal
 
 To display Event Calendar on the page, you need to create the container for Event Calendar, and initialize this component using the corresponding constructor:
 
-~~~html {2,7-8} title="EventCalendar.vue"
+~~~html {2,7-8,18} title="EventCalendar.vue"
 <script>
 import { EventCalendar } from "@dhx/trial-eventcalendar";
 import "@dhx/trial-eventcalendar/dist/event-calendar.css";
@@ -114,10 +114,30 @@ export default {
 </script>
 
 <template>
-    <div ref="container" style="width: 100%; height: 100%"></div>
+    <div ref="container" class="widget"></div>
 </template>
 ~~~
 
+#### Adding styles
+
+To display Event Calendar correctly, you need to specify important styles for Event Calendar and its container in the main css file of the project:
+
+~~~css title="main.css"
+/* specify styles for initial page */
+html,
+body,
+#app { /* make sure that you use the #app root container */
+    height: 100%;
+    padding: 0;
+    margin: 0;
+}
+
+/* specify styles for the Event Calendar container */
+.widget {
+    height: 100%;
+}
+~~~
+
 #### Loading data
 
 To add data into the Event Calendar, you need to provide a data set. You can create the ***data.js*** file in the ***src/*** directory and add some data into it:
@@ -203,7 +223,7 @@ export default {
 </script>
 
 <template>
-    <div ref="container" style="width: 100%; height: 100%;"></div>
+    <div ref="container" class="widget"></div>
 </template>
 ~~~
 
@@ -233,7 +253,7 @@ export default {
 </script>
 
 <template>
-    <div ref="container" style="width: 100%; height: 100%"></div>
+    <div ref="container" class="widget"></div>
 </template>
 ~~~
 
@@ -259,39 +279,13 @@ export default {
             console.log(obj);
         });
     }
+    // ...
 }
 </script>
 
 <!--...-->
 ~~~
 
-### Step 3. Adding Event Calendar into the app
-
-To add the component into the app, open the **App.vue** file and replace the default code with the following one:
-
-~~~html title="App.vue"
-<script>
-import EventCalendar from "./components/EventCalendar.vue";
-import { getData } from "./data";
-
-export default {
-    components: { EventCalendar },
-    data() {
-        const events = getData();
-        const date = new Date(2024, 5, 10);
-        return { 
-            events, 
-            date
-        };
-    }
-};
-</script>
-
-<template>
-    <EventCalendar :events="records" :date="date" />
-</template>
-~~~
-
 After that, you can start the app to see Event Calendar loaded with data on a page.
 
 ![Event Calendar initialization](../assets/trial_eventcalendar.png)