Step 2 of 3: Customizing the C1DateTimePicker

In the previous step, you created a WPF or Silverlight application with a C1DateTimePicker control. In this step, you will modify the appearance of the control.

WPF

Select the C1DateTimePicker control and then, in the Properties window, set the following properties:

Set the Height property to "30" to set height of the control.
Set the Width property to "300" to set the width of the control.
Set the TimeFormat property to ShortTime to change the format of the time to a short format consisting of only hours and minute spaces.
Set the DateFormat property to Long to change the format of the date to a longer format that includes the weekday.
Set the SelectionBackground property to LimeGreen to modify the color of the control's selected area.
Set the FirstDayOfWeek property to Wednesday to change the first day of the drop-down calendar's week to Wednesday.

Silverlight

Complete the following steps:

Add Height="30" to the <c1datetime:C1DateTimePicker> tag to determine height of the control. The XAML markup appears as follows:
```
<c1datetime:C1DateTimePicker Height="30">
```
Add Width="300" to the <c1datetime:C1DateTimePicker> tag to determine the width of the control. The XAML markup appears as follows:
```
<c1datetime:C1DateTimePicker Height="30" Width="300">
```
Add TimeFormat="ShortTime" to the <c1datetime:C1DateTimePicker> tag to change the format of the time to a short format consisting of only hours and minute spaces. The XAML markup appears as follows:
```
<c1datetime:C1DateTimePicker Height="30" Width="300" TimeFormat="ShortTime">
```
Add DateFormat="Long" to the <c1datetime:C1DateTimePicker> tag to change the format of the date to a longer format that includes the weekday. The XAML markup appears as follows:
```
<c1datetime:C1DateTimePicker Height="30" Width="300" TimeFormat="ShortTime"
 DateFormat="Long">
```
Add SelectionBackground="LimeGreen" to the <c1datetime:C1DateTimePicker> tag; this will modify the color of the selected area of the C1DateTimePicker control. The XAML markup appears as follows:
```
<c1datetime:C1DateTimePicker Height="30" Width="300" TimeFormat="ShortTime"
 DateFormat="Long" SelectionBackground="LimeGreen">
```
Add FirstDayOfWeek="Wednesday" to the <c1datetime:C1DateTimePicker> tag; this will change the first day of the drop-down calendar's week to Wednesday. The XAML markup appears as follows:
```
<c1datetime:C1DateTimePicker Height="30" Width="300" TimeFormat="ShortTime"
 DateFormat="Long" SelectionBackground="LimeGreen" FirstDayOfWeek="Wednesday">
```

In this step, you customized the appearance of the C1DateTimePicker control. In the next step, you will run the project and experience the functionality of the control.