You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: ej2-react/schedule/cell-customization.md
+11-11Lines changed: 11 additions & 11 deletions
Original file line number
Diff line number
Diff line change
@@ -10,11 +10,11 @@ domainurl: ##DomainURL##
10
10
11
11
# Cell customization in React Schedule component
12
12
13
-
The cells of the Scheduler can be easily customized either using the cell template or `RenderCell` event.
13
+
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.
14
14
15
15
## Setting cell dimensions in all views
16
16
17
-
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.
17
+
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.
18
18
19
19
{% tabs %}
20
20
{% highlight js tabtitle="index.jsx" %}
@@ -35,7 +35,7 @@ The height and width of the Scheduler cells can be customized either to increase
35
35
36
36
## Check for cell availability
37
37
38
-
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.
38
+
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.
39
39
40
40
>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.
41
41
@@ -55,11 +55,11 @@ You can check whether the given time range slots are available for event creatio
55
55
56
56
## Customizing cells in all the views
57
57
58
-
It is possible to customize the appearance of the cells using both template options and `renderCell` event on all the views.
58
+
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.
59
59
60
60
### Using template
61
61
62
-
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.
62
+
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.
63
63
64
64
{% tabs %}
65
65
{% highlight js tabtitle="index.jsx" %}
@@ -80,7 +80,7 @@ The `cellTemplate` option accepts the template string and is used to customize t
80
80
81
81
### Using renderCell event
82
82
83
-
An alternative to `cellTemplate` is the `renderCell` event, which can also be used to customize the cells with appropriate images or formatted text values.
83
+
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.
84
84
85
85
{% tabs %}
86
86
{% highlight js tabtitle="index.jsx" %}
@@ -99,7 +99,7 @@ An alternative to `cellTemplate` is the `renderCell` event, which can also be us
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.
102
+
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.
103
103
104
104
| Element type | Description |
105
105
|-------|---------|
@@ -117,7 +117,7 @@ You can customize cells such as work cells, month cells, all-day cells, header c
117
117
118
118
## Customizing cell header in month view
119
119
120
-
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.
120
+
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.
121
121
122
122
{% tabs %}
123
123
{% 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
138
138
139
139
## Customizing the minimum and maximum date values
140
140
141
-
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.
141
+
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.
142
142
143
143
{% tabs %}
144
144
{% highlight js tabtitle="index.jsx" %}
@@ -157,7 +157,7 @@ Providing the `minDate` and `maxDate` property with some date values, allows the
>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.
160
+
>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.
161
161
162
162
## Customizing the weekend cells background color
163
163
@@ -207,6 +207,6 @@ And, the background color for weekend cells in the Month view through the [`cssC
207
207
208
208
## How to disable multiple cell and row selection in Schedule
209
209
210
-
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.
210
+
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.
211
211
212
212
> 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.
Copy file name to clipboardExpand all lines: ej2-react/schedule/context-menu.md
+3-3Lines changed: 3 additions & 3 deletions
Original file line number
Diff line number
Diff line change
@@ -10,11 +10,11 @@ domainurl: ##DomainURL##
10
10
11
11
# Context menu in React Schedule component
12
12
13
-
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`.
13
+
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`.
14
14
15
-
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.
15
+
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.
16
16
17
-
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.
17
+
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.
18
18
19
19
> You can also display custom menu options on Scheduler cells and appointments. Context menu will open on tap-hold in responsive mode.
Copy file name to clipboardExpand all lines: ej2-react/schedule/crud-actions.md
+10-10Lines changed: 10 additions & 10 deletions
Original file line number
Diff line number
Diff line change
@@ -28,7 +28,7 @@ In case, if you need to add some other additional fields to the editor window, t
28
28
29
29
### Creation using addEvent method
30
30
31
-
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.
31
+
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.
32
32
33
33
{% tabs %}
34
34
{% highlight js tabtitle="index.jsx" %}
@@ -95,7 +95,7 @@ Additionally, the regex condition has been added to the Location field, so that
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.
98
+
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.
99
99
100
100
{% tabs %}
101
101
{% highlight js tabtitle="index.jsx" %}
@@ -126,9 +126,9 @@ You can open the default editor window filled with appointment details by double
126
126
127
127
### Updating using saveEvent method
128
128
129
-
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.
129
+
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.
130
130
131
-
**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.
131
+
**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.
132
132
133
133
{% tabs %}
134
134
{% highlight js tabtitle="index.jsx" %}
@@ -144,7 +144,7 @@ The appointments can be edited and updated manually using the `saveEvent` method
**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`.
147
+
**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`.
148
148
149
149
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.
### How to edit from the current and following events of a series
307
307
308
-
The recurring appointments can be edited from current and following events when enable the property `editFollowingEvents`.
308
+
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)..
309
309
310
310
**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,
### Restricting edit action based on specific criteria
388
388
389
-
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.
389
+
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.
390
390
391
391
{% tabs %}
392
392
{% highlight js tabtitle="index.jsx" %}
@@ -418,9 +418,9 @@ When you double click an event, the default editor window will be opened which i
418
418
419
419
### Deletion using deleteEvent method
420
420
421
-
The appointments can be removed manually using the `deleteEvent` method. The following code examples shows how to edit the normal and recurring events.
421
+
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.
422
422
423
-
**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.
423
+
**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.
### How to delete only the current and following events of a series
546
546
547
-
The recurring events can be deleted from current and following events only when enable `editFollowingEvents` property.
547
+
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.
548
548
549
549
**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,
0 commit comments