How to show multiple month in calender area

6 posts, 1 answers
  1. Nagisa
    Nagisa avatar
    14 posts
    Member since:
    Nov 2011

    Posted 30 Nov 2011 Link to this post

    I want to let Datepicker show multiple month in calender area when calender button pressed.

    In the overview ,"Telerik Silverlight DateTimePicker can be easily configured to show more than one month in the calendar area. Thus, you can make the navigation easier and faster." is written , but there is no reference about this.

    Is there any way to do it?

    Kind regards,
  2. Dani
    Admin
    Dani avatar
    848 posts

    Posted 30 Nov 2011 Link to this post

    Hello Nagisa,

    Setting the Columns property of RadCalendar will display multiple month views in the control. Please, check the following  RadCalendar style:

    <UserControl.Resources>
            <Style TargetType="telerik:RadCalendar" x:Key="CalendarStyle">
                <Setter Property="Columns" Value="3" />
            </Style>
        </UserControl.Resources>
      
        <Grid x:Name="LayoutRoot" Background="White">       
            <telerik:RadDateTimePicker InputMode="DatePicker" 
            VerticalAlignment="Center" HorizontalAlignment="Center" Width="200"
            CalendarStyle="{StaticResource CalendarStyle}" />
        </Grid>

    I hope it helps.

    Greetings,
    Dani
    the Telerik team
    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>
  3. DevCraft banner
  4. Nagisa
    Nagisa avatar
    14 posts
    Member since:
    Nov 2011

    Posted 30 Nov 2011 Link to this post

    Hello Dani ,

    Thank you for replying very much.

    I try to do the way. It does work.

    Another I want to know whether  I could center current month in the calendar area.

    for example:
    If I set Colunms with 3 of CalenarStyle.
    When I click calendar button , 2011/11 ,2011/12,2012/01 will be shown in the area (If today is 2011/11/30) now.
    Could it be shown as 2011/10(previous month), 2011/11(current month), 2011/12(next month)?

    Kind regards,
    Niwa
  5. Answer
    Dani
    Admin
    Dani avatar
    848 posts

    Posted 30 Nov 2011 Link to this post

    Hello Nagisa,

    You should change the DisplayDate of RadCalendar to point to the start date of the previous month. Please, consider the following example:
    <telerik:RadCalendar x:Name="calendar" Columns="3" 
            VerticalAlignment="Center" HorizontalAlignment="Center" 
            ViewsHeaderVisibility="Visible" 
            DisplayDate="10/01/2011 00:00:00" />

    I hope this will be helpful.

    Kind regards,
    Dani
    the Telerik team
    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>
  6. Nagisa
    Nagisa avatar
    14 posts
    Member since:
    Nov 2011

    Posted 30 Nov 2011 Link to this post

    Thank you very much for replying.

    The performance very close to what I want now.
    But there also is a problem with the header of Calender.

    I add the following source to handle DropDownOpened event for RadDateTimePicker.

    private void DatePicker_DropDownOpened(object sender, RoutedEventArgs args)
    {
        RadDateTimePicker picker = (RadDateTimePicker)sender;
        if (picker.SelectedValue == null)
            picker.DisplayDate = DateTime.Now.AddMonths(-1);
        else
            picker.DisplayDate = picker.SelectedValue.Value.AddMonths(-1);
    }



    And it worked as I want." 2011/10(previous month),2011/11(current month),2011/12(next month)" is shown.

    But there is a problem that "2011/10"(previous month) is shown in the header(title) as the date I set into DisplayDate for RadDateTimePicker.
    I want to let the content of header is  "2011/11"( the next month of DisplayDate). So that the current month will be looked to be centered.

    I guess if I could get the Button in the header, and add process to let the content of Button in the header be displayed as (DisplayDate + 1 month)?

    for example:
    If DisplayDate is set by 2011/10/30.
    "2011/10,2011/11,2011/12" will be shown in the calender area and "2011/11" (2011/10 + one month ) be shown in the header.

    Kind regards,
    Niwa

  7. Dani
    Admin
    Dani avatar
    848 posts

    Posted 05 Dec 2011 Link to this post

    Hi Nagisa,

    Since there are no available attached properties to bind the header of RadCalendar in a straightforward manner, you should edit the control template of RadCalendar to make any changes on the header content.

    What you can do is to replace the header with your own header. Inside the template there is a Button named Header:

    <Button x:Name="Header" Grid.Column="1" Style="{StaticResource CalendarHeaderButton}"/>

    You can hide that and place your own header. For example:
    <Button x:Name="Header" Grid.Column="1" Style="{StaticResource CalendarHeaderButton}" Visibility="Collapsed"/>
    <Button Grid.Column="1" Style="{StaticResource CalendarHeaderButton}" Content="Test this header."/>

    Further, you can bind the content of this new button to a DateTime property in your ViewModel to make sure it will always display the current month.

    I hope this will be helpful.

    Kind regards,
    Dani
    the Telerik team
    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>
Back to Top
DevCraft banner