$99 VS $1000+. UI Control for ASP.NET AJAX(contains chart and gridview).
Create a Simple Calendar in ASP.NET AJAX
Home > How to > Calendar Getting Started

Kettic Calendar for ASP.NET AJAX UI controls are perfectly designed to help developers and end users to create and customize a calendar on a web page, which can contain date picker, time picker, datetime picker as well as monthyear picker.
This page is arranged to guide you through creating a calendar tool on web page by using Kettic Calendar controls. It mainly shows users how to:
  • Create a web ASP.NET application for calendar project
  • Add a calendar control to the created ASP.NET application
  • Add and insert picker controls

How to Create an ASP.NET Web Application

At the very beginning, please be sure that you have installed Visual Studio 2010, 2012 or any later version on your computer, and run the Visual Studio to access to following steps.
  1. First, please select New | Web Site from the Visual Studio 2010 File menu.
  2. And then, please select the "ASP.NET WebSite" and enter a name as well as the location path. Here, we give the screenshot for this step.

    calendar get started 1.png

How to Add a Calendar Control

We provide detailed step by step guides on how to add a calendar control to the built ASP.NET project.
  1. First of all, please drag and drop a Calendar control from the Toolbox onto your Web page. And you can see its "Smart Tag" display automatically like sample screenshot below:

    calendar get started 2.png
  2. Secondly, in tasks tab, choose the required skin type in the drag-down Skin;

    calendar get started 3.png
  3. In the designer interface, please right-click the Calendar control and select Properties from its context menu:

    calendar get started 4.png
  4. Then, within properties pan, we are able to set variable attribute, for instance, BorderColor, CultureInfo, DayNameFormat, DayStyle, etc.

    calendar get started 5.jpg

How to Add a Picker Control

With the support of Picker controls, we can add different picker type to calendar, such as, date picker, time picker, datetime picker and monthyear picker. Here, we set date picker as typical to explain how to add a picker control.
  1. Drag and drop a DatePicker control from the Toolbox onto your web page, which is below the Calendar control;
  2. In the automatically appearing DatePicker Smart Tag, choose the required skin type from the drop-down Skin property; and the screenshot for this step is given below:

    calendar get started 6.png
  3. In the properties pane for the DatePicker control, we can set different property of calendar popup, we still are able to set the attributes of DateInput.

    calendar get started 7.jpg