Merge pull request #19 from DHTMLX/next

[update] minor changes related to framework guides

docs/guides/integration_with_angular.md

@@ -34,7 +34,7 @@ Go to the app directory:
 cd my-angular-event-calendar-app
 ~~~
 
-Run the app with the following command:
+Run the app with the following commands:
 
 ~~~json
 yarn install
@@ -63,16 +63,12 @@ Open the file and import Event Calendar source files. Note that:
 
 ~~~jsx
 import { EventCalendar } from 'dhx-eventcalendar-package';
-import 'dhx-eventcalendar-package/dist/eventcalendar.css'; 
 ~~~
 
-Note that depending on the used package, the source files can be minified. In this case make sure that you are importing the CSS file as **event-calendar.min.css**.
-
 - if you use the trial version of Event Calendar, specify the following paths:
 
 ~~~jsx
 import { EventCalendar } from '@dhx/trial-eventcalendar';
-import '@dhx/trial-eventcalendar/dist/eventcalendar.css';
 ~~~
 
 In this tutorial you can see how to configure the **trial** version of Event Calendar.
@@ -83,7 +79,6 @@ To display Event Calendar on the page, you need to set the container to render t
 
 ~~~jsx title="event-calendar.component.ts"
 import { EventCalendar } from '@dhx/trial-eventcalendar';
