# View Mode Blazor Edition provides a set of native UI controls built for Blazor such as FlexGrid, Chart, ListView, and input controls including AutoComplete and ComboBox. ## Content DateTimePicker supports two view modes to display the calendar and the time panel at runtime. One being the side by side view, wherein the calendar and the time panel are displayed side by side when you click the drop-down button of the control and the other view mode is the switchable view, wherein the calendar is displayed at first in the default view and the time panel appears only when you click on the expanse button below the calendar. By default, the DateTimePicker control displays the calendar and the time panel side by side. However, you can choose to change the view mode using [ViewMode](/componentone/api/blazor/online-blazor/dotnet-api/C1.Blazor.DateTimeEditors/C1.Blazor.DateTimeEditors.C1DateTimePicker.ViewMode.html) property of the [C1DateTimePicker](/componentone/api/blazor/online-blazor/dotnet-api/C1.Blazor.DateTimeEditors/C1.Blazor.DateTimeEditors.C1DateTimePicker.html) class. The ViewMode property sets the view mode for the DatetimePicker control through the [DateTimePickerViewMode](/componentone/api/blazor/online-blazor/dotnet-api/C1.Blazor.DateTimeEditors/C1.Blazor.DateTimeEditors.DateTimePickerViewMode.html) enumeration. ![View modes in DateTimePicker control.](https://cdn.mescius.io/document-site-files/images/f5b600ba-f1a7-4f89-a20c-aa6c0c35880d/images/datetimepicker-viewmode.gif) The following code shows how to set the switchable view mode using the **ViewMode** property: ```csharp ```