How to style days in calendar control?

I have a need to style how a day looks, i.e. change colors, data that is displayed, etc. Since there are no samples yet, could you please explain how to do this? A sample would be great.

Hello

We are currently working on improving the API for styling days in a MonthCalendar to make it easier and more convenient. This should be available in the next update and I'll get back to you with code examples of how to do this.

Jason Fauchelle

Jason,

Any luck with generating some sample code for this?

thanks.

--lars

Hello lars

I have attached a sample of how to provide custom data to a CalendarControl and how to apply custom styles to days in month view, and months in year view. To run the sample, add a reference to Mindscape.MetroElements.

Data is provided by implementing the ICalendarDataProvider interface. The GetData method is where you can return whatever data you want for the given DateTime and the given CalendarViewBase (which lets you know the current view). An instance of your custom data provider can be used to set the CalendarControl.DataProvider property.

For the styling, you create a style for month view and a style for year view and either set the ItemTemplate or ItemTemplateSelector properties which lets you provide templates for the days in the month view, or the months in year view. Then you create a CalendarViewStyleSelector which bundles up these 2 styles so you can provide them to the CalendarControl via the ViewStyleSelector property.

Note that you can skip the ICalendarDataProvider step if all you want to do is change the item styles.

Let me know if you have further questions about these customizations.

Jason Fauchelle

Thank you Jason, I was able to use this as a basis for my specific day styling requirements.

One question remains: I can't quite figure out how to re-style or re-template certain elements of the view style. For instance, what properties do I use to get at the month title text style in month view? What about the forward/back selectors? Or, for that matter, just the background color of the day and month header borders (in the sample, they are picking up a purple color from somewhere...)

--lars

Hello lars

I've just added in a couple of new properties to help you with this. These properties will be available in the next nightly build.

CalendarControl now has a HeaderBackground property where you can set any background brush for the overall header.

MonthView now has a DayOfWeekHeaderTemplate property where you can provide a custom template for displaying the day-of-week headers (Mon, Tue ...) including changing the background color. You can set this property using a Setter on the MonthView style in the sample I posted last time. Here is an example:

  <ms:DayOfWeekToStringConverter x:Key="DayOfWeekConverter" />

  <DataTemplate x:Key="DayOfWeekTemplate">
    <Border Background="DarkBlue">
      <TextBlock Text="{Binding Converter={StaticResource DayOfWeekConverter}}" FontSize="24" Foreground="White" Margin="0,4,0,4" HorizontalAlignment="Center" />
    </Border>
  </DataTemplate>

  <Style x:Key="MonthViewStyle" TargetType="ms:MonthView">
    <Setter Property="ItemTemplateSelector" Value="{StaticResource DayTemplateSelector}" />
    <Setter Property="DayOfWeekHeaderTemplate" Value="{StaticResource DayOfWeekTemplate}" />
  </Style>

If you want to do more customizations to the header and navigation buttons beyond changing the color, you can look at generic.xaml in the install directory, search for "CalendarControl" and adapt a custom CalendarControl style from this code. Let me know if you need help with this.

Jason Fauchelle