Demonstrates a popup calendar that has been customized.
Several examples showing a heavily customized Popup Calendar.
Controls
Example 1
Includes Help button, Close button, several buttons in the footer, the CurrentDateLabel,
next and previous year buttons, and the week numbers. Weekends use a different background color.
Click on the calendar button to view the customized Calendar. Use the Apply button to save changes
and Close to abandon them.
Example 2
Includes multiple months shown, several buttons in the footer, the CurrentDateLabel,
next and previous year buttons,
and different graphics for month change buttons.
Click on the calendar button to view the customized Calendar. Use the Apply button to save changes
and Close to abandon them.
Source Code (C#)
<h2>Example 1</h2>
<p>Includes Help button, Close button, several buttons in the footer, the CurrentDateLabel,
next and previous year buttons, and the week numbers. Weekends use a different background color.</p>
Click on the calendar button to view the customized Calendar. Use the Apply button to save changes
and Close to abandon them.<br/><br/>
<des:DateTextBox ID="DateTextBox2" runat="Server" AutoHint="false">
<PopupCalendar>
<Calendar AutoFormatYearChangeButtonPositions="SurroundInRow2" ShowWeekNumbers="true"
WeekendBackground="255, 255, 192" DayNameFormat="FirstTwoLetters" >
<HelpCommand ShowField="RecommendedRow" />
<CloseCommand ShowField="RecommendedRow" />
<TodayCommand ShowField="FooterRow1" RegionInRow="Left" />
<ClearCommand ShowField="FooterRow1" RegionInRow="Right" />
<ShowSelectionCommand ShowField="FooterRow2" RegionInRow="Left" />
<ApplyCommand ShowField="FooterRow2" RegionInRow="Right" />
<CurrentDateLabel ShowField="FooterRow3" DateFormat="Abbreviated" RegionInRow="Center" />
</Calendar>
</PopupCalendar>
</des:DateTextBox>
<h2>Example 2</h2>
<p>Includes multiple months shown, several buttons in the footer, the CurrentDateLabel,
next and previous year buttons,
and different graphics for month change buttons.</p>
Click on the calendar button to view the customized Calendar. Use the Apply button to save changes
and Close to abandon them.<br/><br/>
<des:DateTextBox ID="DateTextBox1" runat="Server" AutoHint="false">
<PopupCalendar>
<Calendar MultiMonthColumnCount="3" AutoFormatYearChangeButtonPositions="SurroundInRow2"
FirstDayOfWeek="Monday" AllChangesNotify="ApplyCmd" SharedGroup="G1" >
<PreviousMonthCommand ButtonImageUrl="{APPEARANCE}/Date And Time/LeftCmdSolidBlack.GIF" />
<NextMonthCommand ButtonImageUrl="{APPEARANCE}/Date And Time/RightCmdSolidBlack.GIF" />
<PreviousYearCommand ButtonImageUrl="{APPEARANCE}/Date And Time/LeftCmd2Overlay1Black.GIF"
ShowField="RecommendedRow" />
<NextYearCommand ButtonImageUrl="{APPEARANCE}/Date And Time/RightCmd2Overlay1Black.GIF"
ShowField="RecommendedRow" />
<CurrentDateLabel ShowField="FooterRow1" DateFormat="AbbreviatedNoYear" />
<ClearCommand ButtonText="Clear" ShowField="FooterRow1" RegionInRow="Left" />
<CloseCommand ButtonText="Cancel" ButtonType="Text" ShowField="FooterRow1" RegionInRow="Right"
CssClass="DES_CalCommandButton" />
<ApplyCommand ShowField="FooterRow1" RegionInRow="Right" />
</Calendar>
</PopupCalendar>
</des:DateTextBox>