-import '@dhx/trial-eventcalendar/dist/eventcalendar.css';
 import { Component, ElementRef, OnInit, ViewChild, OnDestroy} from '@angular/core';
 
 @Component({
@@ -165,7 +160,7 @@ ngOnInit() {
 }
 ~~~
 
-You can also use the `parse()` method inside the `ngOnInit()` method of Angular to load data into Event Calendar. It will reload data on each applied change.
+You can also use the [`parse()`](/api/methods/js_eventcalendar_parse_method/) method inside the `ngOnInit()` method of Angular to load data into Event Calendar. It will reload data on each applied change.
 
 ~~~jsx {11} title="event-calendar.component.ts"
 // importing the data file
@@ -199,7 +194,7 @@ ngOnInit() {
 
 ### Step 3. Adding Event Calendar into the app
 
-Now it's time to add the component into our app. Open ***src/app/app.component.ts*** and use *EventCalendarComponent* instead of the default content by inserting the code below:
+Now it's time to add the component into your app. Open ***src/app/app.component.ts*** and use *EventCalendarComponent* instead of the default content by inserting the code below:
 
 ~~~jsx title="app.component.ts"
 import { Component } from "@angular/core";
@@ -231,22 +226,6 @@ import { EventCalendarComponent } from "./event-calendar/event-calendar.componen
 export class AppModule {}
 ~~~
 
-For correct rendering of fonts, open the ***angular.json*** file and complete the "assets" array in the following way (replace *eventcalendar_package* with the name of your local folder that contains Event Calendar source files):
-
-~~~jsx {5-9} title="angular.json"
-...
-"assets": [
-    "src/favicon.ico",
-    "src/assets",
-    {
-        "input": "./eventcalendar_package/dist/fonts",
-        "glob": "**/*",
-        "output": "assets"
-    }
-],
-...
-~~~
-
 The last step is to open the ***src/main.ts*** file and replace the existing code with the following one:
 
 ~~~jsx title="main.ts"
@@ -257,7 +236,7 @@ platformBrowserDynamic()
     .catch((err) => console.error(err));
 ~~~
 
-After that, when you can start the app to see Event Calendar loaded with data on a page.
+After that, you can start the app to see Event Calendar loaded with data on a page.
 
 ![Event Calendar initialization](../assets/trial_eventcalendar.png)
 

docs/guides/integration_with_react.md

@@ -159,16 +159,32 @@ export function getData() {
 }
 ~~~
 
-Then open the ***EventCalendar.jsx*** file, pass the name of the data file to the component constructor function:
+Then open the ***App.js*** file and import data. After this you can pass data into the new created `<EventCalendar/>` components as **props**:
 
-~~~jsx {1,6-7} title="EventCalendar.jsx"
+~~~jsx {2,5-6} title="App.jsx"
+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;
+~~~
+
+Open the ***EventCalendar.jsx*** file and apply the passed **props** to the Event Calendar configuration object:
+
+~~~jsx {4,8-9} title="EventCalendar.jsx"
 const EventCalendarComponent = (props) => {
     let container = useRef();
 
+    const { events, date } = props;
+
     useEffect(() => {
         new EventCalendar(container.current, {
-            events: props.events,
-            date: props.date
+            events,
+            date
         });
         return () => (container.current.innerHTML = "");
     }, []);
@@ -179,26 +195,29 @@ const EventCalendarComponent = (props) => {
 export default EventCalendarComponent;
 ~~~
 
-You can also use the `parse()` method inside the `useEffect()` method of React to load data into Event Calendar:
+You can also use the [`parse()`](/api/methods/js_eventcalendar_parse_method/) method inside the `useEffect()` method of React to load data into Event Calendar:
 
-~~~jsx {7} title="EventCalendar.jsx"
+~~~jsx {4,9} title="EventCalendar.jsx"
 const EventCalendarComponent = (props) => {
     let container = useRef();
-    let events = props.events;
+
+    const { events, date } = props;
 
     useEffect(() => {
         const calendar = new EventCalendar(container.current, {});
 
-        calendar.parse(events);
+        calendar.parse({ events, date });
 
         return () => (container.current.innerHTML = "");
     }, []);
 
     return <div ref={container}></div>;
 };
+
+export default EventCalendarComponent;
 ~~~
 
-The `calendar.parse(events);` line provides data reloading on each applied change.
+The `calendar.parse(data);` line provides data reloading on each applied change.
 
 Now the Event Calendar component is ready. When the element will be added to the page, it will initialize the Event Calendar object with data. You can provide necessary configuration settings as well. Visit our [Event Calendar API docs](/api/overview/properties_overview/) to check the full list of available properties.
 
@@ -236,7 +255,7 @@ function App() {
 export default App;
 ~~~
 
-After that, when you can start the app to see Event Calendar loaded with data on a page.
+After that, you can start the app to see Event Calendar loaded with data on a page.
 
 ![Event Calendar initialization](../assets/trial_eventcalendar.png)
 

docs/guides/integration_with_svelte.md

@@ -188,7 +188,7 @@ Open the ***EventCalendar.svelte*** file and apply the passed **props** to the E
 <div bind:this={container} style="width: 100%; height: 100%;"></div>
 ~~~
 
-You can also use the `parse()` method inside the `onMount()` method of Svelte to load data into Event Calendar:
+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:
 
 ~~~html {3-4,8-11} title="App.svelte"
 <script>
@@ -237,7 +237,7 @@ To add the component into the app, open the **App.svelte** file and replace the
 <EventCalendar events={events} date={new Date(2024, 5, 10)} />
 ~~~
 
-After that, when we start the app, we should see Event Calendar loaded with data on a page.
+After that, you can start the app to see Event Calendar loaded with data on a page.
 
 ![Event Calendar initialization](../assets/trial_eventcalendar.png)
 

docs/guides/integration_with_vue.md

@@ -107,6 +107,7 @@ Then you need to render Event Calendar in the container. Use the `new EventCalen
 
 ~~~html title="EventCalendarComponent.vue"
 <script>
+    // ...
     export default {
         mounted: function() {
             this.calendar = new EventCalendar(this.$refs.container, {});
@@ -119,7 +120,7 @@ Then you need to render Event Calendar in the container. Use the `new EventCalen
 </template>
 ~~~
 
-To clear the component as it has unmounted, use the `calendar.destructor()` call and remove the container after that inside the `unmounted()` method of ***Vue.js***, as follows:
+To clear the component as it has unmounted, use the `calendar.destructor()` method and remove the container inside the `unmounted()` method of ***Vue.js***, as follows:
 
 ~~~html {7-10} title="EventCalendarComponent.vue"
 <script>
@@ -215,7 +216,7 @@ Open the ***EventCalendarComponent.vue*** file and apply the passed **props** to
 </script>
 ~~~
 
-You can also use the `parse()` method inside the `mounted()` method of Vue to load data into Event Calendar:
+You can also use the [`parse()`](/api/methods/js_eventcalendar_parse_method/) method inside the `mounted()` method of Vue to load data into Event Calendar:
 
 ~~~html {7} title="EventCalendarComponent.vue"
 <script>
@@ -277,7 +278,7 @@ To add the component into the app, open the **App.vue** file and replace the def
 </template>
 ~~~
 
-After that, when you can start the app to see Event Calendar loaded with data on a page.
+After that, you can start the app to see Event Calendar loaded with data on a page.
 
 ![Event Calendar initialization](../assets/trial_eventcalendar.png)