Return to the menu   Select another DES Module

Demonstrates several layouts of command buttons in the footer

The calendar has numerous commands available as keyboard shortcuts, in the context menu or in the Help button. In addition, these commands can appear as buttons footer of the calendar:

  • Today - Select today's date
  • Special - Selects an optional date that shows up with different style sheets. In this example, its set to Today + 10 days.
  • Clear - Unselect the cell
  • Apply - Basically an OK button to indicate changes are accepted. It is not shown unless you set Calendar.AllChangesNotify=ApplyCmd.
  • Show Selection - Display the month containing the selected date.

The following properties host the features of each command: TodayCommand, SpecialCommand ClearCommand, ApplyCommand, and ShowSelectionCommand.

These Command properties can be customized in several ways:

  • 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.
  • CommandName - The name of the command as it appears in the context menu.
  • MenuKeys - The keyboard shortcut.Only one keystroke must be hit to execute a command. However, you can define multiple keystrokes, each to run the same command. You can also assign these terms: ENTER, ESC, SPACE, PAGEUP, PAGEDOWN, HOME, END, F1..F12, and DELETE. If you set this property to an empty string, no keystroke will support that command. However, the context menu will still offer this command.
    These commands also support the Control key modifier. Put “CTRL+” before the character. For example, “CTRL+T”.
  • ShowCommandInMenu - Show or hide the command in the context menu.

Controls

Each of these examples include the CurrentDateLabel which also appears in the footer.

Example 1

Previous Month
Next Month
April 2024 Select a Different Month
SunMonTueWedThuFriSat
31123456
78910111213
14151617181920
21222324252627
2829301234
567891011
Today Clear Apply
Show
Special


Example 2

Previous Month
Next Month
April 2024 Select a Different Month
SunMonTueWedThuFriSat
31123456
78910111213
14151617181920
21222324252627
2829301234
567891011
Today
Clear
Special


Example 3

Previous Month
Next Month
April 2024 Select a Different Month
SunMonTueWedThuFriSat
31123456
78910111213
14151617181920
21222324252627
2829301234
567891011
Today Special Clear
Show

Source Code (C#)

<script runat="server">
protected void Page_Load(object sender, EventArgs e) { Calendar1.SpecialDate = DateTime.Today.AddDays(10); Calendar2.SpecialDate = DateTime.Today.AddDays(10); Calendar3.SpecialDate = DateTime.Today.AddDays(10); }
</script> Each of these examples include the <a href="Format of CurrentDateLabel.aspx" class="PropertyName">CurrentDateLabel</a> which also appears in the footer.<br/><br/> <h2>Example 1</h2> <des:Calendar ID="Calendar1" runat="server" AllChangesNotify="ApplyCmd"> <ApplyCommand ShowField="FooterRow1" /> <ClearCommand ShowField="FooterRow1" /> <TodayCommand ShowField="FooterRow1" /> <ShowSelectionCommand ShowField="FooterRow2" /> <SpecialCommand ShowField="FooterRow2" /> <CurrentDateLabel ShowField="FooterRow3" /> </des:Calendar> <br/><br/> <h2>Example 2</h2> <des:Calendar ID="Calendar2" runat="server"> <CurrentDateLabel ShowField="FooterRow1" RegionInRow="Left" OrderInRegion="5" Width="100px" /> <TodayCommand ShowField="FooterRow1" RegionInRow="Left" OrderInRegion="10" /> <ClearCommand ShowField="FooterRow1" RegionInRow="Right" /> <SpecialCommand ShowField="FooterRow2" RegionInRow="Right" /> </des:Calendar> <br/><br/> <h2>Example 3</h2> <des:Calendar ID="Calendar3" runat="server" Width="300px"> <ApplyCommand ShowField="RecommendedRow" /> <ClearCommand ShowField="RecommendedRow" /> <TodayCommand ShowField="RecommendedRow" /> <ShowSelectionCommand ShowField="RecommendedRow" /> <SpecialCommand ShowField="RecommendedRow" /> <CurrentDateLabel ShowField="RecommendedRow" /> </des:Calendar>

Return to the menu   Select another DES Module