Picker Using Shared Calendar/ TimeView|UI Control for ASP.NET AJAX, C#, VB.NET

Picker Using Shared Calendar/ TimeView in ASP.NET

Home > How to > Calendar shared Calendar/TimeView

As you can see in other tutorial pages, we can add and implement DatePicker, DateTimePicker, and TimePicker controls of Kettic Web Calendar UI for ASP.NET AJAX library to embed many date pickers, time pickers or datetime pickers on a page. However, too many such pickers on a single page can render too much HTML and effect performance.

In order to solve this problem, we can use a single Calendar or TimeView control to share DatePicker, DateTimePicker, and TimePicker components. Subsequently, the rendered web page only needs to display single client-side object for all the controls' popups. And we still can define the shared popup object at design time or at runtime with simple to integrate ASP.NET example codes.

How to Add the Shared Calendar/TimeView at Design Time

Following step by step instructions are used to define a shared popup at design time.

At first, please drag and drop the TimePicker, DatePicker and DateTimePicker to ASPX page;
Second, we need to drag and drop a Calendar control to TimeView page;
SharedCalendarID owns the combining properties of datepicker & datetimepicker and calendar, and SharedTimeViewID represents the combinations of timepicker & datetimepicker and TimeView.

Check out following ASPX.NET demo codes.


<Calendar ID="ShareCalendar1" runat="server"></Calendar>
<TimeView ID="ShareTimeView1" runat="server"></TimeView>
<kettic:PerTimePicker ID="PerTimePicker1" runat="server" SharedCalendarID="ShareCalendar1" SharedTimeViewID="ShareTimeView1"></kettic:PerTimePicker>
<kettic:PerDatePicker ID="PerDatePicker1" runat="server" SharedCalendarID="ShareCalendar1" SharedTimeViewID="ShareTimeView1"></kettic:PerDatePicker>
<kettic:PerDateTimePicker ID="PerDateTimePicker1" runat="server" SharedCalendarID="ShareCalendar1" SharedTimeViewID="ShareTimeView1"></kettic:PerDateTimePicker>

And please note that: the rendered Calendar or TimeView control does not contain any original properties (such as MaxDate and MinDate) from the components that use it.

Adding the Shared Calendar/TimeView at Runtime Time

Following detailed guides are to define a shared popup at run time within ASP.NET project.

At the very beginning, we need to drag and drop TimePicker,DatePicker, and DateTimePicker controls to the web page, and do not set the Calendar or TimeView properties of the Calendar and TimeView.

And then add a PlaceHolder to the page for controling the dynamically created popups. Please refer to following demo ASP.NET codes to see how to add a PlaceHolder to the page.


<kettic:PerTimePicker ID="PerTimePicker1" runat="server" SharedCalendarID="ShareCalendar1" SharedTimeViewID="ShareTimeView1"></kettic:PerTimePicker>
<kettic:PerTimePicker ID="PerTimePicker2" runat="server" SharedCalendarID="ShareCalendar1" SharedTimeViewID="ShareTimeView1"></kettic:PerTimePicker>
<asp:PlaceHolder ID="sharedPlaceHolder" runat="server" />

At last, add the codes for share Calendar/TimeView to the C# codes instance.


protected void Page_Load(object sender, EventArgs e)
        {
            PerTimeView shareTimeView = new PerTimeView();
            shareTimeView.ID = "shareTimeView";
            this.sharedPlaceHolder.Controls.Add(shareTimeView);

            PerTimePicker1.SharedTimeView = shareTimeView;
            PerTimePicker2.SharedTimeView = shareTimeView;

        }

See More Related Kettic Web UI Controls

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