Integrated latest changes at 11-19-2024 4:30:28 PM

Author: SyncfusionBuild

ej2-react/code-snippet/schedule/resource-cs17/app/index.jsx

@@ -4,7 +4,7 @@ import { ScheduleComponent, TimelineYear, ViewsDirective, ViewDirective, Resourc
 import { resourceData } from './datasource';
 const App = () => {
   const eventSettings = { dataSource: resourceData };
-  const group = { resources: ['Projects', 'Categories'] };
+  const group = { resources: ['Owners'] };
 
   const ownerData = [
     { OwnerText: 'Nancy', Id: 1, OwnerColor: '#ffaa00' },
@@ -13,7 +13,7 @@ const App = () => {
   ];
   return (<ScheduleComponent width='100%' height='550px' selectedDate={new Date(2018, 3, 1)} eventSettings={eventSettings}>
     <ViewsDirective>
-      <ViewDirective option='TimelineYear' displayName='Horizontal Timeline Year' isSelected={true} />
+      <ViewDirective option='TimelineYear' displayName='Horizontal Timeline Year' isSelected={true} group={group} />
       <ViewDirective option='TimelineYear' displayName='Vertical Timeline Year' orientation='Vertical' group={group} />
     </ViewsDirective>
     <ResourcesDirective>

ej2-react/code-snippet/schedule/resource-cs17/app/index.tsx

@@ -8,7 +8,7 @@ import { resourceData } from './datasource';
 
 const App = () => {
   const eventSettings: EventSettingsModel = { dataSource: resourceData };
-  const group: GroupModel = { resources: ['Projects', 'Categories'] };
+  const group: GroupModel = { resources: ['Owners'] };
 
   const ownerData: Object[] = [
     { OwnerText: 'Nancy', Id: 1, OwnerColor: '#ffaa00' },
@@ -17,7 +17,7 @@ const App = () => {
   ];
   return (<ScheduleComponent width='100%' height='550px' selectedDate={new Date(2018, 3, 1)} eventSettings={eventSettings} >
     <ViewsDirective>
-      <ViewDirective option='TimelineYear' displayName='Horizontal Timeline Year' isSelected={true} />
+      <ViewDirective option='TimelineYear' displayName='Horizontal Timeline Year' isSelected={true} group={group} />
       <ViewDirective option='TimelineYear' displayName='Vertical Timeline Year' orientation='Vertical' group={group} />
     </ViewsDirective>
     <ResourcesDirective>

ej2-react/code-snippet/schedule/views-cs20/app/index.jsx

@@ -8,6 +8,7 @@ const App = () => {
   return (<ScheduleComponent width='100%' height='550px' selectedDate={new Date(2018, 1, 15)} eventSettings={eventSettings}>
     <ViewsDirective>
       <ViewDirective option='TimelineYear' displayName='Horizontal Timeline Year' isSelected={true} />
+      <ViewDirective option='TimelineYear' displayName='Vertical Timeline Year' orientation='Vertical' />
     </ViewsDirective>
     <Inject services={[TimelineYear]} />
   </ScheduleComponent>);

ej2-react/code-snippet/schedule/views-cs20/app/index.tsx

@@ -13,6 +13,7 @@ const App = () => {
     eventSettings={eventSettings}>
     <ViewsDirective>
       <ViewDirective option='TimelineYear' displayName='Horizontal Timeline Year' isSelected={true} />
+      <ViewDirective option='TimelineYear' displayName='Vertical Timeline Year' orientation='Vertical'/>
     </ViewsDirective>
     <Inject services={[TimelineYear]} />
   </ScheduleComponent>)

ej2-react/schedule/views.md

@@ -262,7 +262,7 @@ The following code example shows how to hide the weekend days on `MonthAgenda` v
 
 Similar to the day view, it shows a single day with all its appointments where the time slots are displayed horizontally. By default, the cell height adjusts as per the height set to Scheduler. When the number of appointments exceeds the visible area of the cells, the `+ more` text indicator will be displayed at the bottom to denote the presence of few more appointments in that time range.
 
-To make use of the timeline views (Timeline Day, Timeline Week and Timeline Work Week) on Scheduler, import and inject the module `TimelineViews` from the `ej2-schedule` package.
+To make use of the timeline views (Timeline Day, Timeline Week and Timeline Work Week) on Scheduler, import and inject the module `TimelineViews` from the `ej2-react-schedule` package.
 
 {% tabs %}
 {% highlight js tabtitle="index.jsx" %}
@@ -314,7 +314,7 @@ The following code example depicts how to display the timeline work week view on
 
 ### Timeline Month view
 
-A Timeline Month view displays the current month days along with its appointments. To make use of the timeline Month view on Scheduler, import and inject `TimelineMonth` module from the `ej2-schedule` package.
+A Timeline Month view displays the current month days along with its appointments. To make use of the timeline Month view on Scheduler, import and inject `TimelineMonth` module from the `ej2-react-schedule` package.
 
 {% tabs %}
 {% highlight js tabtitle="index.jsx" %}
@@ -336,7 +336,7 @@ A Timeline Month view displays the current month days along with its appointment
 
 In Timeline Year view, each row depicts a single resource. Whereas in the vertical view, each resource is grouped parallelly as columns. Here, the resource grouping follows the tree-view like hierarchical grouping structure and can contain any level of child resources.
 
-To make use of the timeline Year view on Scheduler, import and inject `TimelineYear` module from the `ej2-schedule` package.
+To make use of the timeline Year view on Scheduler, import and inject `TimelineYear` module from the `ej2-react-schedule` package.
 
 {% tabs %}
 {% highlight js tabtitle="index.jsx" %}