This is a migrated thread and some comments may be shown as answers.

How to show multiple month in calender area

5 Answers 203 Views
DateTimePicker
This is a migrated thread and some comments may be shown as answers.
Nagisa
Top achievements
Rank 1
Nagisa asked on 30 Nov 2011, 07:53 AM
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,

5 Answers, 1 is accepted

Sort by
0
Dani
Telerik team
answered on 30 Nov 2011, 09:05 AM
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 >>
0
Nagisa
Top achievements
Rank 1
answered on 30 Nov 2011, 09:33 AM
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
0
Accepted
Dani
Telerik team
answered on 30 Nov 2011, 10:40 AM
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 >>
0
Nagisa
Top achievements
Rank 1
answered on 01 Dec 2011, 05:11 AM
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

0
Dani
Telerik team
answered on 05 Dec 2011, 05:22 PM
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 >>
Tags
DateTimePicker
Asked by
Nagisa
Top achievements
Rank 1
Answers by
Dani
Telerik team
Nagisa
Top achievements
Rank 1
Share this question
or