RadCalendar for ASP.NET
Contents
Customizing Navigation Send comments on this topic.
See Also
Customizing Behavior > Customizing Navigation

Glossary Item Box

Telerik RadCalendar provides three types of navigation, which allows you to switch and jump to new views (months):

  • Previous/next month - allows you to go to the pervious/next view (month) by clicking the "<" or ">" buttons
  • Jump X months forward/backward - allows you to jump X views (one view can have several months if Multiview Mode is enabled) forward or backward when you click the "<<" or ">>" buttons. The jump step is specified in the FastNavigationStep property.
    In case of multiview with two months and FastNavigationStep="2", Telerik RadCalendar will jump 4 instead of 2 months ahead.  If it initially shows January and February, after one click on the fast navigation button, Telerik RadCalendar will show May and June.
  • Month and Year selector - allows you to specify the month and year directly from a popup window, which can be opened when you click on the calendar header.
     

You can customize the navigation buttons for previous/next and jump forward/backward using several properties like FastNavigationNextImage, FastNavigationNextText, FastNavigationNextToolTip, FastNavigationStep, etc.

Since Calendar v2.0, FastNavigation Year/Month popup could be disabled - use EnableMonthYearFastNavigation to achieve this.

 

  FastNavigationPrevImage

   NavigationPrevImage
    NavigationNextImage

   FastNavigationNextImage

 

To remove the FastNavigation buttons ('<<', '>>') from Calendar header, FastNavigation Image and Text properties could be set as blank:

ASPX Copy Code
       <rad:RadCalendar ID="RadCalendar1" runat="server" FastNavigationNextImage="" FastNavigationNextText=""
           FastNavigationPrevImage= "" FastNavigationPrevText="" FastNavigationStep="0" NavigationCellPadding="0">
       </rad:RadCalendar>
                            

 

 

Applying Styles to the Fast Date Navigation Object.

The fast navigation object manages the flow of the content in the main visible area. The source code below shows the CSS classes of the table which defines the style for the fast navigation object.

 
 

Here are some sample classes used applied for the Default skin:

CSS Copy Code
.MonthYearFastNav_Default
{
     border: 1px solid black;
     ;
     font: normal 10px Verdana;
     color: #000000;
}

.MonthYearFastNav_Default TD
{
     text-align: center;
     vertical-align: middle;
     border: 2px solid #ffffff;
     cursor: hand;
}

.MonthYearFastNav_Default TD.selected
{
     border-color: orange;
     background-color: orange;
     color: #ffffff;
}

.MonthYearFastNav_Default TD.bottom
{
     text-align: right;
}

.MonthYearFastNav_Default TD INPUT
{
     font: normal 10px Verdana;
     color: #000000;
}

See Also