title: My style/control template out my calendar's blackout dates
body: <p>My C#/WPF project needs a calendar. We're going to be using it to pick a range of dates for appointment scheduling. I'm told the default calendar is too small to be used by some of our reps so I've been working on resizing it.</p>
  
  <pre><code>&lt;toolkit:Calendar Grid.Row="1" x:Name="DateWindowCalendar" 
     BorderBrush="White" BorderThickness="0"
     Style="{StaticResource PopupCalendarStyle}" 
     DisplayMode="Month" SelectionMode="SingleRange"
     DisplayDateStart="{Binding FirstDayOfMonth}"
     AutomationProperties.AutomationId="ToolkitCalendarId"  
     VerticalAlignment="Top"&gt;
   &lt;/toolkit:Calendar&gt;
  </code></pre>
  
  <p>And I've created this styling:</p>
  
  <pre><code>&lt;Style x:Key="PopupCalendarStyle" TargetType="toolkit:Calendar"&gt;
    &lt;Setter Property="Template"&gt;
      &lt;Setter.Value&gt;
        &lt;ControlTemplate TargetType="toolkit:Calendar"&gt;
          &lt;StackPanel Margin="0" HorizontalAlignment="Center" x:Name="Root"&gt;
            &lt;toolkit:Calendar x:Name="Calendar" 
               SelectedDate="{TemplateBinding SelectedDate}"
               DisplayDateStart="{TemplateBinding DisplayDateStart}"
               SelectionMode="{TemplateBinding SelectionMode}"
               Background="{TemplateBinding Background}" 
               BorderBrush="{TemplateBinding BorderBrush}"
               BorderThickness="{TemplateBinding BorderThickness}"
               SelectedDatesChanged="Calendar_SelectedDatesChanged"&gt;
  
               &lt;toolkit:Calendar.CalendarDayButtonStyle&gt;
                 &lt;Style&gt;
                   &lt;Setter Property="Button.Height" Value="34"/&gt;
                   &lt;Setter Property="Button.Width" Value="34" /&gt;
                   &lt;Setter Property="Button.FontSize" Value="16" /&gt;
                 &lt;/Style&gt;
                &lt;/toolkit:Calendar.CalendarDayButtonStyle&gt;
  
                &lt;toolkit:Calendar.CalendarButtonStyle&gt;
                  &lt;Style&gt;
                    &lt;Setter Property="Button.Height" Value="34"/&gt;
                    &lt;Setter Property="Button.Width" Value="34"/&gt;
                    &lt;Setter Property="Button.FontSize" Value="16"/&gt;
                  &lt;/Style&gt;
                &lt;/toolkit:Calendar.CalendarButtonStyle&gt;
  
              &lt;/toolkit:Calendar&gt;
            &lt;/StackPanel&gt;
          &lt;/ControlTemplate&gt;
        &lt;/Setter.Value&gt;
      &lt;/Setter&gt;               
    &lt;/Style&gt;
  </code></pre>
  
  <p>Everything is almost perfect. I specify my range, I can track the selected dates (granted using the SelectedDatesChanged event instead of the SelectedDates property.</p>
  
  <p>The problem is I also need to be able to set blackout dates (usually the period between first of the month and today although sometimes first of the month to a few days from now). </p>
  
  <p>Without the styling, this works:</p>
  
  <pre><code>DateWindowCalendar.BlackoutDates.Add(new CalendarDateRange(
     new DateTime(DateTime.Now.Year, DateTime.Now.Month, 01), DateTime.Now));
  </code></pre>
  
  <p>But when I add the style, I don't get the black out displays being displayed and worse its possible to select the blackout dates.</p>
  
  <p>I'm not sure what I missed but I'm hoping someone has an easy answer so that I don't have to rebuild the entire widget. </p>
  
  <p>Any help is appreciated.</p>
  
  <p>Thanks,</p>
  
  <p>Chris</p>