Quick Start: Create a Simple Calendar| UI Control for ASP.NET AJAX, C#, VB.NET

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.

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.

ASP.NET AJAX UI Controls

ASP.NET AJAX Chart UI Control ASP.NET AJAX Grid UI Control ASP.NET AJAX Barcode UI Control ASP.NET AJAX Button UI Control

ASP.NET AJAX Calendar UI Control

Overview

Getting Started

Calendar element

Title Navigation Controls Column and Row Headers

Pickers

TimePicker DatePicker DateTimePicker MonthYearPicker Using shared Calendar/TimeView Formatting Values

Templates

Calendar Day Templates Calendar Header and Footer Temlates

Features

Customizing the Day Matrix Multi-View Mode Managing Dates Date Selection

Client Prpgramming

Calendar Event

Server Programming