# Getting Started Overview

This tutorial will walk you through creating a Web page that uses the [ASP NET AJAX Calendar](https://www.telerik.com/products/aspnet-ajax/calendar.aspx) controls. It shows how to:

* Use the  RadCalendar control.

* Apply skins to change the overall look and feel of the controls.

* Apply styles to tweak the appearance of the controls.

* Configure the selection and navigation behavior of the **RadCalendar** control.

* Add messages to appear when nothing is entered in **RadDatePicker**, **RadDateTimePicker** and **RadTimePicker**.

* Specify formats for display and editing.

## Adding a RadCalendar control

1. Drag a **RadCalendar** control from the toolbox onto your Web Page. Its [Smart Tag](https://www.telerik.com/products/aspnet-ajax/documentation/controls/calendar/design-time/smart-tag) should appear automatically:

   ![Showing the RadCalendar Smart Tag](https://www.telerik.com/products/aspnet-ajax/documentation/assets/12ede19b901ca83e5e3f328f6c753f27/calendar_gettingstarted_001.png)

2. In the **RadCalendar** [Smart Tag](https://www.telerik.com/products/aspnet-ajax/documentation/controls/calendar/design-time/smart-tag), choose "Outlook" from the **Skin** drop-down:

   ![Choosing skin for the RadCalendar control](https://www.telerik.com/products/aspnet-ajax/documentation/assets/8f75deb7285a9e023b6b7d206f25ad35/calendar_gettingstarted_002.png)

3. In the designer, right-click the **RadCalendar** control and select **Properties** from its context menu:

   ![Opening the Properties pane](https://www.telerik.com/products/aspnet-ajax/documentation/assets/1d7878a0279198e4f0879397f608f071/gettingstarted_addingradcalendar_properties.png)

4. In the properties pane for the **RadCalendar** control, the **Appearance** section contains a number of properties with names that end in "Style". These [Style properties](https://www.telerik.com/products/aspnet-ajax/documentation/controls/calendar/appearance-and-styling/styles) let you tweak the appearance of different parts of the **RadCalendar** control, further customizing it beyond the effects of the chosen skin. Expand the section for **Calendar TableStyle**. This is the default style for the main grid of the calendar. Change the **BackColor** property to **#DDEEFF**. This gives the calendar grid a light blue background:

   ![Customizing appearance](https://www.telerik.com/products/aspnet-ajax/documentation/assets/281742a8c45878ca261bd3fd3024c76f/gettingstarted_addingradcalendar004.png)

5. In the **Dates Management** section of the properties pane, click the ellipsis button next to the **SelectedDates** property:

   ![Managing dates](https://www.telerik.com/products/aspnet-ajax/documentation/assets/8f49254fda1baec8577d2ea4b0a7c3e5/gettingstarted_addingradcalendar005.png)

6. The [RadDate Collection Editor](https://www.telerik.com/products/aspnet-ajax/documentation/controls/calendar/design-time/raddate-collection-editor) appears, where you can specify a set of dates as the initial selection for the **RadCalendar** control. In the **RadDate Collection Editor**, click the **Add** button to add a date. In the properties pane on the right, click the drop-down next to the **Date** property, and select a date from the pop-up calendar control. Click the **Add** button again to add another date,and assign another value to its **Date** property. When you have added as many dates as you want, click OK to accept the collection of selected dates:

   ![Pre-selecting dates](https://www.telerik.com/products/aspnet-ajax/documentation/assets/85b3c995e20ead14445d8ade3fb06ef0/gettingstarted_addingradcalendar006_raddatecollectioneditor.png)

7. Set the **EnableNavigationAnimation** property to **True**. This causes the **RadCalendar** control to display animated effects when the user changes the current month using the navigation controls in the title bar:

   ![Enabling navigation animation](https://www.telerik.com/products/aspnet-ajax/documentation/assets/b06f6bfb3779235f6ec1063fa7894ead/gettingstarted_addingradcalendar007_enablenavigationanimation.png)

8. Set the **EnableViewSelector** property to **True**. This adds a control to the upper left corner of the grid portion of the calendar control for selecting all visible days in the grid.

   ![Enabling the view selector](https://www.telerik.com/products/aspnet-ajax/documentation/assets/9d61385474552482dfdc68ada8ff5bc7/gettingstarted_addingradcalendar008_enableviewselector.png)

9. Set the **ShowOtherMonthDays** property to **False**. This configures **RadCalendar** so that it only displays dates for the current month.

   ![Setting ShowOtherMonthDays property](https://www.telerik.com/products/aspnet-ajax/documentation/assets/aa4563ad931a9024d9ba53ce186ae7d6/gettingstarted_addingradcalendar008_showothermonthsview.png)

## Running the application

1. Run the application. When it first starts up, the **RadCalendar** control shows multiple selected dates, reflecting the value you set for the **SelectedDates** property. The **RadDatePicker**, **RadDateTimePicker** and **RadTimePicker** controls all show their empty messages, because no value has been assigned yet. All four controls reflect the "Outlook" skin. On top of that, the **RadCalendar** control uses the background color you set using the **CalendarTableStyle** property, and it does not display any days for the non-current month:

   ![RadCalendar](https://www.telerik.com/products/aspnet-ajax/documentation/assets/5aa3a5108c4c716304bfb9c91ac4ecf3/gettingstarted_runningtheapplication.png)

2. Click the view selector control in the upper left corner of the **RadCalendar** control.The entire month becomes selected:

   ![Selecting a month](https://www.telerik.com/products/aspnet-ajax/documentation/assets/3bb8ead422950851242847f0f0db11e8/gettingstarted_runningtheapplication004.png)

3. Click the navigation controls in the title bar of the **RadCalendar** control,and note the animated effect as the month changes:

   ![Navigating the RadCalendar control](https://www.telerik.com/products/aspnet-ajax/documentation/assets/abc40b88b76b26d4a3c3d8fc2822d878/gettingstarted_runningtheapplication005.png)

4. Scroll the popup calendar on the **RadDatePicker** control using the navigation controls in its title bar. Note that you cannot navigate before the minimum date you have specified or after the maximum date.

5. Select a date and time value for each of the controls. Note the formatting changes depending on whether the controls have focus.

## See Also

* [RadCalendar Structure](https://www.telerik.com/products/aspnet-ajax/documentation/controls/calendar/getting-started/structure)