# Events
This article explains the events available in the Telerik DateTimePicker for Blazor:
* [FocusedDateChanged](https://www.telerik.com/blazor-ui/documentation/components/datetimepicker/events#focuseddatechanged)
* [OnBlur](https://www.telerik.com/blazor-ui/documentation/components/datetimepicker/events#onblur)
* [OnCalendarCellRender](https://www.telerik.com/blazor-ui/documentation/components/datetimepicker/events#oncalendarcellrender)
* [OnChange](https://www.telerik.com/blazor-ui/documentation/components/datetimepicker/events#onchange)
* [OnClose](https://www.telerik.com/blazor-ui/documentation/components/datetimepicker/events#onclose)
* [OnOpen](https://www.telerik.com/blazor-ui/documentation/components/datetimepicker/events#onopen)
* [ValueChanged](https://www.telerik.com/blazor-ui/documentation/components/datetimepicker/events#valuechanged)
## FocusedDateChanged
The `FocusedDateChanged` event fires when the user:
* Navigates to another month in the DatePicker popup Calendar.
* Selects a date that doesn't match the current `FocusedDate` value.
* Closes the Calendar popup without selecting a value, if the Calendar is not showing the current month.
See [Focused Date](https://www.telerik.com/blazor-ui/documentation/components/datetimepicker/overview#focused-date) for additional information.
> caption Using the DatePicker FocusedDateChanged event
## OnBlur
The `OnBlur` event fires when the component loses focus.
> caption Handle the OnBlur event
> tip The event is an `EventCallback`. It can be synchronous and return `void`, or asynchronous and return `async Task`. Do not use `async void`.
## OnCalendarCellRender
The `OnCalendarCellRender` event fires when each calendar cell in each view is about to render. The event allows you to:
* Identify the current view.
* Find out the cell date.
* Set a custom CSS class for the `` element.
As an argument, the event handler receives a [`DateTimePickerCalendarCellRenderEventArgs` object](https://www.telerik.com/blazor-ui/documentation/api/telerik.blazor.components.datetimepickercalendarcellrendereventargs), which contains the following properties:
| Property | Type | Description |
| -------- | ------------------------------------ | ------------------------------------------------------------------------------------------------------------------------ |
| `Class` | `string` | A custom CSS class for the calendar cell DOM element. |
| `Date` | `DateTime` | The date of the calendar cell. |
| `View` | `CalendarView` enum
(`Month`) | The currently visible view. You can use it to determine if the calendar is rendering the MonthView, YearView, and so on. |
> caption Handle the OnCalendarCellRender event.
## OnChange
The `OnChange` event represents a user action that confirms the current value. It fires when the user:
* Presses `Enter` while the textbox is focused.
* Clicks **Set** in the date and time selection popup.
* Blurs the component.
The event handler receives an `object` argument that you need to cast to the actual `Value` type. The argument can hold a value or be `null`, depending on the user input and the `Value` type.
The DateTimePicker is a generic component, so you must either provide a `Value`, or a type to the `T` parameter of the component.
> caption Handle DateTimePicker OnChange and use two-way Value binding
> tip The event is an `EventCallback`. It can be synchronous and return `void`, or asynchronous and return `async Task`. Do not use `async void`.
> tip The `OnChange` event is a custom event and does not interfere with bindings, so you can use it together with models and forms.
## OnClose
The `OnClose` event fires before the DateTimePicker popup closes.
As an argument, the event handler receives a [`DateTimePickerCloseEventArgs` object](https://www.telerik.com/blazor-ui/documentation/api/telerik.blazor.components.datetimepickercloseeventargs), which contains the following properties:
| Property | Description |
| ------------- | ---------------------------------------------------------------------------- |
| `IsCancelled` | Set the `IsCancelled` property to `true` to cancel the closing of the popup. |
> tip The event is an `EventCallback`. It can be synchronous and return `void`, or asynchronous and return `async Task`. Do not use `async void`.
## OnOpen
The `OnOpen` event fires before the DateTimePicker popup renders.
As an argument, the event handler receives a [`DateTimePickerOpenEventArgs` object](https://www.telerik.com/blazor-ui/documentation/api/telerik.blazor.components.datetimepickeropeneventargs), which contains the following properties:
| Property | Description |
| ------------- | ---------------------------------------------------------------------------- |
| `IsCancelled` | Set the `IsCancelled` property to `true` to cancel the opening of the popup. |
> tip The event is an `EventCallback`. It can be synchronous and return `void`, or asynchronous and return `async Task`. Do not use `async void`.
## ValueChanged
The `ValueChanged` event fires:
* On Calendar or TimeView selection and during typing when the resulting input value is valid.
* On input blur if the input value is not valid and the `Value` type is nullable.
> caption Handle ValueChanged and provide initial value
> tip The event is an `EventCallback`. It can be synchronous and return `void`, or asynchronous and return `async Task`. Do not use `async void`.
> note The lambda expression in the handler is required by the framework: .
## See Also
* [ValueChanged and Validation](https://www.telerik.com/blazor-ui/documentation/knowledge-base/value-changed-validation-model)
* [Fire OnChange Only Once](https://www.telerik.com/blazor-ui/documentation/knowledge-base/common-onchange-fires-twice)
|