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.
- First, please select New | Web Site from the Visual Studio 2010 File menu.
- 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.
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.
- 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:
- Secondly, in tasks tab, choose the required skin type in the drag-down Skin;
- In the designer interface, please right-click the Calendar control and select Properties from its context menu:
- Then, within properties pan, we are able to set variable attribute, for instance, BorderColor, CultureInfo, DayNameFormat, DayStyle, etc.
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.
- Drag and drop a DatePicker control from the Toolbox onto your web page, which is below the Calendar control;
- 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:
- 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.