Skip to content

Commit b49c038

Browse files
xristianstefanovxristianstefanov
authored
[3.7] docs(date pickers): OnCalendarCellRender event (#1182)
* [3.7] docs(date pickers): OnCalendarCellRender event * chore(date pickers): fixes as per comments
1 parent 7c0fa08 commit b49c038

File tree

4 files changed

+153
-7
lines changed

4 files changed

+153
-7
lines changed

‎components/calendar/events.md‎

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -165,13 +165,15 @@ When the user selects a range from the calendar, the first click always fires th
165165

166166
## CellRender
167167

168-
The `CellRender` event fires when each cell in each view is about to render. It allows you to see which view it is in, what its date, and you can set the `Class` for the `<td>` element based on your business logic.
168+
The `CellRender` event fires when each cell in each view is about to render. The event allows you to find out the current view and cell date. You can also set a custom CSS class for the `<td>` element.
169169

170170
The event arguments are of type `CalendarCellRenderEventArgs` and provide the following fields:
171171

172-
* `Date` - `DateTime` - the date of the cell
173-
* `View` - `CalendarView` - the currently visible view. You can use it to determine if the calendar is rendering the MonthView, YearView, and so on.
174-
* `Class` - `string` - lets you set a custom CSS class to the cell DOM element.
172+
| Property | Type | Description |
173+
| --- | --- | --- |
174+
| `Class` | `string` | A custom CSS class for the cell DOM element. |
175+
| `Date` | `DateTime` | The date of the cell |
176+
| `View` | `CalendarView` enum <br /> (`Month`) | The currently visible view. You can use it to determine if the calendar is rendering the MonthView, YearView, and so on. |
175177

176178
You can also customize the cells through their [templates]({%slug calendar-templates-overview%}). You can use the event together with the templates.
177179

@@ -206,9 +208,6 @@ Move between the calendar views to see the different behaviors in the Month and
206208
background-color: purple;
207209
color: yellow;
208210
}
209-
/* You can inspect the built-in rendering with the browser dev tools
210-
to see how to apply heavier selectors and to also use classes the
211-
calendar provides such as focus and selection states */
212211
</style>
213212
````
214213

