<%@ Register Assembly="AsyncControls" Namespace="DelvingWare.AsyncControls" TagPrefix="dw" %>

<dw:AsyncTextBox ID="calTxt" runat="server" />

<dw:AsyncCalendar runat="server" ID="iconCalMain"
AbbreviateDays="true" 
AbbreviateMonths="false" 
IsIconic="true"
PreviousMonthText="&lt;img src='../images/btn_previous.gif' width='30' class='navPrev'>"
NextMonthText="<img src='../images/btn_next.gif' width='30' class='navNext'>" 
DefaultStyle="false" 
MonthListCssClass="iconicMonthList" 
YearListCssClass="iconicYearList"            
CssClass="asyncCal" 
DayCssClass="calday" 
WeekendDayCssClass="weekendcal" 
TodayCssClass="today"
OtherMonthCssClass="othermonthcal" 
IconImageUrl="../images/calicon.jpg" 
AssociatedTextBox="calTxt"  
VisibleDateFromTextBox="true"
MonthSelectorCssClass="monthSelector"
YearSelectorCssClass="yearSelector"
TodayFooterCssClass="todayFooter" />

 <dw:AsyncCalendar runat="server" ID="calMain"
 DefaultStyle="false" 
 AbbreviateDays="true"
 PreviousMonthText="&lt;div class='navPrev' title='Previous Month'>&lt;&lt;&lt;</div>"
 NextMonthText="<div class='navNext' title='Next Month'>&gt;&gt;&gt;</div>"
 SelectedDayCssClass="selDay" 
 CssClass="asyncCalReg"
 WeekendDayCssClass="weekend" 
 OtherMonthCssClass="otherMonth" 
 DayCssClass="calday" 
 Width="500"
 MonthListCssClass="monthList" 
 YearListCssClass="yearList" 
 TodayCssClass="today"
 TodayFooterCssClass="todayFooter"
 DaySelectionMode="Multiple" 
 OnDaySelected="calMain_DaySelected" 
 MonthSelectorCssClass="monthSelector"
 YearSelectorCssClass="yearSelector" />
 
 <p>
 <dw:AsyncListBox runat="server" ID="lstMain"
 SelectionMode="Single"
 OnSelectedIndexChanged="lstMain_IndexChanged" 
 Rows="7">
    <AsyncListItem Text="No Selected Dates" Value="none" />
 </dw:AsyncListBox>
 <br/>
 <dw:AsyncLinkButton runat="server" ID="lnkMain" 
 ConfirmMessage="Are you sure you want to clear all selected dates?"
 OnClick="lnkMain_Click">Clear Selected Dates</dw:AsyncLinkButton>
 </p>

using System;
using DelvingWare.AsyncControls;
...
protected void Page_Load( object sender, EventArgs e )
{
    // enable AsyncCalendar use
    AsyncPage.Invocation.EnableAsyncCalendar = true;

    calTxt.Text = DateTime.Now.ToShortDateString();
}

protected void lstMain_IndexChanged( object sender, AsyncEventArgs ae )
{
    if ( lstMain.SelectedIndex > -1 && lstMain.SelectedValue != "none" )
    {
        // get the selected date from the list box
        DateTime dt = Convert.ToDateTime(lstMain.SelectedItem.Text);

        // show the date only if it is not visible
        if ( !calMain.IsDateVisible(dt) )
            calMain.ShowDate(dt);
    }
}

protected void calMain_DaySelected( object sender, AsyncDayEventArgs ae )
{
    int selDateCount = calMain.SelectedDates.Count;

    // demo restrictions
    if ( selDateCount == 20 )
    {
        // display message to the user
        AsyncPage.MessageBox("This demo only allows 20 selected dates.<br />Click the selected date to unselect it.", 5000);
        return;
    } 

    // remove the items
    lstMain.Items.Clear();
    
    // add the dates and select the last item (refresh list)
    for ( int i = 0 ; i < selDateCount ; ++i )
    {
        lstMain.Items.Add(calMain.SelectedDates[i].ToShortDateString());
    }        
}

protected void lnkMain_Click( object sender, AsyncEventArgs ae )
{
    // clear the selected dates collection
    calMain.SelectedDates.Clear();
    
    // clear the items collection
    lstMain.Items.Clear();

    // add the default item
    lstMain.Items.Add("No Selected Dates", "none");

    // reset to show today
    calMain.ShowToday();
}

Imports System
Imports DelvingWare.AsyncControls
...

Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
    ' enable AsyncCalendar use
    AsyncPage.Invocation.EnableAsyncCalendar = true
    calTxt.Text = DateTime.Now.ToShortDateString
End Sub

Protected Sub lstMain_IndexChanged(ByVal sender As Object, ByVal ae As AsyncEventArgs)
    If ((lstMain.SelectedIndex > -1)  _
                AndAlso (lstMain.SelectedValue <> "none")) Then
        ' get the selected date from the list box
        Dim dt As DateTime = Convert.ToDateTime(lstMain.SelectedItem.Text)
        ' show the date only if it is not visible
        If Not calMain.IsDateVisible(dt) Then
            calMain.ShowDate(dt)
        End If
    End If
End Sub

