Demonstrates several configurations of the next/previous buttons
Demonstrates several configurations of the next/previous buttons.
There are two ways to configure button positions.
- Use predefined positions with the AutoFormatMonthChangeButtonPositions and
AutoFormatYearChangeButtonPositions properties.
- There are properties specific to each button, where you can establish position, label, image and more.
They are:
NextMonthCommand,
PreviousMonthCommand,
NextYearCommand, and
PreviousYearCommand. Here are some of their most commonly used properties:
- ShowField - Determines if the button is shown and in which row of the 3 in both header and footer sections.
Generally use RecommendedRow.
- ButtonText - The textual label for the button.
- ButtonImageUrl - The URL to an image for the button.
- CssClass - The style sheet class applied to the button.
There are many more properties for more specialized customization.
There are numerous image files for buttons available in your [web app]\DES\Appearance\Date and Time\ folder.
If you use design mode, use the SmartTag and use "Select Navigation Button images" to assist you.
Controls
Month on left; Year on right
Using
AutoFormatMonthChangeButtonPositions="LeftOfRow1"
AutoFormatYearChangeButtonPositions="RightOfRow1"
| 27 | 28 | 29 | 30 | 31 | 1 | 2 |
| 3 | 4 | 5 | 6 | 7 | 8 | 9 |
| 10 | 11 | 12 | 13 | 14 | 15 | 16 |
| 17 | 18 | 19 | 20 | 21 | 22 | 23 |
| 24 | 25 | 26 | 27 | 28 | 29 | 30 |
| 1 | 2 | 3 | 4 | 5 | 6 | 7 |
Both Month and Year surrounding the calendar on row 3
Using
AutoFormatMonthChangeButtonPositions="SurroundInRow3"
AutoFormatYearChangeButtonPositions="SurroundInRow3"
| 27 | 28 | 29 | 30 | 31 | 1 | 2 |
| 3 | 4 | 5 | 6 | 7 | 8 | 9 |
| 10 | 11 | 12 | 13 | 14 | 15 | 16 |
| 17 | 18 | 19 | 20 | 21 | 22 | 23 |
| 24 | 25 | 26 | 27 | 28 | 29 | 30 |
| 1 | 2 | 3 | 4 | 5 | 6 | 7 |
Month only
Using
AutoFormatMonthChangeButtonPositions="SurroundInRow2"
AutoFormatYearChangeButtonPositions="Hidden"
| 27 | 28 | 29 | 30 | 31 | 1 | 2 |
| 3 | 4 | 5 | 6 | 7 | 8 | 9 |
| 10 | 11 | 12 | 13 | 14 | 15 | 16 |
| 17 | 18 | 19 | 20 | 21 | 22 | 23 |
| 24 | 25 | 26 | 27 | 28 | 29 | 30 |
| 1 | 2 | 3 | 4 | 5 | 6 | 7 |
Customizing the Command properties
Using these properties:
PreviousMonthCommand,
NextMonthCommand,
PreviousYearCommand, and
NextYearCommand.
In this example, there are alternative images and the year buttons are shown (as they are hidden by default).
| 27 | 28 | 29 | 30 | 31 | 1 | 2 |
| 3 | 4 | 5 | 6 | 7 | 8 | 9 |
| 10 | 11 | 12 | 13 | 14 | 15 | 16 |
| 17 | 18 | 19 | 20 | 21 | 22 | 23 |
| 24 | 25 | 26 | 27 | 28 | 29 | 30 |
| 1 | 2 | 3 | 4 | 5 | 6 | 7 |
Source Code (C#)
<h2>Month on left; Year on right</h2>
Using <span class="PropertyName">AutoFormatMonthChangeButtonPosition</span>s="LeftOfRow1"
<span class="PropertyName">AutoFormatYearChangeButtonPositions</span>="RightOfRow1"<br/><br/>
<des:Calendar ID="Calendar1" runat="server"
AutoFormatMonthChangeButtonPositions="LeftOfRow1"
AutoFormatYearChangeButtonPositions="RightOfRow1" >
</des:Calendar>
<br/>
<br/>
<h2>Both Month and Year surrounding the calendar on row 3</h2>
Using <span class="PropertyName">AutoFormatMonthChangeButtonPositions</span>="SurroundInRow3"
<span class="PropertyName">AutoFormatYearChangeButtonPositions</span>="SurroundInRow3"<br/><br/>
<des:Calendar ID="Calendar2" runat="server"
AutoFormatMonthChangeButtonPositions="SurroundInRow3"
AutoFormatYearChangeButtonPositions="SurroundInRow3" >
</des:Calendar>
<br/>
<br/>
<h2>Month only</h2>
Using <span class="PropertyName">AutoFormatMonthChangeButtonPositions</span>="SurroundInRow2"
<span class="PropertyName">AutoFormatYearChangeButtonPositions</span>="Hidden"<br/>
<des:Calendar ID="Calendar3" runat="server"
AutoFormatMonthChangeButtonPositions="SurroundInRow2"
AutoFormatYearChangeButtonPositions="Hidden" >
</des:Calendar>
<br/>
<br/>
<h2>Customizing the Command properties</h2>
Using these properties:
<span class="PropertyName">PreviousMonthCommand</span>,
<span class="PropertyName">NextMonthCommand</span>,
<span class="PropertyName">PreviousYearCommand</span>, and
<span class="PropertyName">NextYearCommand</span>.<br/>
In this example, there are alternative images and the year buttons are shown (as they are hidden by default).
<br/><br/>
<des:Calendar ID="Calendar4" runat="server" >
<PreviousMonthCommand ButtonImageUrl="{APPEARANCE}/Date And Time/LeftCmdSolidBlack.GIF" />
<NextMonthCommand ButtonImageUrl="{APPEARANCE}/Date And Time/RightCmdSolidBlack.GIF" />
<PreviousYearCommand ButtonImageUrl="{APPEARANCE}/Date And Time/LeftCmd2Overlay1Black.GIF"
ButtonText="Previous Year" ShowField="RecommendedRow" />
<NextYearCommand ButtonImageUrl="{APPEARANCE}/Date And Time/RightCmd2Overlay1Black.GIF"
ButtonText="Next Year" ShowField="RecommendedRow" />
</des:Calendar>