diff --git a/ej2-react/chips/getting-started.md b/ej2-react/chips/getting-started.md index 15d56ab54..c5f881200 100644 --- a/ej2-react/chips/getting-started.md +++ b/ej2-react/chips/getting-started.md @@ -8,10 +8,14 @@ documentation: ug domainurl: ##DomainURL## --- -# Getting Started +# Getting started with React Chips component This section explains how to create a simple Chip and to configure the Chip component. +To get start quickly with React Chips, you can check on this video: + +{% youtube "https://www.youtube.com/watch?v=KH_Bi3yTOZ4" %} + ## Dependencies The list of dependencies required to use the Chip component in your application is given below: diff --git a/ej2-react/schedule/appointments.md b/ej2-react/schedule/appointments.md index 829cb240b..edf718ba4 100644 --- a/ej2-react/schedule/appointments.md +++ b/ej2-react/schedule/appointments.md @@ -52,7 +52,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/react/documentation/api/schedule/field/#isallday) field to true. ### Hide all-day row events @@ -68,7 +68,7 @@ You can make use of the CSS customization to prevent the display of all-day row ## Expand all day appointments view on initial load -When you have larger number of appointments in all-day view, you can show all all-day events using `dataBound` event on at initial load. So, user don't have to click the toggle to expand all-day events. +When you have larger number of appointments in all-day view, you can show all all-day events using [`dataBound`](https://ej2.syncfusion.com/react/documentation/api/schedule#databound) event on at initial load. So, user don't have to click the toggle to expand all-day events. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -86,7 +86,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` 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/react/documentation/api/schedule/eventSettings/#spannedeventplacement) option within the [`eventSettings`](https://ej2.syncfusion.com/react/documentation/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/react/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 js tabtitle="index.jsx" %} @@ -126,7 +126,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/react/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". @@ -146,9 +146,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/react/documentation/api/schedule/field/#recurrenceid) field defined to it. The [`recurrenceID`](https://ej2.syncfusion.com/react/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/react/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 . The [`recurrenceID`](https://ej2.syncfusion.com/react/documentation/api/schedule/field/#recurrenceid) field pointing to the parent event's [`Id`](https://ej2.syncfusion.com/react/documentation/api/schedule/field/#id) value. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -166,9 +166,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` 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/react/documentation/api/schedule/eventSettings/#editfollowingevents) within [`eventSettings`](https://ej2.syncfusion.com/react/documentation/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/react/documentation/api/schedule/field/#followingid) field defined to it. The `followingID`[`followingID`](https://ej2.syncfusion.com/react/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/react/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/react/documentation/api/schedule/field/#followingid) field pointing to the immediate parent event's [`Id`](https://ej2.syncfusion.com/react/documentation/api/schedule/field/#id) value. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -186,7 +186,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/react/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? @@ -201,9 +201,9 @@ There are four repeat types available namely, ### Recurrence properties - The properties based on which the recurrence appointments are created with its respective time period are depicted in the following table. Also, the valid rule string can be referred from [iCalendar](https://tools.ietf.org/html/rfc5545#section-3.3.10) specifications. + The properties based on which the recurrence appointments are created with its respective time period are depicted in the following table. Also, the valid rule string can be referred from [`iCalendar`](https://tools.ietf.org/html/rfc5545#section-3.3.10) specifications. - > Refer [iCalendar](https://tools.ietf.org/html/rfc5545#section-3.3.10) specifications for valid recurrence rule string. + > Refer [`iCalendar`](https://tools.ietf.org/html/rfc5545#section-3.3.10) specifications for valid recurrence rule string. | Property | Purpose | Example | |-------|---------| --------- | @@ -274,9 +274,9 @@ The built-in validation support has been added by default for recurring appointm ## Event fields -The Scheduler dataSource usually holds the event instances, where each of the instance includes a collection of appropriate [fields](https://ej2.syncfusion.com/react/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. +The Scheduler dataSource usually holds the event instances, where each of the instance includes a collection of appropriate [`fields`](https://ej2.syncfusion.com/react/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/react/documentation/api/schedule/field/#starttime) and [`endTime`](https://ej2.syncfusion.com/react/documentation/api/schedule/field/#endtime). Also [`id`](https://ej2.syncfusion.com/react/documentation/api/schedule/field/#id) field becomes mandatory to process CRUD actions on appropriate events. ### Built-in fields @@ -284,24 +284,24 @@ 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/react/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/react/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/react/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/react/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/react/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`](https://ej2.syncfusion.com/react/documentation/api/schedule/field/#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/react/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`](https://ej2.syncfusion.com/react/documentation/api/schedule/field/#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/react/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/react/documentation/api/schedule/field/#description) field from the dataSource and denotes the event description which is optional.| +| isAllDay | The [`isAllDay`](https://ej2.syncfusion.com/react/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`](https://ej2.syncfusion.com/react/documentation/api/schedule/field/#isallday) field set to true will be considered as an all-day event. | +| recurrenceID | It maps the [`recurrenceID`](https://ej2.syncfusion.com/react/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/react/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/react/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`](https://ej2.syncfusion.com/react/documentation/api/schedule/field/#recurrenceexception) should be specified in UTC format. | +| isReadonly | It maps the [`isReadonly`](https://ej2.syncfusion.com/react/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/react/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 -When the fields of event instances has the default mapping name, it is not mandatory to map them manually. If a Scheduler's dataSource holds the events collection with different field names, then it is necessary to map them with its equivalent field name within the `eventSettings` property. +When the fields of event instances has the default mapping name, it is not mandatory to map them manually. If a Scheduler's dataSource holds the events collection with different field names, then it is necessary to map them with its equivalent field name within the [`eventSettings`](https://ej2.syncfusion.com/react/documentation/api/schedule/eventSettings/) property. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -317,7 +317,7 @@ When the fields of event instances has the default mapping name, it is not manda {% previewsample "page.domainurl/code-snippet/schedule/events-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/react/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 @@ -348,7 +348,7 @@ In following example, the Subject field in event editor will display its appropr ## Adding Custom fields -Apart from the default Scheduler fields, the user can include 'n' number of custom fields for appointments. The following code example shows how to include two custom fields namely **Status** and **Priority** within event collection. It is not necessary to bind the custom fields within the `eventSettings`. However, those additional fields can be accessed easily, for internal processing as well as from application end. +Apart from the default Scheduler fields, the user can include 'n' number of custom fields for appointments. The following code example shows how to include two custom fields namely **Status** and **Priority** within event collection. It is not necessary to bind the custom fields within the [`eventSettings`](https://ej2.syncfusion.com/react/documentation/api/schedule/eventSettings/). However, those additional fields can be accessed easily, for internal processing as well as from application end. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -366,7 +366,7 @@ Apart from the default Scheduler fields, the user can include 'n' number of cust ## Customize the order of the overlapping events -By default, the scheduler will render the overlapping events based on the start and end time. Now we can customize the order of the overlapping events based on the custom fields by using the `sortComparer` property grouped under the `eventSettings` property. The following code example shows how to sort the appointments based on the custom field as follows. +By default, the scheduler will render the overlapping events based on the start and end time. Now we can customize the order of the overlapping events based on the custom fields by using the [`sortComparer`](https://ej2.syncfusion.com/react/documentation/api/schedule/eventSettings/#sortcomparer) property grouped under the [`eventSettings`](https://ej2.syncfusion.com/react/documentation/api/schedule/eventSettings/) property. The following code example shows how to sort the appointments based on the custom field as follows. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -384,7 +384,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` 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`](https://ej2.syncfusion.com/react/documentation/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. Learn the advanced options of Drag and Resize actions for React Scheduler from this video: @@ -408,7 +408,7 @@ Learn the advanced options of Drag and Resize actions for React Scheduler from t ### Drag and drop multiple appointments -We can drag and drop multiple appointments by enabling the `allowMultiDrag` property. We can select multiple appointments by holding the CTRL key. Once the events are selected, we can leave the CTRL key and start dragging the event. +We can drag and drop multiple appointments by enabling the [`allowMultiDrag`](https://ej2.syncfusion.com/react/documentation/api/schedule#allowmultidrag) property. We can select multiple appointments by holding the CTRL key. Once the events are selected, we can leave the CTRL key and start dragging the event. We can also drag multiple events from one resource to another resource. In this case, if all the selected events are in the different resources, then all the events should be moved to the single resource that is related to the target event. @@ -430,7 +430,7 @@ We can also drag multiple events from one resource to another resource. In this ### Disable the drag action -By default, you can drag and drop the events within any of the applicable scheduler views, and to disable it, set `false` to the `allowDragAndDrop` property. +By default, you can drag and drop the events within any of the applicable scheduler views, and to disable it, set `false` to the [`allowMultiDrag`](https://ej2.syncfusion.com/react/documentation/api/schedule#allowmultidrag) property. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -448,7 +448,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` event. In the following 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/react/documentation/api/schedule/dragEventArgs/#excludeselectors) option within [`dragStart`](https://ej2.syncfusion.com/react/documentation/api/schedule#dragstart) event. In the following example, we have prevented the drag action on all-day row. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -466,7 +466,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 or bottom of the Scheduler, scrolling action takes place automatically. To prevent this scrolling, set `false` to the `scroll` value within the `dragStart` event arguments. +By default, while dragging an appointment to the edges, either top or bottom of the Scheduler, scrolling action takes place automatically. To prevent this scrolling, set `false` to the [`scroll`](https://ej2.syncfusion.com/react/documentation/api/schedule/dragEventArgs/#scroll) value within the [`dragStart`](https://ej2.syncfusion.com/react/documentation/api/schedule#dragstart) event arguments. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -484,7 +484,7 @@ By default, while dragging an appointment to the edges, either top or bottom of ### 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` 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`](https://ej2.syncfusion.com/react/documentation/api/schedule#dragstart) event by setting the desired value to the [`scrollBy`](https://ej2.syncfusion.com/react/documentation/api/schedule/scrollOptions/#scrollby) and [`timeDelay`](https://ej2.syncfusion.com/react/documentation/api/schedule/scrollOptions/#timedelay) option whereas its default value is 30 minutes and 100ms. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -502,9 +502,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` 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/react/documentation/api/schedule/dragEventArgs/#navigation) to true within the [`dragStart`](https://ej2.syncfusion.com/react/documentation/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/react/documentation/api/schedule/scrollOptions/#timedelay) within the [`dragStart`](https://ej2.syncfusion.com/react/documentation/api/schedule#dragstart) event. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -522,7 +522,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` 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/react/documentation/api/schedule/dragEventArgs/#interval) option within the [`dragStart`](https://ej2.syncfusion.com/react/documentation/api/schedule#dragstart) event. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -540,9 +540,9 @@ 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/react/documentation/api/schedule#addevent) method of Scheduler. -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/react/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/react/documentation/api/schedule#addevent) method. Learn how to drag an external item into the React Scheduler by watching this video: @@ -564,7 +564,7 @@ Learn how to drag an external item into the React Scheduler by watching this vid ### Opening the editor window on drag stop -There are scenarios where you want to open the editor filled with data on newly dropped location and may need to proceed to save it, only when `Save` button is clicked on the editor. On clicking the cancel button should revert these changes. This can be achieved using the `dragStop` event of Scheduler. +There are scenarios where you want to open the editor filled with data on newly dropped location and may need to proceed to save it, only when `Save` button is clicked on the editor. On clicking the cancel button should revert these changes. This can be achieved using the [`dragStop`](https://ej2.syncfusion.com/react/documentation/api/schedule#dragstop) event of Scheduler. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -590,7 +590,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` 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`](https://ej2.syncfusion.com/react/documentation/api/schedule#allowinline) the [`showQuickInfo`](https://ej2.syncfusion.com/react/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`](https://ej2.syncfusion.com/react/documentation/api/schedule#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 @@ -617,7 +617,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` 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`](https://ej2.syncfusion.com/react/documentation/api/schedule#allowresizing) property is set to true. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -635,7 +635,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` 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`](https://ej2.syncfusion.com/react/documentation/api/schedule#allowresizing) property. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -653,7 +653,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` 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/react/documentation/api/schedule/resizeEventArgs/#scroll) value within the [`resizeStart`](https://ej2.syncfusion.com/react/documentation/api/schedule#resizestart) event. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -671,7 +671,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` 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`](https://ej2.syncfusion.com/react/documentation/api/schedule#resizestart) event by setting the desired value to the `scrollBy` option. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -689,7 +689,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` 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/react/documentation/api/schedule/resizeEventArgs/#interval) option within the [`resizeStart`](https://ej2.syncfusion.com/react/documentation/api/schedule#resizestart) event. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -714,7 +714,7 @@ The look and feel of the Scheduler events can be customized using any one of the ### Using template -Any kind of text, images and links can be added to customize the look of the events. The user can format and change the default appearance of the events by making use of the `template` option available within the `eventSettings` property. The following code example customizes the appointment's default color and time format. +Any kind of text, images and links can be added to customize the look of the events. The user can format and change the default appearance of the events by making use of the [`template`](https://ej2.syncfusion.com/react/documentation/api/schedule/eventSettings/#template) option available within the [`eventSettings`](https://ej2.syncfusion.com/react/documentation/api/schedule/eventSettings/) property. The following code example customizes the appointment's default color and time format. Learn how easily you can customize the basic look and feel of React Scheduler appointments using template from this video: @@ -734,11 +734,11 @@ Learn how easily you can customize the basic look and feel of React Scheduler ap {% previewsample "page.domainurl/code-snippet/schedule/event-template-cs1" %} -> All the built-in fields that are mapped to the appropriate field properties within the `eventSettings`, as well as custom mapped fields from the Scheduler dataSource can be accessed within the template code. +> All the built-in fields that are mapped to the appropriate field properties within the [`eventSettings`](https://ej2.syncfusion.com/react/documentation/api/schedule/eventSettings/), as well as custom mapped fields from the Scheduler dataSource can be accessed within the template code. ### 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/react/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 js tabtitle="index.jsx" %} @@ -756,7 +756,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/react/documentation/api/schedule#cssclass) property of the Scheduler. In the following example, the background of appointments has been changed using the cssClass. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -774,7 +774,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/react/documentation/api/schedule#eventrendered) event, when its start and end time duration is less than the default duration of a single slot. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -792,7 +792,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` 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`](https://ej2.syncfusion.com/react/documentation/api/schedule/eventSettings/) along with the required time range to block and set the [`isBlock`](https://ej2.syncfusion.com/react/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/react/documentation/api/schedule/field/#starttime) and [`endTime`](https://ej2.syncfusion.com/react/documentation/api/schedule/field/#endtime) fields. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -826,7 +826,7 @@ Block events can also be defined to repeat on several days as shown in the follo ## Readonly -An interaction with the appointments of Scheduler can be enabled/disabled using the `readonly` property. With this property enabled, you can simply navigate between the Scheduler dates, views and can be able to view the appointment details in the quick info window. Most importantly, the users are not allowed to perform any CRUD actions on Scheduler, when this property is set to true. By default, it is set as `false`. +An interaction with the appointments of Scheduler can be enabled/disabled using the [`readonly`](https://ej2.syncfusion.com/react/documentation/api/schedule#readonly) property. With this property enabled, you can simply navigate between the Scheduler dates, views and can be able to view the appointment details in the quick info window. Most importantly, the users are not allowed to perform any CRUD actions on Scheduler, when this property is set to true. By default, it is set as `false`. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -844,7 +844,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/react/documentation/api/schedule/field/#isreadonly) field of read-only events to `true`. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -860,11 +860,11 @@ There are scenarios where you need to restrict the CRUD action on specific appoi {% previewsample "page.domainurl/code-snippet/schedule/events-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/react/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/react/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. @@ -884,7 +884,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/react/documentation/api/schedule#eventrendered) event can be used which triggers before the appointment renders on the Scheduler. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -902,9 +902,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/react/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/react/documentation/api/schedule/eventSettings/#enableindicator) property whereas its default value is `false`. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -923,9 +923,9 @@ We can show more indicator if more than one appointment is available in a same c ## How to limit maximum number of events to display In the Scheduler, the default behavior is to display concurrent events based on cell height, with each new event represented as -`+n more` characters. However, you may want to improve the quality of the presentation by limiting the number of concurrent events. This can be accomplished by using the [maxEventsPerRow](https://ej2.syncfusion.com/react/documentation/api/schedule/views/#maxeventsperrow) property, which is defaulted to the [views](https://ej2.syncfusion.com/react/documentation/api/schedule/views/) property. +`+n more` characters. However, you may want to improve the quality of the presentation by limiting the number of concurrent events. This can be accomplished by using the [`maxEventsPerRow`](https://ej2.syncfusion.com/react/documentation/api/schedule/views/#maxeventsperrow) property, which is defaulted to the [`views`](https://ej2.syncfusion.com/react/documentation/api/schedule/views/) property. -The [maxEventsPerRow](https://ej2.syncfusion.com/react/documentation/api/schedule/views/#maxeventsperrow) property is specific to the month, timeline month, and timeline year views, allowing you to view events visually in these rows. Below is a code example that demonstrates how to use this constraint and the events displayed in a cell have been created: +The [`maxEventsPerRow`](https://ej2.syncfusion.com/react/documentation/api/schedule/views/#maxeventsperrow) property is specific to the month, timeline month, and timeline year views, allowing you to view events visually in these rows. Below is a code example that demonstrates how to use this constraint and the events displayed in a cell have been created: {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -941,7 +941,7 @@ The [maxEventsPerRow](https://ej2.syncfusion.com/react/documentation/api/schedul {% previewsample "page.domainurl/code-snippet/schedule/max-events-per-row-cs1" %} -> The property [maxEventsPerRow](https://ej2.syncfusion.com/react/documentation/api/schedule/views/#maxeventsperrow) will be applicable only when [rowAutoHeight](https://ej2.syncfusion.com/react/documentation/api/schedule/#rowautoheight) feature is disabled in the Scheduler. +> The property [`maxEventsPerRow`](https://ej2.syncfusion.com/react/documentation/api/schedule/views/#maxeventsperrow) will be applicable only when [`rowAutoHeight`](https://ej2.syncfusion.com/react/documentation/api/schedule/#rowautoheight) feature is disabled in the Scheduler. ## Display tooltip for appointments @@ -949,7 +949,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` property. +The tooltip can be displayed for appointments by setting `true` to the [`enableTooltip`](https://ej2.syncfusion.com/react/documentation/api/schedule/eventSettings/#enabletooltip) option within the [`eventSettings`](https://ej2.syncfusion.com/react/documentation/api/schedule/eventSettings/) property. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -967,7 +967,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`. +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/react/documentation/api/schedule/eventSettings/#tooltiptemplate) option within the [`eventSettings`](https://ej2.syncfusion.com/react/documentation/api/schedule/eventSettings/). {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -983,7 +983,7 @@ 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/react/documentation/api/schedule/eventSettings/) can be accessed within the template. ## Appointment selection @@ -1000,7 +1000,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/react/documentation/api/schedule#geteventdetails). In the following example, the subject of the appointment clicked has been displayed. @@ -1020,7 +1020,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` event. +To retrieve the appointments present in the current view of the Scheduler, you can make use of the [`getCurrentViewEvents`](https://ej2.syncfusion.com/react/documentation/api/schedule#getcurrentviewevents) public method. In the following example, the count of current view appointment collection rendered has been traced in [`dataBound`](https://ej2.syncfusion.com/react/documentation/api/schedule#databound) event. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -1038,7 +1038,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` event. +The entire collection of appointments rendered on the Scheduler can be accessed using the [`getEvents`](https://ej2.syncfusion.com/react/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`](https://ej2.syncfusion.com/react/documentation/api/schedule#databound) event. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -1056,7 +1056,7 @@ The entire collection of appointments rendered on the Scheduler can be accessed ## Refresh appointments -If your requirement is to simply refresh the appointments instead of refreshing the entire Scheduler elements from your application end, make use of the `refreshEvents` public method. +If your requirement is to simply refresh the appointments instead of refreshing the entire Scheduler elements from your application end, make use of the [`refreshEvents`](https://ej2.syncfusion.com/react/documentation/api/schedule#refreshevents) public method. ```ts this.scheduleObj.refreshEvents(); diff --git a/ej2-react/schedule/cell-customization.md b/ej2-react/schedule/cell-customization.md index 69dfa933e..8fa440da6 100644 --- a/ej2-react/schedule/cell-customization.md +++ b/ej2-react/schedule/cell-customization.md @@ -10,11 +10,11 @@ domainurl: ##DomainURL## # Cell customization in React 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/react/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/react/documentation/api/schedule#cssclass) property, which overrides the default CSS applied on cells. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -35,7 +35,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/react/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. @@ -55,11 +55,11 @@ 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/react/documentation/api/schedule#rendercell) event on all the views. ### Using template -The `cellTemplate` option accepts the template string and is used to customize the cell background with specific images or appropriate text on the given date values. +The [`cellTemplate`](https://ej2.syncfusion.com/react/documentation/api/schedule#celltemplate) option accepts the template string and is used to customize the cell background with specific images or appropriate text on the given date values. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -80,7 +80,7 @@ The `cellTemplate` option accepts the template string and is used to customize t ### Using renderCell event -An alternative to `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`[`cellTemplate`](https://ej2.syncfusion.com/react/documentation/api/schedule#celltemplate) is the [`renderCell`](https://ej2.syncfusion.com/react/documentation/api/schedule#rendercell) event, which can also be used to customize the cells with appropriate images or formatted text values. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -99,7 +99,7 @@ An alternative to `cellTemplate` is the `renderCell` event, which can also be us {% previewsample "page.domainurl/code-snippet/schedule/cell-dimension-cs2" %} -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/react/documentation/api/schedule#rendercell) event by checking the [`elementType`](https://ej2.syncfusion.com/react/documentation/api/schedule/renderCellEventArgs/#elementtype) option within the event. You can check elementType with any of the following. | Element type | Description | |-------|---------| @@ -117,7 +117,7 @@ You can customize cells such as work cells, month cells, all-day cells, header c ## Customizing cell header in month view -The month header of each date cell in the month view can be customized using the `cellHeaderTemplate` option which accepts the string or HTMLElement. The corresponding date can be accessed with the template. +The month header of each date cell in the month view can be customized using the [`cellHeaderTemplate`](https://ej2.syncfusion.com/react/documentation/api/schedule#cellheadertemplate) option which accepts the string or HTMLElement. The corresponding date can be accessed with the template. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -138,7 +138,7 @@ The month header of each date cell in the month view can be customized using the ## Customizing the minimum and maximum date values -Providing the `minDate` and `maxDate` property with some date values, allows the Scheduler to set the minimum and maximum date range. The Scheduler date that lies beyond this minimum and maximum date range will be in a disabled state so that the date navigation will be blocked beyond the specified date range. +Providing the [`minDate`](https://ej2.syncfusion.com/react/documentation/api/schedule#mindate) and [`maxDate`](https://ej2.syncfusion.com/react/documentation/api/schedule#maxdate) property with some date values, allows the Scheduler to set the minimum and maximum date range. The Scheduler date that lies beyond this minimum and maximum date range will be in a disabled state so that the date navigation will be blocked beyond the specified date range. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -157,7 +157,7 @@ Providing the `minDate` and `maxDate` property with some date values, allows the {% previewsample "page.domainurl/code-snippet/schedule/cell-dimension-cs4" %} ->By default, the `minDate` property value is set to new Date(1900, 0, 1) and `maxDate` property value is set to new Date(2099, 11, 31). The user can also set the customized `minDate` and `maxDate` property values. +>By default, the [`minDate`](https://ej2.syncfusion.com/react/documentation/api/schedule#mindate) property value is set to new Date(1900, 0, 1) and [`maxDate`](https://ej2.syncfusion.com/react/documentation/api/schedule#maxdate) property value is set to new Date(2099, 11, 31). The user can also set the customized [`minDate`](https://ej2.syncfusion.com/react/documentation/api/schedule#mindate) and [`maxDate`](https://ej2.syncfusion.com/react/documentation/api/schedule#maxdate) property values. ## Customizing the weekend cells background color @@ -207,6 +207,6 @@ And, the background color for weekend cells in the Month view through the [`cssC ## How to disable multiple cell and row selection in Schedule -By default, the `allowMultiCellSelection` and `allowMultiRowSelection` properties of the Schedule are set to `true`. So, the Schedule allows user to select multiple cells and rows. If the user want to disable this multiple cell and row selection. The user can disable this feature by setting up `false` to these properties. +By default, the [`allowMultiCellSelection`](https://ej2.syncfusion.com/react/documentation/api/schedule#allowmulticellselection) and [`allowMultiRowSelection`](https://ej2.syncfusion.com/react/documentation/api/schedule#allowmultirowselection) properties of the Schedule are set to `true`. So, the Schedule allows user to select multiple cells and rows. If the user want to disable this multiple cell and row selection. The user can disable this feature by setting up `false` to these properties. > You can refer to our [React Scheduler](https://www.syncfusion.com/react-components/react-scheduler) feature tour page for its groundbreaking feature representations. You can also explore our [React Scheduler example](https://ej2.syncfusion.com/react/demos/#/material/schedule/overview) to knows how to present and manipulate data. diff --git a/ej2-react/schedule/context-menu.md b/ej2-react/schedule/context-menu.md index d157cec36..9d2bd4603 100644 --- a/ej2-react/schedule/context-menu.md +++ b/ej2-react/schedule/context-menu.md @@ -10,11 +10,11 @@ domainurl: ##DomainURL## # Context menu in React 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/react/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` method of 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`](https://ej2.syncfusion.com/react/documentation/api/schedule#openeditor) method of Scheduler. -The deletion of appointments can be done by using the `deleteEvent` public method. Also, the `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/react/documentation/api/schedule#deleteevent) public method. Also, the [`selectedDate`](https://ej2.syncfusion.com/react/documentation/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-react/schedule/crud-actions.md b/ej2-react/schedule/crud-actions.md index ef4196a6d..06a03d810 100644 --- a/ej2-react/schedule/crud-actions.md +++ b/ej2-react/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/react/documentation/api/schedule#addevent) method. Either you can add a single or a collection of appointment objects using [`addEvent`](https://ej2.syncfusion.com/react/documentation/api/schedule#addevent) method. The following code example let you know how to use the [`addEvent`](https://ej2.syncfusion.com/react/documentation/api/schedule#addevent) method to create multiple appointments simultaneously. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -95,7 +95,7 @@ Additionally, the regex condition has been added to the Location field, so that {% previewsample "page.domainurl/code-snippet/schedule/events-cs38" %} -You can also dynamically prevent the creation of appointments on Scheduler. For example, say if you want to decline the creation of appointments on weekend days, you can check for its appropriate condition within the `actionBegin` event. +You can also dynamically prevent the creation of appointments on Scheduler. For example, say if you want to decline the creation of appointments on weekend days, you can check for its appropriate condition within the [`actionBegin`](https://ej2.syncfusion.com/react/documentation/api/schedule#actionbegin) event. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -126,9 +126,9 @@ You can open the default editor window filled with appointment details by double ### Updating 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/react/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/react/documentation/api/schedule#saveevent) method, the changes gets reflected onto the original event. The [`Id`](https://ej2.syncfusion.com/react/documentation/api/schedule/field/#id) field is mandatory in this edit process, where the modified event object should hold the valid [`Id`](https://ej2.syncfusion.com/react/documentation/api/schedule/field/#id) value that exists in the Scheduler data source. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -144,7 +144,7 @@ The appointments can be edited and updated manually using the `saveEvent` method {% previewsample "page.domainurl/code-snippet/schedule/app-crud-cs2" %} -**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` 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`](https://ej2.syncfusion.com/react/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. @@ -305,7 +305,7 @@ 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/react/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, @@ -386,7 +386,7 @@ if (param.action == "remove" || (param.action == "batch" && param.deleted != nul ### Restricting edit action based on specific criteria -You can also dynamically prevent the editing of appointments on Scheduler. For example, say if you want to decline the updating of appointments on non-working hours, you can check for its appropriate condition within the `actionBegin` event. +You can also dynamically prevent the editing of appointments on Scheduler. For example, say if you want to decline the updating of appointments on non-working hours, you can check for its appropriate condition within the [`actionBegin`](https://ej2.syncfusion.com/react/documentation/api/schedule#actionbegin) event. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -418,9 +418,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/react/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/react/documentation/api/schedule#deleteevent) method. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -544,7 +544,7 @@ 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/react/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, diff --git a/ej2-react/schedule/data-binding.md b/ej2-react/schedule/data-binding.md index d0c88c2c9..5219308d2 100644 --- a/ej2-react/schedule/data-binding.md +++ b/ej2-react/schedule/data-binding.md @@ -17,7 +17,7 @@ The Scheduler uses `DataManager`, which supports both RESTful data service bindi ## Binding local data -To bind local JSON data to the Scheduler, you can simply assign a JavaScript object array to the [`dataSource`](https://ej2.syncfusion.com/react/documentation/api/schedule/eventSettings/#datasource) option of the scheduler within the `eventSettings` property. The JSON object dataSource can also be provided as an instance of `DataManager` and assigned to the Scheduler `dataSource` property. +To bind local JSON data to the Scheduler, you can simply assign a JavaScript object array to the [`dataSource`](https://ej2.syncfusion.com/react/documentation/api/schedule/eventSettings/#datasource) option of the scheduler within the [`eventSettings`](https://ej2.syncfusion.com/react/documentation/api/schedule/eventSettings/) property. The JSON object dataSource can also be provided as an instance of `DataManager` and assigned to the Scheduler `dataSource` property. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -35,11 +35,11 @@ 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 -Any kind of remote data services can be bound to the Scheduler. To do so, create an instance of `DataManager` and provide the service URL to the `url` option of `DataManager` and then assign it to the [`dataSource`](https://ej2.syncfusion.com/react/documentation/api/schedule/eventSettings/#datasource) property within `eventSettings`. +Any kind of remote data services can be bound to the Scheduler. To do so, create an instance of `DataManager` and provide the service URL to the `url` option of `DataManager` and then assign it to the [`dataSource`](https://ej2.syncfusion.com/react/documentation/api/schedule/eventSettings/#datasource) property within [`eventSettings`](https://ej2.syncfusion.com/react/documentation/api/schedule/eventSettings/). ### Using ODataV4Adaptor @@ -323,7 +323,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`. 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/react/documentation/api/schedule#databinding) event. Within this event, the event fields needs to be mapped properly and then assigned to the result. {% tabs %} {% highlight js tabtitle="index.jsx" %} diff --git a/ej2-react/schedule/dimensions.md b/ej2-react/schedule/dimensions.md index 2a6987ce6..c1c903924 100644 --- a/ej2-react/schedule/dimensions.md +++ b/ej2-react/schedule/dimensions.md @@ -18,7 +18,7 @@ The Scheduler dimensions refers to both height and width of the entire layout an ## Auto Height and Width -When height and width of the Scheduler are set to `auto`, it will try as hard as possible to keep an element the same width as its parent container. In other words, the parent container that holds Scheduler, it's width/height will be the sum of its children. By default, Scheduler is assigned with `auto` values for both height and width properties. +When [height](https://ej2.syncfusion.com/react/documentation/api/schedule#height) and [width](https://ej2.syncfusion.com/react/documentation/api/schedule#width) of the Scheduler are set to `auto`, it will try as hard as possible to keep an element the same width as its parent container. In other words, the parent container that holds Scheduler, it's width/height will be the sum of its children. By default, Scheduler is assigned with `auto` values for both height and width properties. {% tabs %} {% highlight js tabtitle="index.jsx" %} diff --git a/ej2-react/schedule/editor-template.md b/ej2-react/schedule/editor-template.md index 1d44dc0ac..e7356915a 100644 --- a/ej2-react/schedule/editor-template.md +++ b/ej2-react/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` event. +> You can also prevent the editor window from opening, by rendering Scheduler in a [`readonly`](https://ej2.syncfusion.com/react/documentation/api/schedule#readonly) mode or by doing code customization within the [`popupOpen`](https://ej2.syncfusion.com/react/documentation/api/schedule#popupopen) event. ### How to change the editor window header title and text of footer buttons @@ -40,7 +40,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/react/documentation/api/schedule/eventSettings/). {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -78,7 +78,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` 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`](https://ej2.syncfusion.com/react/documentation/api/schedule#popupopen) event which gets triggered before the event editor opens on the Scheduler. The [`popupOpen`](https://ej2.syncfusion.com/react/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 js tabtitle="index.jsx" %} @@ -96,7 +96,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` 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` event as shown in the following code example. +In default event editor window, start and end time duration are processed based on the `interval` value set within the [`timeScale`](https://ej2.syncfusion.com/react/documentation/api/schedule#timescale) property. By default, [`interval`](https://ej2.syncfusion.com/react/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/react/documentation/api/schedule/popupOpenEventArgs/#duration) option within the [`popupOpen`](https://ej2.syncfusion.com/react/documentation/api/schedule#popupopen) event as shown in the following code example. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -114,7 +114,7 @@ In default event editor window, start and end time duration are processed based ### How to prevent the display of editor and quick popups -It is possible to prevent the display of editor and quick popup windows by passing the value `true` to `cancel` option within the `popupOpen` event. +It is possible to prevent the display of editor and quick popup windows by passing the value `true` to `cancel` option within the [`popupOpen`](https://ej2.syncfusion.com/react/documentation/api/schedule#popupopen) event. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -130,7 +130,7 @@ It is possible to prevent the display of editor and quick popup windows by passi {% previewsample "page.domainurl/code-snippet/schedule/editor-cs3" %} -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/react/documentation/api/schedule#popupopen) event are as follows. | Type | Description | |------|-------------| @@ -146,7 +146,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/react/documentation/api/schedule#timezonedatasource) property with the collection of [`TimezoneFields`](https://helpej2.syncfusion.com/react/documentation/api/schedule/timezoneFields/) data. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -164,13 +164,13 @@ By default, the timezone collections in the editor window have been loaded with ## Customizing event editor using template -The event editor window can be customized by making use of the `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**. +The event editor window can be customized by making use of the [`editorTemplate`](https://ej2.syncfusion.com/react/documentation/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/react/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. -As we are using our Syncfusion sub-components within our editor using template in the following example, the custom defined form elements needs to be configured as required Syncfusion components such as **DropDownList** and **DateTimePicker** within the `popupOpen` event. This particular step can be skipped, if the user needs to simply use the usual form elements. +As we are using our Syncfusion sub-components within our editor using template in the following example, the custom defined form elements needs to be configured as required Syncfusion components such as **DropDownList** and **DateTimePicker** within the [`popupOpen`](https://ej2.syncfusion.com/react/documentation/api/schedule#popupopen) event. This particular step can be skipped, if the user needs to simply use the usual form elements. Learn how to customize the event editor window using templates from this video: @@ -266,11 +266,11 @@ In the following code example, validation has been added to the status field. ### How to save the customized event editor using template -The **e-field** class is not added to each field defined within the template, so you should allow to set those field values externally by using the `popupClose` event. +The **e-field** class is not added to each field defined within the template, so you should allow to set those field values externally by using the [`popupClose`](https://ej2.syncfusion.com/react/documentation/api/schedule#popupclose) event. 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/react/documentation/api/schedule#popupclose) event. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -286,7 +286,7 @@ The following code example shows how to save the customized event editor using a {% previewsample "page.domainurl/code-snippet/schedule/editor-cs8" %} -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 `popupClose` 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 [`popupClose`](https://ej2.syncfusion.com/react/documentation/api/schedule#popupclose) event are as follows. | Type | Description | |------|-------------| @@ -304,7 +304,7 @@ In case, if you need to prevent only specific popups on Scheduler, then you can The quick info popups are the ones that gets opened, when a cell or appointment is single clicked on the desktop mode. On single clicking a cell, you can simply provide a subject and save it. Also, while single clicking on an event, a popup will be displayed where you can get the overview of the event information. You can also edit or delete those events through the options available in it. -By default, these popups are displayed over cells and appointments of Scheduler and to disable this action, set `false` to `showQuickInfo` property. +By default, these popups are displayed over cells and appointments of Scheduler and to disable this action, set `false` to [`showQuickInfo`](https://ej2.syncfusion.com/react/documentation/api/schedule#showquickinfo) property. > The quick popup that opens while single clicking on the cells are not applicable on mobile devices. @@ -324,7 +324,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`[`quickInfoOnSelectionEnd`](https://ej2.syncfusion.com/react/documentation/api/schedule#quickinfoonselectionend) property where as its default value is `false`. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -356,7 +356,7 @@ L10n.load({ ### Customizing quick popups -The look and feel of the built-in quick popup window, which opens when single clicked on the cells or appointments can be customized by making use of the `quickInfoTemplates` property of the Scheduler. There are 3 sub-options available to customize them easily, +The look and feel of the built-in quick popup window, which opens when single clicked on the cells or appointments can be customized by making use of the [`quickInfoTemplates`](https://helpej2.syncfusion.com/react/documentation/api/schedule/quickInfoTemplates/) property of the Scheduler. There are 3 sub-options available to customize them easily, * header - Accepts the template design that customizes the header part of the quick popup. * content - Accepts the template design that customizes the content part of the quick popup. @@ -376,13 +376,13 @@ 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/react/documentation/api/schedule#quickinfotemplates) using `e-device` class. ## More events indicator and popup When the number of appointments count that lies on a particular time range * default appointment height exceeds the default height of a cell in month view and all other timeline views, a `+ more` text indicator will be displayed at the bottom of those cells. This indicator denotes that the cell contains few more appointments in it and clicking on that will display a popup displaying all the appointments present on that day. -> To disable this option of showing popup with all hidden appointments, while clicking on the text indicator, you can do code customization within the `popupOpen` event. +> To disable this option of showing popup with all hidden appointments, while clicking on the text indicator, you can do code customization within the [`popupOpen`](https://ej2.syncfusion.com/react/documentation/api/schedule#popupopen) event. The same indicator is displayed on all-day row in calendar views such as day, week and work week views alone, when the number of appointment count present in a cell exceeds three. Clicking on the text indicator here will not open a popup, but will allow the expand/collapse option for viewing the remaining appointments present in the all-day row. @@ -422,7 +422,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/react/documentation/api/schedule#moreeventsclick) event. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -440,7 +440,7 @@ It is possible to prevent the display of popup window by passing the value `true ### How to navigate Day view when clicking on more text indicator -The following code example shows you how to customize the `moreEventsClick` property to navigate to the Day view when clicking on the more text indicator. +The following code example shows you how to customize the [`MoreEventsClick`](https://ej2.syncfusion.com/react/documentation/api/schedule#moreeventsclick) property to navigate to the Day view when clicking on the more text indicator. {% tabs %} {% highlight js tabtitle="index.jsx" %} diff --git a/ej2-react/schedule/exporting.md b/ej2-react/schedule/exporting.md index ee03f094d..14914735e 100644 --- a/ej2-react/schedule/exporting.md +++ b/ej2-react/schedule/exporting.md @@ -14,9 +14,9 @@ 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`](https://ej2.syncfusion.com/react/documentation/api/schedule#exporttoexcel) client-side method. By default, it exports all the default fields of Scheduler mapped through [`eventSettings`](https://ej2.syncfusion.com/react/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. +> 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. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -34,7 +34,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` 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/react/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 [`eventSettings`](https://ej2.syncfusion.com/react/documentation/api/schedule/eventSettings/) interface and pass it as argument to the [`exportToExcel`](https://ej2.syncfusion.com/react/documentation/api/schedule#exporttoexcel) method as shown in the following example. For example: `['Id', 'Subject', 'StartTime', 'EndTime', 'Location']`. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -52,7 +52,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` 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/react/documentation/api/schedule/exportOptions/#includeoccurrences) option as `true` through the [`ExportOptions`](https://ej2.syncfusion.com/react/documentation/api/schedule/exportOptions/) interface and pass it as argument to the [`exportToExcel`](https://ej2.syncfusion.com/react/documentation/api/schedule#exporttoexcel) method. By default, the [`includeOccurrences`](https://ej2.syncfusion.com/react/documentation/api/schedule/exportOptions/#includeoccurrences) option is set to `false`. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -70,7 +70,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` 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/react/documentation/api/schedule#exporttoexcel) method as shown in this following example, through the [`customData`](https://ej2.syncfusion.com/react/documentation/api/schedule/exportOptions/#customdata) option of [`ExportOptions`](https://ej2.syncfusion.com/react/documentation/api/schedule/exportOptions/) interface. > By default, the event data are taken from Scheduler dataSource. @@ -90,7 +90,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` 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`](https://ej2.syncfusion.com/react/documentation/api/schedule/exportOptions/#fieldsinfo) option through the [`ExportFieldInfo`](https://ej2.syncfusion.com/react/documentation/api/schedule/exportFieldInfo/) interface and pass it as an argument to the [`exportToExcel`](https://ej2.syncfusion.com/react/documentation/api/schedule#exporttoexcel) method as shown in the following example. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -108,7 +108,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` 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`](https://ej2.syncfusion.com/react/documentation/api/schedule/exportOptions/) interface and passing it as an argument to the [`exportToExcel`](https://ej2.syncfusion.com/react/documentation/api/schedule#exporttoexcel) method. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -126,7 +126,7 @@ By default, the Scheduler allows you to download the exported Excel file with a ### Excel file formats -By default, the Scheduler exports event data to an excel file in the `.xlsx` format. You can also export the Scheduler data in either of the file type such as `.xlsx` or `csv` formats, by defining the `exportType` option as either `csv` or `xlsx` through the `ExportOptions` interface. By default, the `exportType` is set to `xlsx`. +By default, the Scheduler exports event data to an excel file in the `.xlsx` format. You can also export the Scheduler data in either of the file type such as `.xlsx` or `csv` formats, by defining the `exportType` option as either `csv` or `xlsx` through the [`ExportOptions`](https://ej2.syncfusion.com/react/documentation/api/schedule/exportOptions/) interface. By default, the `exportType` is set to `xlsx`. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -164,7 +164,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/react/documentation/api/schedule#exporttoicalendar) public method. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -208,11 +208,11 @@ The following example downloads the iCal file with a name `ScheduleEvents.ics`. ## Import events from other calendars -The events from external calendars (ICS files) can be imported into Scheduler by using the `importICalendar` method. This method accepts the `blob object` of an .ics file to be imported, as a mandatory argument. +The events from external calendars (ICS files) can be imported into Scheduler by using the [`importICalendar`](https://ej2.syncfusion.com/react/documentation/api/schedule#importicalendar) method. This method accepts the `blob object` of an .ics file to be imported, as a mandatory argument. > To import an ICS file containing events into Scheduler, you need to first import the `ICalendarImport` module from `@syncfusion/ej2-schedule` package and then inject it using the `Schedule.Inject(ICalendarImport)` method. -The following example shows how to import an ICS file into Scheduler, using the `importICalendar` method. +The following example shows how to import an ICS file into Scheduler, using the [`importICalendar`](https://ej2.syncfusion.com/react/documentation/api/schedule#importicalendar) method. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -242,7 +242,7 @@ The Scheduler allows you to print the Scheduler element by using the `print` cli ### Using print method without options -You can print the Schedule element with the current view by using the `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`](https://ej2.syncfusion.com/react/documentation/api/schedule#print) method without passing the options. The following example shows how to print the Scheduler using the `print` method without passing options. {% tabs %} {% highlight js tabtitle="index.jsx" %} diff --git a/ej2-react/schedule/frequently-asked-questions.md b/ej2-react/schedule/frequently-asked-questions.md index 32017a11f..a05d0daf6 100644 --- a/ej2-react/schedule/frequently-asked-questions.md +++ b/ej2-react/schedule/frequently-asked-questions.md @@ -113,7 +113,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/react/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/react/documentation/api/schedule#cellclick) and [`eventClick`](https://ej2.syncfusion.com/react/documentation/api/schedule#eventclick) events and below code snippet. ```ts constructor() { diff --git a/ej2-react/schedule/getting-started.md b/ej2-react/schedule/getting-started.md index 067b678d1..7f6c6746c 100644 --- a/ej2-react/schedule/getting-started.md +++ b/ej2-react/schedule/getting-started.md @@ -8,7 +8,7 @@ documentation: ug domainurl: ##DomainURL## --- -# Getting Started +# Getting Started with React Schedule Component This section briefly explains how to create [**React Scheduler**](https://www.syncfusion.com/react-components/react-scheduler) component and configure its available functionalities in React environment, using Essential JS 2 [quickstart](https://github.com/syncfusion/ej2-quickstart.git) seed repository. @@ -100,7 +100,6 @@ Add scheduler component's styles as given below in `src/App.css`. @import "../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css"; @import "../node_modules/@syncfusion/ej2-react-schedule/styles/material.css"; ``` - >To refer `App.css` in the application then import it in the `src/App.tsx` file. In case, if you want to make use of the combined CSS files of entire components, then you can avail it from the root folder of Essential JS 2 package and reference it with the code shown below. diff --git a/ej2-react/schedule/header-rows.md b/ej2-react/schedule/header-rows.md index 98150ce0a..d51f82ae0 100644 --- a/ej2-react/schedule/header-rows.md +++ b/ej2-react/schedule/header-rows.md @@ -10,7 +10,7 @@ domainurl: ##DomainURL## # Header rows in React Schedule component -The Timeline views can have additional header rows other than its default date and time header rows. It is possible to show individual header rows for displaying year, month and week separately using the `HeaderRowDirective`. This is applicable only on the timeline views. The possible rows which can be added using `HeaderRowDirective` are as follows. +The Timeline views can have additional header rows other than its default date and time header rows. It is possible to show individual header rows for displaying year, month and week separately using the [`HeaderRowDirective`](https://ej2.syncfusion.com/react/documentation/api/schedule#headerrows). This is applicable only on the timeline views. The possible rows which can be added using [`HeaderRowDirective`](https://ej2.syncfusion.com/react/documentation/api/schedule#headerrows) are as follows. * `Year` * `Month` @@ -44,7 +44,7 @@ The following example shows the Scheduler displaying all the available header ro ## Display year and month rows in timeline views -To display the timeline Scheduler simply with year and month names alone, define the option `Year` and `Month` within the `HeaderRowDirective`. +To display the timeline Scheduler simply with year and month names alone, define the option `Year` and `Month` within the [`HeaderRowDirective`](https://ej2.syncfusion.com/react/documentation/api/schedule#headerrows). {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -62,7 +62,7 @@ To display the timeline Scheduler simply with year and month names alone, define ## Display week numbers in timeline views -The week number can be displayed in a separate header row of the timeline Scheduler by setting `Week` option within `HeaderRowDirective`. +The week number can be displayed in a separate header row of the timeline Scheduler by setting `Week` option within [`HeaderRowDirective`](https://ej2.syncfusion.com/react/documentation/api/schedule#headerrows). {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -80,7 +80,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 `ViewDirective` of Scheduler. +It is possible to display a complete year in a timeline view by setting [`interval`](https://ej2.syncfusion.com/react/documentation/api/schedule/timeScale/#interval) value as 12 and defining **TimelineMonth** view option within the `ViewDirective` of Scheduler. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -98,7 +98,7 @@ It is possible to display a complete year in a timeline view by setting `interva ## Customizing the header rows using template -You can customize the text of the header rows and display any images or formatted text on each individual header rows using the built-in `template` option available within the `HeaderRowDirective`. +You can customize the text of the header rows and display any images or formatted text on each individual header rows using the built-in [`template`](https://ej2.syncfusion.com/react/documentation/api/schedule/headerRows/#template) option available within the [`HeaderRowDirective`](https://ej2.syncfusion.com/react/documentation/api/schedule#headerrows). {% tabs %} {% highlight js tabtitle="index.jsx" %} diff --git a/ej2-react/schedule/how-to/add-edit-and-remove-events.md b/ej2-react/schedule/how-to/add-edit-and-remove-events.md index c83e84780..a6439ac62 100644 --- a/ej2-react/schedule/how-to/add-edit-and-remove-events.md +++ b/ej2-react/schedule/how-to/add-edit-and-remove-events.md @@ -10,7 +10,7 @@ domainurl: ##DomainURL## # Add edit and remove events in React 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/react/documentation/api/schedule#addevent), [`saveEvent`](https://ej2.syncfusion.com/react/documentation/api/schedule#saveevent) and [`deleteEvent`](https://ej2.syncfusion.com/react/documentation/api/schedule#deleteevent) methods as shown below. ## Normal event diff --git a/ej2-react/schedule/how-to/enable-scroll-option-on-all-day-section.md b/ej2-react/schedule/how-to/enable-scroll-option-on-all-day-section.md index c4130dc89..d126b35db 100644 --- a/ej2-react/schedule/how-to/enable-scroll-option-on-all-day-section.md +++ b/ej2-react/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 React Schedule component | Syncfusion +title: Enable Scroll in All-Day Section of React Schedule | Syncfusion description: Learn here all about Enable scroll option on all day section in Syncfusion React Schedule component of Syncfusion Essential JS 2 and more. control: Enable scroll option on all day section platform: ej2-react @@ -10,7 +10,7 @@ domainurl: ##DomainURL## # Enable scroll option on all day section in React 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/react/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-react/schedule/how-to/half-yearly-view.md b/ej2-react/schedule/how-to/half-yearly-view.md index 16d39cf1b..047c22992 100644 --- a/ej2-react/schedule/how-to/half-yearly-view.md +++ b/ej2-react/schedule/how-to/half-yearly-view.md @@ -16,7 +16,7 @@ The year view of our scheduler displays all the 365 days and their related appoi * [`monthsCount`](https://ej2.syncfusion.com/react/documentation/api/schedule/#monthscount) * [`monthHeaderTemplate`](https://ej2.syncfusion.com/react/documentation/api/schedule/#monthheadertemplate) -In the following code example, you can see how to render only the last six months of a year in the scheduler. To start with the month of June, `firstMonthYear` is set to 6 and `monthsCount` is set to 6 to render only 6 months. +In the following code example, you can see how to render only the last six months of a year in the scheduler. To start with the month of June, [`firstMonthOfYear`](https://ej2.syncfusion.com/react/documentation/api/schedule/#firstmonthofyear) is set to 6 and [`monthsCount`](https://ej2.syncfusion.com/react/documentation/api/schedule/#monthscount) is set to 6 to render only 6 months. {% tabs %} {% highlight js tabtitle="index.jsx" %} diff --git a/ej2-react/schedule/how-to/open-event-editor-manually.md b/ej2-react/schedule/how-to/open-event-editor-manually.md index e6df0a91c..e2c409181 100644 --- a/ej2-react/schedule/how-to/open-event-editor-manually.md +++ b/ej2-react/schedule/how-to/open-event-editor-manually.md @@ -30,7 +30,7 @@ Schedule allows user to manually open the event editor on specific time or on ce ## 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` method in `eventClick` and `cellClick` events of scheduler and setting false to `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`](https://ej2.syncfusion.com/react/documentation/api/schedule#openeditor) method in [`eventClick`](https://ej2.syncfusion.com/react/documentation/api/schedule#eventclick) and [`cellClick`](https://ej2.syncfusion.com/react/documentation/api/schedule#cellclick) events of scheduler and setting false to [`showQuickInfo`](https://ej2.syncfusion.com/react/documentation/api/schedule#showquickinfo). The following example shows how to open editor window on single click of cells and appointments. {% tabs %} {% highlight js tabtitle="index.jsx" %} diff --git a/ej2-react/schedule/how-to/prevent-date-navigation.md b/ej2-react/schedule/how-to/prevent-date-navigation.md index 2a81b3114..36b45054d 100644 --- a/ej2-react/schedule/how-to/prevent-date-navigation.md +++ b/ej2-react/schedule/how-to/prevent-date-navigation.md @@ -10,7 +10,7 @@ domainurl: ##DomainURL## # Prevent date navigation in React 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 below demo. +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/react/documentation/api/schedule#rendercell) event as shown in the below demo. {% tabs %} {% highlight js tabtitle="index.jsx" %} diff --git a/ej2-react/schedule/how-to/set-default-value-for-event-fields.md b/ej2-react/schedule/how-to/set-default-value-for-event-fields.md index 25ca08a4c..41976dddd 100644 --- a/ej2-react/schedule/how-to/set-default-value-for-event-fields.md +++ b/ej2-react/schedule/how-to/set-default-value-for-event-fields.md @@ -1,6 +1,6 @@ --- layout: post -title: Set default value for event fields in React Schedule component | Syncfusion +title: Set Default Values for React Schedule Event Fields | Syncfusion description: Learn here all about Set default value for event fields in Syncfusion React Schedule component of Syncfusion Essential JS 2 and more. control: Set default value for event fields platform: ej2-react @@ -10,7 +10,7 @@ domainurl: ##DomainURL## # Set default value for event fields in React Schedule component -Event window default fields name like Title, Location, etc.. can be customized and default value can be set to Subject field using `default` property which will be added if an appointment is created with empty subject. +Event window default fields name like Title, Location, etc.. can be customized and default value can be set to Subject field using [`default`](https://ej2.syncfusion.com/react/documentation/api/schedule/fieldOptions/#default) property which will be added if an appointment is created with empty subject. {% tabs %} {% highlight js tabtitle="index.jsx" %} diff --git a/ej2-react/schedule/how-to/set-different-event-time-duration.md b/ej2-react/schedule/how-to/set-different-event-time-duration.md index 837ebc250..d7888def4 100644 --- a/ej2-react/schedule/how-to/set-different-event-time-duration.md +++ b/ej2-react/schedule/how-to/set-different-event-time-duration.md @@ -1,6 +1,6 @@ --- layout: post -title: Set different event time duration in React Schedule component | Syncfusion +title: Set different event duration in React Schedule | Syncfusion description: Learn here all about Set different event time duration in Syncfusion React Schedule component of Syncfusion Essential JS 2 and more. control: Set different event time duration platform: ej2-react @@ -10,7 +10,7 @@ domainurl: ##DomainURL## # Set different event time duration in React Schedule component -In event window, start/end time duration will be processed based on the `interval` value within the `timeScale` property. By default, `interval` value is 30, therefore in event window start/end time duration will be in 30 mins duration. You can set custom interval range to the start/end time in event window using `popupOpen` event as shown below. +In event window, start/end time duration will be processed based on the [`interval`](https://ej2.syncfusion.com/react/documentation/api/schedule/timeScaleModel/#interval) value within the [`timeScale`](https://ej2.syncfusion.com/react/documentation/api/schedule#timescale) property. By default, [`interval`](https://ej2.syncfusion.com/react/documentation/api/schedule/timeScaleModel/#interval) value is 30, therefore in event window start/end time duration will be in 30 mins duration. You can set custom interval range to the start/end time in event window using `popupOpen` event as shown below. {% tabs %} {% highlight js tabtitle="index.jsx" %} diff --git a/ej2-react/schedule/how-to/set-different-work-hours.md b/ej2-react/schedule/how-to/set-different-work-hours.md index 3e196c1c9..fd39cd4bb 100644 --- a/ej2-react/schedule/how-to/set-different-work-hours.md +++ b/ej2-react/schedule/how-to/set-different-work-hours.md @@ -10,7 +10,8 @@ domainurl: ##DomainURL## # Set different work hours in React Schedule component -By default, the work hours of the Scheduler is highlighted based on the start and end values provided within the `workHours` property which remains same for all days. To highlight different work hours range for different days,`setWorkHours` method can be used as follows. +By default, the work hours of the Scheduler is highlighted based on the start and end values provided within the [`workHours`](https://ej2.syncfusion.com/react/documentation/api/schedule#workhours) property which remains same for all days. To highlight different work hours range for different days,[`setWorkHours`](https://ej2.syncfusion.com/documentation/api/schedule#setworkhours) method can be used as follows. +You can pass date object/ multiple date objects collection as first argument and start and end time need to be added as work hours should be passed as second and third arguments respectively. In the following code example, on button click 11:00 AM to 08:00 PM of 15th and 17th February has been added in work hours. {% tabs %} {% highlight js tabtitle="index.jsx" %} diff --git a/ej2-react/schedule/images/add.png b/ej2-react/schedule/images/add.png index 1ba893cff..e9143b005 100644 Binary files a/ej2-react/schedule/images/add.png and b/ej2-react/schedule/images/add.png differ diff --git a/ej2-react/schedule/images/edit.png b/ej2-react/schedule/images/edit.png index 53ea5b431..323123a86 100644 Binary files a/ej2-react/schedule/images/edit.png and b/ej2-react/schedule/images/edit.png differ diff --git a/ej2-react/schedule/localization.md b/ej2-react/schedule/localization.md index 8eb71fb83..e63821935 100644 --- a/ej2-react/schedule/localization.md +++ b/ej2-react/schedule/localization.md @@ -237,7 +237,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/react/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 js tabtitle="index.jsx" %} @@ -255,7 +255,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/react/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/react/documentation/api/schedule#timeformat) property. To know more about the time format standards, refer to the [Date and Time Format](https://ej2.syncfusion.com/react/documentation/common/internationalization/#custom-formats) section. The following example demonstrates the Scheduler component in 24 hours format. @@ -273,7 +273,7 @@ The following example demonstrates the Scheduler component in 24 hours format. {% previewsample "page.domainurl/code-snippet/schedule/local-data-cs20" %} ->Note: `timeFormat` property only accepts the valid time format's. +>Note: [`timeFormat`](https://ej2.syncfusion.com/react/documentation/api/schedule#timeformat) property only accepts the valid time format's. ## First day of the week @@ -297,7 +297,7 @@ By default, the first day of the week can be set on Scheduler by making use of t ## Displaying Scheduler in RTL mode -The Scheduler layout and its behavior can be changed as per the common RTL (Right to Left) conventions by setting `enableRtl` to `true`. By doing so, the Scheduler will display its usual layout from right to left. It's default value is `false`. +The Scheduler layout and its behavior can be changed as per the common RTL (Right to Left) conventions by setting [`enableRtl`](https://ej2.syncfusion.com/react/documentation/api/schedule#enablertl) to `true`. By doing so, the Scheduler will display its usual layout from right to left. It's default value is `false`. {% tabs %} {% highlight js tabtitle="index.jsx" %} diff --git a/ej2-react/schedule/module-injection.md b/ej2-react/schedule/module-injection.md index 18d498038..d6cb4f804 100644 --- a/ej2-react/schedule/module-injection.md +++ b/ej2-react/schedule/module-injection.md @@ -37,6 +37,6 @@ The required modules should be injected into the Scheduler using the `Inject` me ``` -**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/react/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 [React Scheduler](https://www.syncfusion.com/react-components/react-scheduler) feature tour page for its groundbreaking feature representations. You can also explore our [React Scheduler example](https://ej2.syncfusion.com/react/demos/#/material/schedule/overview) to knows how to present and manipulate data. diff --git a/ej2-react/schedule/recurrence-editor.md b/ej2-react/schedule/recurrence-editor.md index cdc40bc7c..1d79948dc 100644 --- a/ej2-react/schedule/recurrence-editor.md +++ b/ej2-react/schedule/recurrence-editor.md @@ -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/react/documentation/api/recurrence-editor#frequencies) option. {% tabs %} {% highlight js tabtitle="index.jsx" %} diff --git a/ej2-react/schedule/resources.md b/ej2-react/schedule/resources.md index 61c296064..e84be04ce 100644 --- a/ej2-react/schedule/resources.md +++ b/ej2-react/schedule/resources.md @@ -22,25 +22,25 @@ Learn how to add appointments of multiple resources to the React Scheduler from ## Resource fields -The default options available within the `resources` collection are as follows, +The default options available within the [`resources`](https://ej2.syncfusion.com/react/documentation/api/schedule/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/data/api-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/data/api-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` | String | A value that binds to the resource [`field`](https://ej2.syncfusion.com/react/documentation/api/schedule/resources/#field) of event object. | +| `title` | String | It holds the [`title`](https://ej2.syncfusion.com/react/documentation/api/schedule/resources/#title) of the resource field to be displayed on the event editor window. | +| `name` | String | A unique resource [`name`](https://ej2.syncfusion.com/react/documentation/api/schedule/resources/#name) used for differentiating various resource objects while grouping. | +| `allowMultiple` | Boolean | When set to `true`, the [`allowMultiple`](https://ej2.syncfusion.com/react/documentation/api/schedule/resources/#allowmultiple) property allows the selection of multiple resource names, thus creating multiple instances of the same appointment for the selected resources. | +| `dataSource` | Object | Assigns the resource [`dataSource`](https://ej2.syncfusion.com/react/documentation/api/schedule/resources/#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/data/api-datamanager) in case of processing remote data and can be assigned to the `dataSource` property. With the remote data assigned to [`dataSource`](https://ej2.syncfusion.com/react/documentation/api/schedule/resources/#datasource), check the available [adaptors](https://ej2.syncfusion.com/react/documentation/data/adaptors) to customize the data processing. | +| `query` | Query | Defines the external [`query`](https://ej2.syncfusion.com/react/documentation/api/schedule/resources/#query) that will be executed along with the data processing. | +| `idField` | String | Binds the resource ID field name from the resources [`dataSource`](https://ej2.syncfusion.com/react/documentation/api/schedule/resources/#datasource). | +| `expandedField` | String | Binds the [`expandedField`](https://ej2.syncfusion.com/react/documentation/api/schedule/resources/#expandedfield) name from the resources [`dataSource`](https://ej2.syncfusion.com/react/documentation/api/schedule/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 [`textField`](https://ej2.syncfusion.com/react/documentation/api/schedule/resources/#textfield) name from the resources [`dataSource`](https://ej2.syncfusion.com/react/documentation/api/schedule/resources/#datasource). It usually holds the resource names. | +| `groupIDField` | String | Binds the [`groupIDField`](https://ej2.syncfusion.com/react/documentation/api/schedule/resources/#groupidfield) name from the resource [`dataSource`](https://ej2.syncfusion.com/react/documentation/api/schedule/resources/#datasource). It usually holds the value of resource IDs of parent level resources. | +| `colorField` | String | Binds the [`colorField`](https://ej2.syncfusion.com/react/documentation/api/schedule/resources/#colorfield) name from the resource [`dataSource`](https://ej2.syncfusion.com/react/documentation/api/schedule/resources/#datasource). The color value mapped in this field will be applied to the events of resources. | +| `startHourField` | String | Binds the [`startHourField`](https://ej2.syncfusion.com/react/documentation/api/schedule/resources/#starthourfield) name from the resource [`dataSource`](https://ej2.syncfusion.com/react/documentation/api/schedule/resources/#datasource). It allows to provide different work start hour for the resources. | +| `endHourField` | String | Binds the [`endHourField`](https://ej2.syncfusion.com/react/documentation/api/schedule/resources/#endhourfield) name from the resource [`dataSource`](https://ej2.syncfusion.com/react/documentation/api/schedule/resources/#datasource). It allows to provide different work end hour for the resources. | +| `workDaysField` | String | Binds the [`workDaysField`](https://ej2.syncfusion.com/react/documentation/api/schedule/resources/#workdaysfield) name from the resources [`dataSource`](https://ej2.syncfusion.com/react/documentation/api/schedule/resources/#datasource). It allows to provide different working days collection for the resources. | +| `cssClassField` | String | Binds the custom [`cssClassField`](https://ej2.syncfusion.com/react/documentation/api/schedule/resources/#cssclassfield) name from the resources [`dataSource`](https://ej2.syncfusion.com/react/documentation/api/schedule/resources/#datasource). It maps the CSS class written for the specific resources and applies it to the events of those resources. | ## Resource data binding @@ -48,7 +48,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`](https://ej2.syncfusion.com/react/documentation/api/schedule/resources/#datasource) of [`resources`](https://ej2.syncfusion.com/react/documentation/api/schedule/resources/) collection. @@ -85,7 +85,7 @@ root.render(); ### Using remote service URL -The following code example depicts how to bind the remote data for resources `dataSource`. +The following code example depicts how to bind the remote data for resources [`dataSource`](https://ej2.syncfusion.com/react/documentation/api/schedule/resources/#datasource). @@ -124,7 +124,7 @@ It is possible to display the Scheduler in default mode without visually showcas The appointments belonging to the different resources will be displayed altogether on the default Scheduler, which will be differentiated based on the resource color assigned in the **resources** (depicting to which resource that particular appointment belongs) collection. -**Example:** To display default Scheduler with multiple resource options in the event editor, ignore the group option and simply define the `resources` property with all its internal options. +**Example:** To display default Scheduler with multiple resource options in the event editor, ignore the group option and simply define the [`resources`](https://ej2.syncfusion.com/react/documentation/api/schedule/resources/) property with all its internal options. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -140,7 +140,7 @@ The appointments belonging to the different resources will be displayed altogeth {% previewsample "page.domainurl/code-snippet/schedule/resource-cs2" %} -> 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/react/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 @@ -190,7 +190,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/react/documentation/api/schedule/resources/#colorfield) defined on the resources collection. **Example:** To display the Scheduler with single level resource grouping, @@ -208,11 +208,11 @@ This kind of grouping allows the Scheduler to display all the resources at a sin {% previewsample "page.domainurl/code-snippet/schedule/resource-cs5" %} -> 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`](https://ej2.syncfusion.com/react/documentation/api/schedule/resources/#name) field defined in the **resources** collection namely `Owners` will be mapped within the [`group`](https://ej2.syncfusion.com/react/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/react/documentation/api/schedule/resources/#groupidfield) mapping to the first level resource's ID so as to establish the parent-child relationship between them. **Example:** To display the Scheduler with multiple level resource grouping options, @@ -232,7 +232,7 @@ It is possible to group the resources of Scheduler in multiple levels, by mappin ### 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` that maps with the `Id` field of parent level resources (as [`byGroupID`](https://ej2.syncfusion.com/react/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/react/documentation/api/schedule/group/#bygroupid) option within the [`group`](https://ej2.syncfusion.com/react/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 js tabtitle="index.jsx" %} @@ -250,7 +250,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/react/documentation/api/schedule/group/#bydate) option to `true` within the [`group`](https://ej2.syncfusion.com/react/documentation/api/schedule/group/) property. **Example:** To display the Scheduler with resources grouped by date, @@ -272,7 +272,7 @@ It groups the number of resources under each date and is applicable only on 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/react/documentation/api/schedule/group/#allowgroupedit) option to `true` within the [`group`](https://ej2.syncfusion.com/react/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 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. @@ -297,7 +297,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 the designation [`resource field`](https://ej2.syncfusion.com/react/documentation/api/schedule/resources/), refer the below code example. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -337,7 +337,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/react/documentation/api/schedule/resources/#expandedfield) option as `false` whereas its default value is `true`. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -355,7 +355,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`[`headerTooltipTemplate`](https://ej2.syncfusion.com/react/documentation/api/schedule/group/#headertooltiptemplate) option within the [`group`](https://ej2.syncfusion.com/react/documentation/api/schedule/group/) property. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -373,7 +373,7 @@ It is possible to display tooltips over the resource headers showing the resourc ## Choosing between 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/react/documentation/api/schedule/eventSettings/#resourcecolorfield) option within the [`eventSettings`](https://ej2.syncfusion.com/react/documentation/api/schedule/eventSettings/) property. In the following example, the colors mentioned in the second level will get applied over the events. @@ -391,13 +391,13 @@ In the following example, the colors mentioned in the second level will get appl {% previewsample "page.domainurl/code-snippet/schedule/resource-cs11" %} -> The value of the `resourceColorField` field should be mapped with the `name` value given within the `resources` property. +> The value of the [`resourceColorField`](https://ej2.syncfusion.com/react/documentation/api/schedule/eventSettings/#resourcecolorfield) field should be mapped with the [`name`](https://ej2.syncfusion.com/react/documentation/api/schedule/resources/#name) value given within the [`resources`](https://ej2.syncfusion.com/react/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/react/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/react/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 js tabtitle="index.jsx" %} @@ -415,11 +415,15 @@ To remove the resources dynamically, `removeResource` method is used which accep ## Setting different working days and hours for resources -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. +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`](https://ej2.syncfusion.com/react/documentation/api/schedule/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 js tabtitle="index.jsx" %} @@ -437,10 +441,12 @@ 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/react/documentation/api/schedule/resources/#starthourfield) and [`endHourField`](https://ej2.syncfusion.com/react/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. +* [`startHourField`](https://ej2.syncfusion.com/react/documentation/api/schedule/resources/#starthourfield) - Denotes the start time of the working/business hour in a day. +* [`endHourField`](https://ej2.syncfusion.com/react/documentation/api/schedule/resources/#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 js tabtitle="index.jsx" %} @@ -484,7 +490,7 @@ To use the [`hideNonWorkingDays`](https://ej2.syncfusion.com/react/documentation ## 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/react/documentation/api/schedule/group/#enablecompactview) option within the [`group`](https://ej2.syncfusion.com/react/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 tree view at the left listing out all other available resources - clicking on which will display that particular resource and its related appointments. @@ -496,7 +502,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/react/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-react/schedule/row-auto-height.md b/ej2-react/schedule/row-auto-height.md index e27bf1698..a63feedb7 100644 --- a/ej2-react/schedule/row-auto-height.md +++ b/ej2-react/schedule/row-auto-height.md @@ -12,7 +12,7 @@ domainurl: ##DomainURL## By default, the height of the Scheduler rows in Timeline views are static and therefore, when the same time range holds multiple overlapping appointments, a `+n more` text indicator will be displayed. With this feature enabled, you can now view all the overlapping appointments present in those specific time range by auto-adjusting the row height based on the presence of the appointments count, instead of displaying the `+n more` text indicators. -To enable auto row height adjustments on Scheduler Timeline views and Month view, set `true` to the `rowAutoHeight` property whose default value is `false`. +To enable auto row height adjustments on Scheduler Timeline views and Month view, set `true` to the [`rowAutoHeight`](https://ej2.syncfusion.com/react/documentation/api/schedule#rowautoheight) property whose default value is `false`. > This auto row height adjustment is applicable only on all the Timeline views as well as on the calendar Month view. @@ -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/react/documentation/api/schedule#rowautoheight) feature is enabled. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -38,7 +38,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/react/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 js tabtitle="index.jsx" %} @@ -74,7 +74,7 @@ The following example shows how the auto row adjustment feature works on timelin ## Appointments occupying entire cell -By default, with the feature `rowAutoHeight`, there will be a space in the bottom of the cell when appointment is rendered. To avoid this space, we can set true to the property `ignoreWhitespace` with in `eventSettings` whereas its default property value is false. In the following code example, the whitespace below the appointments has been ignored. +By default, with the feature [`rowAutoHeight`](https://ej2.syncfusion.com/react/documentation/api/schedule#rowautoheight), there will be a space in the bottom of the cell when appointment is rendered. To avoid this space, we can set true to the property [`ignoreWhitespace`](https://ej2.syncfusion.com/react/documentation/api/schedule/eventSettings/#ignorewhitespace) with in [`eventSettings`](https://ej2.syncfusion.com/react/documentation/api/schedule/eventSettings/) whereas its default property value is false. In the following code example, the whitespace below the appointments has been ignored. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -90,6 +90,6 @@ By default, with the feature `rowAutoHeight`, there will be a space in the botto {% 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/react/documentation/api/schedule/eventSettings/#ignorewhitespace) will be applicable only when [`rowAutoHeight`](https://ej2.syncfusion.com/react/documentation/api/schedule#rowautoheight) feature is enabled in the Scheduler > You can refer to our [React Scheduler](https://www.syncfusion.com/react-components/react-scheduler) feature tour page for its groundbreaking feature representations. You can also explore our [React Scheduler example](https://ej2.syncfusion.com/react/demos/#/material/schedule/overview) to knows how to present and manipulate data. diff --git a/ej2-react/schedule/state-persistence.md b/ej2-react/schedule/state-persistence.md index 0226e9ba2..cf4e65427 100644 --- a/ej2-react/schedule/state-persistence.md +++ b/ej2-react/schedule/state-persistence.md @@ -10,7 +10,7 @@ domainurl: ##DomainURL## # State persistence in React Schedule component -State persistence allowed Scheduler to retain the [`currentView`](https://ej2.syncfusion.com/react/documentation/api/schedule/#currentview), [`selectedDate`](https://ej2.syncfusion.com/react/documentation/api/schedule/#selecteddate) and Scroll position values in the [`localStorage`](https://www.w3schools.com/html/html5_webstorage.asp#) for state maintenance even if the browser is refreshed or if you move to the next page within the browser. This action is handled through the [`enablePersistence`](https://ej2.syncfusion.com/react/documentation/api/schedule/#enablepersistence) property which is set to false by default. When it is set to true, `currentView`, `selectedDate` and Scroll position values of the scheduler component will be retained even after refreshing the page. +State persistence allowed Scheduler to retain the [`currentView`](https://ej2.syncfusion.com/react/documentation/api/schedule/#currentview), [`selectedDate`](https://ej2.syncfusion.com/react/documentation/api/schedule/#selecteddate) and Scroll position values in the [`localStorage`](https://www.w3schools.com/html/html5_webstorage.asp#) for state maintenance even if the browser is refreshed or if you move to the next page within the browser. This action is handled through the [`enablePersistence`](https://ej2.syncfusion.com/react/documentation/api/schedule/#enablepersistence) property which is set to false by default. When it is set to true, [`currentView`](https://ej2.syncfusion.com/react/documentation/api/schedule/#currentview), [`selectedDate`](https://ej2.syncfusion.com/react/documentation/api/schedule/#selecteddate) and Scroll position values of the scheduler component will be retained even after refreshing the page. > **Note**: Scheduler `id` is essential to set state persistence. diff --git a/ej2-react/schedule/timescale.md b/ej2-react/schedule/timescale.md index 26f0b0852..c2ce142fa 100644 --- a/ej2-react/schedule/timescale.md +++ b/ej2-react/schedule/timescale.md @@ -10,17 +10,17 @@ domainurl: ##DomainURL## # Timescale in React Schedule component -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` 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, +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`](https://ej2.syncfusion.com/react/documentation/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 gridlines 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/react/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 gridlines displayed. Its default value is `true`. +* [`interval`](https://ej2.syncfusion.com/react/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/react/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/react/documentation/api/schedule/timeScale/#interval) and [`slotCount`](https://ej2.syncfusion.com/react/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 js tabtitle="index.jsx" %} @@ -38,10 +38,10 @@ The `interval` and `slotCount` properties can be used together on the Scheduler ## Customizing time cells using template -The `timeScale` property also provides template option to allow customization of time slots which are as follows, +The [`timeScale`](https://ej2.syncfusion.com/react/documentation/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/react/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/react/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 js tabtitle="index.jsx" %} @@ -59,7 +59,7 @@ The `timeScale` property also provides template option to allow customization of ## Hide the timescale -The grid lines which indicates the exact time duration can be enabled or disabled on the Scheduler, by setting `true` or `false` to the `enable` option within the `timeScale` property. It's default value is `true`. +The grid lines which indicates the exact time duration can be enabled or disabled on the Scheduler, by setting `true` or `false` to the [`enable`](https://ej2.syncfusion.com/react/documentation/api/schedule/timeScale/#enable) option within the [`timeScale`](https://ej2.syncfusion.com/react/documentation/api/schedule#timescale) property. It's default value is `true`. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -77,7 +77,7 @@ The grid lines which indicates the exact time duration can be enabled or disable ## Highlighting current date and time -By default, Scheduler indicates current date with a highlighted date header on all views, as well as marks accurately the system's current time on specific views such as Day, Week, Work Week, Timeline Day, Timeline Week and Timeline Work Week views. To stop highlighting the current time indicator on Scheduler views, set `false` to the `showTimeIndicator` property which defaults to `true`. +By default, Scheduler indicates current date with a highlighted date header on all views, as well as marks accurately the system's current time on specific views such as Day, Week, Work Week, Timeline Day, Timeline Week and Timeline Work Week views. To stop highlighting the current time indicator on Scheduler views, set `false` to the [`showTimeIndicator`](https://ej2.syncfusion.com/react/documentation/api/schedule#showtimeindicator)` property which defaults to `true`. {% tabs %} {% highlight js tabtitle="index.jsx" %} diff --git a/ej2-react/schedule/timezone.md b/ej2-react/schedule/timezone.md index 0fafa7097..691ed5daf 100644 --- a/ej2-react/schedule/timezone.md +++ b/ej2-react/schedule/timezone.md @@ -10,7 +10,7 @@ domainurl: ##DomainURL## # Timezone in React 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` 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`](https://ej2.syncfusion.com/react/documentation/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. >Note: **timezone** property only applicable for the appointment processing and current time indication. @@ -40,7 +40,7 @@ The following code example displays an appointment from 9.00 AM to 10.00 AM when ## Scheduler set to specific timezone -When a time zone is set to Scheduler through `timezone` property, the appointments will be displayed exactly based on the Scheduler timezone regardless of its client timezone. In the following code example, appointments will be displayed based on Eastern Time (UTC -05:00). +When a time zone is set to Scheduler through [`timezone`](https://ej2.syncfusion.com/react/documentation/api/schedule/#timezone) property, the appointments will be displayed exactly based on the Scheduler timezone regardless of its client timezone. In the following code example, appointments will be displayed based on Eastern Time (UTC -05:00). {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -58,7 +58,7 @@ When a time zone is set to Scheduler through `timezone` property, the appointmen ## Display events on same time everywhere with no time difference -Setting `timezone` to UTC for Scheduler will display the appointments on same time as in the database for all the users in different time zone. +Setting [`timezone`](https://ej2.syncfusion.com/react/documentation/api/schedule/#timezone) to UTC for Scheduler will display the appointments on same time as in the database for all the users in different time zone. {% tabs %} {% highlight js tabtitle="index.jsx" %} diff --git a/ej2-react/schedule/views.md b/ej2-react/schedule/views.md index 34adc1098..2358ce3b8 100644 --- a/ej2-react/schedule/views.md +++ b/ej2-react/schedule/views.md @@ -35,7 +35,7 @@ Learn how to customize each individual view of React Scheduler with different se ## 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/react/documentation/api/schedule#currentview) property with the desired view name. The applicable view names that the Scheduler accepts are as follows, * Day * Week @@ -92,29 +92,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 | 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 | 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 | 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/react/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/react/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/react/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/react/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/react/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/react/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/react/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/react/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/react/documentation/api/schedule/group/) | GroupModel | Allows to set different resource grouping options on all available Scheduler view modes. | All views. | +| [`cellTemplate`](https://helpej2.syncfusion.com/react/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/react/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/react/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/react/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/react/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/react/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/react/documentation/api/schedule/views/#timescale) | 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`[`showWeekNumber`](https://helpej2.syncfusion.com/react/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/react/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/react/documentation/api/schedule/views/#headerrows) | 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 `ViewDirective` with `interval` option. You can also define any of the above defined properties within the `ViewDirective` 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 `ViewDirective` with [`interval`](https://helpej2.syncfusion.com/react/documentation/api/schedule/views/#interval) option. You can also define any of the above defined properties within the `ViewDirective` definition as depicted in the following code example. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -130,11 +130,11 @@ Usually a day view displays a single day with all its related appointments. It i {% previewsample "page.domainurl/code-snippet/schedule/views-cs9" %} -> 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/react/documentation/api/schedule/views/#allowvirtualscrolling) and [`headerRows`](https://helpej2.syncfusion.com/react/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/react/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 js tabtitle="index.jsx" %} @@ -152,7 +152,7 @@ The Week view displays a count of 7 days (from Sunday to Saturday) with all its ### 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/react/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 customize the resource header cells only on the `Work Week` view of the Scheduler. @@ -198,7 +198,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/react/documentation/api/schedule/views/#orientation) property. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -218,7 +218,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/react/documentation/api/schedule#agendadayscount).. It allows virtual scrolling of dates by enabling the [`allowVirtualScrolling`](https://helpej2.syncfusion.com/react/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/vue/documentation/api/schedule#hideemptyagendadays) property. The following code example depicts how to customize the display of events within Agenda view alone. @@ -372,7 +372,7 @@ The following code example depicts how to group the multiple resources on Timeli #### 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/react/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 js tabtitle="index.jsx" %} @@ -390,9 +390,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 `ViewDirective` 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/react/documentation/api/schedule/views/#interval) option as 3 for the `Day` option within the `ViewDirective` 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/react/documentation/api/schedule/views/#displayname) property. {% tabs %} {% highlight js tabtitle="index.jsx" %} diff --git a/ej2-react/schedule/working-days.md b/ej2-react/schedule/working-days.md index 339f5215f..303e93c2a 100644 --- a/ej2-react/schedule/working-days.md +++ b/ej2-react/schedule/working-days.md @@ -46,9 +46,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://ej2.syncfusion.com/react/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://ej2.syncfusion.com/react/documentation/api/schedule/views/#showweekend) property is set to `false`. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -66,9 +66,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://ej2.syncfusion.com/react/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://ej2.syncfusion.com/react/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 js tabtitle="index.jsx" %} @@ -110,15 +110,15 @@ For more details refer to [this link](https://learn.microsoft.com/en-us/dotnet/a {% previewsample "page.domainurl/code-snippet/schedule/local-data-cs36" %} -**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://ej2.syncfusion.com/react/documentation/api/schedule/views/#showweeknumber) property to configure the [`weekRule`](https://ej2.syncfusion.com/react/documentation/api/schedule#weekrule) property. Also, the weekRule property depends on the value of the `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://ej2.syncfusion.com/react/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/react/documentation/api/schedule/workHoursModel/#highlight) – enables/disables the highlighting of work hours. +* [`start`](https://helpej2.syncfusion.com/react/documentation/api/schedule/workHoursModel/#start) - sets the start time of the working/business hour of a day. +* [`end`](https://helpej2.syncfusion.com/react/documentation/api/schedule/workHoursModel/#end) - sets the end time limit of the working/business hour of a day. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -136,7 +136,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://ej2.syncfusion.com/react/documentation/api/schedule#starthour) and [`endHour`](https://ej2.syncfusion.com/react/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. @@ -156,7 +156,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://ej2.syncfusion.com/react/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. @@ -176,7 +176,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://ej2.syncfusion.com/react/documentation/api/schedule#scrollto) method as depicted in the following code example. {% tabs %} {% highlight js tabtitle="index.jsx" %}