‎components/datepicker/events.md‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ This article explains the events available in the Telerik DatePicker for Blazor:
1717
* [OnOpen](#onopen)
1818
* [OnClose](#onclose)
1919
* [OnBlur](#onblur)
20+
* [OnCalendarCellRender](#oncalendarcellrender)
2021

2122
## OnChange
2223

@@ -213,6 +214,53 @@ The `OnBlur` event fires when the component loses focus.
213214
}
214215
````
215216

217+
## OnCalendarCellRender
218+
219+
The `OnCalendarCellRender` event fires when each calendar cell in each view is about to render. The event allows you to find out the current view and cell date. You can also set a custom CSS class for the `<td>` element.
220+
221+
The event handler receives as an argument an `DatePickerCalendarCellRenderEventArgs` object that contains:
222+
223+
| Property | Type | Description |
224+
| --- | --- | --- |
225+
| `Class` | `string` | A custom CSS class for the calendar cell DOM element. |
226+
| `Date` | `DateTime` | The date of the calendar cell. |
227+
| `View` | `CalendarView` enum <br /> (`Month`) | The currently visible view. You can use it to determine if the calendar is rendering the MonthView, YearView, and so on. |
228+
229+
>caption Handle the OnCalendarCellRender event.
230+
231+
````CSHTML
232+
@* Customize the calendar cells using the OnCalendarCellRender event. *@
233+
234+
<TelerikDatePicker OnCalendarCellRender="@OnCalendarCellRenderHandler"
235+
@bind-Value="DatePickerValue"
236+
Width="295px">
237+
</TelerikDatePicker>
238+
239+
@code {
240+
private DateTime DatePickerValue { get; set; } = DateTime.Now;
241+
242+
private void OnCalendarCellRenderHandler(DatePickerCalendarCellRenderEventArgs args)
243+
{
244+
if (args.View == CalendarView.Month)
245+
{
246+
args.Class = args.Date.Day % 3 == 0 ? "special" : "";
247+
}
248+
else if (args.View == CalendarView.Decade)
249+
{
250+
args.Class = args.Date.Year == 2020 ? "special" : "";
251+
}
252+
}
253+
}
254+
255+
<style>
256+
.special {
257+
color: white;
258+
background-color: greenyellow;
259+
font-weight: bold;
260+
}
261+
</style>
262+
````
263+
216264
## See Also
217265

218266
* [ValueChanged and Validation]({%slug value-changed-validation-model%})

‎components/daterangepicker/events.md‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ This article explains the events available in the Telerik DateRangePicker for Bl
1818
* [OnOpen](#onopen)
1919
* [OnClose](#onclose)
2020
* [ViewChanged](#viewchanged)
21+
* [OnCalendarCellRender](#oncalendarcellrender)
2122

2223

2324
## OnChange
@@ -212,6 +213,57 @@ The `ViewChanged` event fires when the user changes the view they are seeing in
212213

213214
@[template](/_contentTemplates/common/general-info.md#event-callback-can-be-async)
214215

216+
## OnCalendarCellRender
217+
218+
The `OnCalendarCellRender` event fires when each calendar cell in each view is about to render. The event allows you to find out the current view and cell date. You can also set a custom CSS class for the `<td>` element.
219+
220+
The event handler receives as an argument an `DateRangePickerCalendarCellRenderEventArgs` object that contains:
221+
222+
| Property | Type | Description |
223+
| --- | --- | --- |
224+
| `Class` | `string` | A custom CSS class for the calendar cell DOM element. |
225+
| `Date` | `DateTime` | The date of the calendar cell. |
226+
| `View` | `CalendarView` enum <br /> (`Month`) | The currently visible view. You can use it to determine if the calendar is rendering the MonthView, YearView, and so on. |
227+
228+
>caption Handle the OnCalendarCellRender event.
229+
230+
````CSHTML
231+
@* Customize the calendar cells using the OnCalendarCellRender event. *@
232+
233+
<TelerikDateRangePicker OnCalendarCellRender="@OnCalendarCellRenderHandler"
234+
@bind-StartValue="@StartValue"
235+
@bind-EndValue="@EndValue"
236+
Format="dd MMMM yyyy"
237+
Min="@Min" Max="@Max">
238+
</TelerikDateRangePicker>
239+
240+
@code {
241+
private DateTime? StartValue { get; set; } = DateTime.Now;
242+
private DateTime? EndValue { get; set; } = DateTime.Now.AddDays(10);
243+
private DateTime Min = new DateTime(1990, 1, 1, 8, 15, 0);
244+
private DateTime Max = new DateTime(2025, 1, 1, 19, 30, 45);
245+
246+
private void OnCalendarCellRenderHandler(DateRangePickerCalendarCellRenderEventArgs args)
247+
{
248+
if (args.View == CalendarView.Month)
249+
{
250+
args.Class = args.Date.Day % 3 == 0 ? "special" : "";
251+
}
252+
else if (args.View == CalendarView.Decade)
253+
{
254+
args.Class = args.Date.Year == 2020 ? "special" : "";
255+
}
256+
}
257+
}
258+
259+
<style>
260+
.special {
261+
color: white;
262+
background-color: greenyellow;
263+
font-weight: bold;
264+
}
265+
</style>
266+
````
215267

216268
## See Also
217269

‎components/datetimepicker/events.md‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ This article explains the events available in the Telerik DateTimePicker for Bla
1717
* [OnOpen](#onopen)
1818
* [OnClose](#onclose)
1919
* [OnBlur](#onblur)
20+
* [OnCalendarCellRender](#oncalendarcellrender)
2021

2122

2223
## OnChange
@@ -217,6 +218,52 @@ The `OnBlur` event fires when the component loses focus.
217218
}
218219
````
219220

221+
## OnCalendarCellRender
222+
223+
The `OnCalendarCellRender` event fires when each calendar cell in each view is about to render. The event allows you to find out the current view and cell date. You can also set a custom CSS class for the `<td>` element.
224+
225+
The event handler receives as an argument an `DateTimePickerCalendarCellRenderEventArgs` object that contains:
226+
227+
| Property | Type | Description |
228+
| --- | --- | --- |
229+
| `Class` | `string` | A custom CSS class for the calendar cell DOM element. |
230+
| `Date` | `DateTime` | The date of the calendar cell. |
231+
| `View` | `CalendarView` enum <br /> (`Month`) | The currently visible view. You can use it to determine if the calendar is rendering the MonthView, YearView, and so on. |
232+
233+
>caption Handle the OnCalendarCellRender event.
234+
235+
````CSHTML
236+
@* Customize the calendar cells using the OnCalendarCellRender event. *@
237+
238+
<TelerikDateTimePicker OnCalendarCellRender="@OnCalendarCellRenderHandler"
239+
@bind-Value="DateTimePickerValue"
240+
Width="295px">
241+
</TelerikDateTimePicker>
242+
243+
@code {
244+
private DateTime DateTimePickerValue { get; set; } = DateTime.Now;
245+
246+
private void OnCalendarCellRenderHandler(DateTimePickerCalendarCellRenderEventArgs args)
247+
{
248+
if (args.View == CalendarView.Month)
249+
{
250+
args.Class = args.Date.Day % 3 == 0 ? "special" : "";
251+
}
252+
else if (args.View == CalendarView.Decade)
253+
{
254+
args.Class = args.Date.Year == 2020 ? "special" : "";
255+
}
256+
}
257+
}
258+
259+
<style>
260+
.special {
261+
color: white;
262+
background-color: greenyellow;
263+
font-weight: bold;
264+
}
265+
</style>
266+
````
220267

221268
## See Also
222269

0 commit comments

Comments
 (0)