Return to the menu   Select another DES Module

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.


Month on left; Year on right

Using AutoFormatMonthChangeButtonPositions="LeftOfRow1" AutoFormatYearChangeButtonPositions="RightOfRow1"

Previous Month Next Month
Previous Year Next Year
August 2020

Both Month and Year surrounding the calendar on row 3

Using AutoFormatMonthChangeButtonPositions="SurroundInRow3" AutoFormatYearChangeButtonPositions="SurroundInRow3"

Month only

Using AutoFormatMonthChangeButtonPositions="SurroundInRow2" AutoFormatYearChangeButtonPositions="Hidden"

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).

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" 
   AutoFormatYearChangeButtonPositions="RightOfRow1" >
<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" 
   AutoFormatYearChangeButtonPositions="SurroundInRow3" >
<h2>Month only</h2>
Using <span class="PropertyName">AutoFormatMonthChangeButtonPositions</span>="SurroundInRow2" 
<span class="PropertyName">AutoFormatYearChangeButtonPositions</span>="Hidden"<br/>
<des:Calendar ID="Calendar3" runat="server" 
   AutoFormatYearChangeButtonPositions="Hidden" >
<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).
<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"  />

Return to the menu   Select another DES Module