From c2382e644f33828b5d83f156084499d53de21b7c Mon Sep 17 00:00:00 2001 From: Serhii Pylypchuk Date: Sun, 9 Jun 2024 23:43:21 +0400 Subject: [PATCH] [update] minor changes related to framework guides --- docs/guides/integration_with_angular.md | 29 +++--------------- docs/guides/integration_with_react.md | 39 ++++++++++++++++++------- docs/guides/integration_with_svelte.md | 4 +-- docs/guides/integration_with_vue.md | 7 +++-- 4 files changed, 39 insertions(+), 40 deletions(-) diff --git a/docs/guides/integration_with_angular.md b/docs/guides/integration_with_angular.md index 02a8c25..6d84ec0 100644 --- a/docs/guides/integration_with_angular.md +++ b/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/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) diff --git a/docs/guides/integration_with_react.md b/docs/guides/integration_with_react.md index 8ef94ad..ccc2511 100644 --- a/docs/guides/integration_with_react.md +++ b/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 `` 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 ; +} + +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/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
; }; + +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) diff --git a/docs/guides/integration_with_svelte.md b/docs/guides/integration_with_svelte.md index 5088402..75e2264 100644 --- a/docs/guides/integration_with_svelte.md +++ b/docs/guides/integration_with_svelte.md @@ -188,7 +188,7 @@ Open the ***EventCalendar.svelte*** file and apply the passed **props** to the E
~~~ -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/parse_method/) method inside the `onMount()` method of Svelte to load data into Event Calendar: ~~~html {3-4,8-11} title="App.svelte" ~~~ -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/parse_method/) method inside the `mounted()` method of Vue to load data into Event Calendar: ~~~html {7} title="EventCalendarComponent.vue"