Protected Sub calMain_DaySelected(ByVal sender As Object, ByVal ae As AsyncDayEventArgs)
    Dim selDateCount As Integer = calMain.SelectedDates.Count
    ' demo restrictions
    If (selDateCount = 20) Then
        ' display message to the user
        AsyncPage.MessageBox("This demo only allows 20 selected dates.<br />Click the selected date to unselect it.", 5000)
        Return
    End If
    ' remove the items
    lstMain.Items.Clear
    ' add the dates and select the last item (refresh list)
    Dim i As Integer = 0
    Do While (i < selDateCount)
        
    Loop
    i
    lstMain.Items.Add(calMain.SelectedDates(i).ToShortDateString)
End Sub

Protected Sub lnkMain_Click(ByVal sender As Object, ByVal ae As AsyncEventArgs)
    ' clear the selected dates collection
    calMain.SelectedDates.Clear
    ' clear the items collection
    lstMain.Items.Clear
    ' add the default item
    lstMain.Items.Add("No Selected Dates", "none")
    ' reset to show today
    calMain.ShowToday
End Sub

.asyncCalReg 

{
    margin-left: -15px;
    text-align: center;
    font-size: 7pt;
    font-family: verdana, arial;
    background-color: white;
    border: 1px outset silver;
}
.asyncCalReg tr th 

{
    background-color: #768694;
    color: White;
    width: 80px;
}
.weekend 

{
    background-color: #eee;
    height: 50px;
}
.weekend:hover 

{
    background-color: #B2D2E8;
}
.otherMonth 

{
    color: #777;
    height: 50px;
}
.otherMonth:hover 

{
    background-color: #B2D2E8;
}
.today 

{
    background-image: url("images/slashback.gif");
    background-repeat: repeat;
}
.todayFooter input

{
    border: 1px solid #777;
    background-image: url("images/greyButton.gif");
    background-repeat: repeat-x;
    height: 23px;
}
.todayFooter input:hover 

{
    background-image: url("images/greyButtonHov.gif");
    background-repeat: repeat-x;
    cursor: pointer;
}
.monthList 

{
    border: 1px solid black;
    background-color: White;
    color: #777;    
    font-family: Verdana, Arial, Serif;
    font-size: 9pt;
    line-height: 18px;
}
.monthList 

{
    border: 1px solid #777;
    background-color: White;
    padding: 3px 0px 3px 0px;
    color: #777;
    font-family: Verdana, Arial, Serif;
    font-size: 9pt;
    line-height: 18px;
}
.monthList div:hover 

{
    color: White;
    background-color: #768694;
}
.monthSelector 

{
    border: 1px solid #777;
    background-image: url("images/greyButton.gif");
    background-repeat: repeat-x;
    height: 23px;
}
.monthSelector:hover 

{
    background-image: url("images/greyButtonHov.gif");
    background-repeat: repeat-x;
    cursor: pointer;
}
.yearList 

{
    border: 1px solid #777;
    background-color: White;
    padding: 3px 0px 3px 0px;
    color: #777;
    font-family: Verdana, Arial, Serif;
    font-size: 9pt;
    line-height: 18px;
}
.yearList div 

{
    padding: 1 3 1 3;
}
.yearList div:hover 

{
    color: white;
    background-color: #768694;
}
.yearSelector 

{
    border: 1px solid #777;
    background-image: url("images/greyButton.gif");
    background-repeat: repeat-x;
    height: 23px;
}
.yearSelector:hover 

{
    background-image: url("images/greyButtonHov.gif");
    background-repeat: repeat-x;
    cursor: pointer;
}
.navPrev 

{
    font-weight: bold;
    color: #738694;
}
.navNext 

{
    font-weight: bold;
    color: #738694;
}

.asyncCal {
    text-align:center;
    font-size: 7pt;
    font-family: verdana, arial;
    background-color: #eee;
    border: 1px outset silver;
    z-index: 7;
}
.asyncCal tr th {
    background-color: #61A1CE;
    color: white;
    width: 30px;
    height: 25px;
    font-size: 9pt;
    font-family: verdana, arial;
}
.weekendcal {
    font-size: 7pt;    
    width: 25px;
    height: 25px;
    background-color: #eee;
}
.weekendcal:hover {
    background-color: #B2D2E8;
}
.othermonthcal {
    height: 25px;
    font-size: 7pt;
    color: #777;    
    background-color: White;        
}
.othermonthcal:hover {
    background-color: #B2D2E8;
}
.calday 

{
    text-align: center;
    font-size: 7pt;
    background-color: white;
    font-size: 8pt;
}
.calday:hover {
    background-color: #B2D2E8;
}
.selDay 

{
    background-color: #777;
    color: White;
}
.iconicMonthList 

{
    border: 1px solid black;
    background-color: White;
    color: #777;    
    font-family: Verdana, Arial, Serif;
    font-size: 9pt;
    line-height: 18px;
}
.iconicMonthList div 

{
    padding: 1 3 1 3;
}
.iconicMonthList div:hover 

{
    color: White;
    background-color: #768694;
}
.iconicYearList 

{
    border: 1px solid black;
    background-color: White;
    color: #777;
    font-family: Verdana, Arial, Serif;
    font-size: 9pt;
    line-height: 18px;
}
.iconicYearList div 

{
    padding: 1 3 1 3;
}
.iconicYearList div:hover 

{
    color: white;
    background-color: #768694;
}