Showing Multiple Day Appointments

The AppointmentsCoverPane control visually represents a set of appointments that fit in a time range exposed by a current view, and to draw appointment boxes relative to user interface (UI) elements representing C1Scheduler.VisualIntervals covered by the appointment. This control, when placed somewhere inside a C1Scheduler visual tree, usually in the C1Scheduler's ControlTemplate, provides a surface where appointment boxes are drawn relative to the UI for C1Scheduler.VisualIntervals. The AppointmentsCoverPane control is able to recognize the case when an appointment box must be divided into two or more visual boxes. For example, in Month view, if an appointment covers three days, AppointmentsCoverPane will automatically draw three boxes in each corresponding day of the appointment.

The content of an AppointmentsCoverPane appointment box is represented by the DataTemplate defined in the C1Scheduler.IntervalAppointmentTemplate property.

The AppointmentsCoverPane control provides functionality for an arbitrary UI representing C1Scheduler.VisualIntervals. To make this possible, each element that can be treated as a VisualInterval UI representative, usually an outer (root) element in the C1Scheduler.VisualIntervalTemplate definition, and must have the attached CoverElementsPane.OrientationProperty field assigned. Note that CoverElementsPane is the base class for the AppointmentsCoverPane class. The assigned value indicates a chronological flow direction of interval elements and can take Horizontal or Vertical values. For example, interval elements in the Working Week View will have it assigned to Vertical, while elements of Month View assign it to Horizontal.

The C1Scheduler visual tree can contain several AppointmentsCoverPanes. For example, the default DayView template contains one AppointmentsCoverPane to display all-day events in day headers and the second AppointmentsCoverPane to display short appointments over the time slots. To filter appointments which should be displayed by the AppointmentsCoverPane, assign the AppointmentsCoverPane.Appointmentfilter attached property and the CoverElementsPane.PaneName attached property to the C1Scheduler.VisualIntervalTemplate definition. The AppointmentsCoverPane.Appointmentfilter attached property can be set to AppointmentFilterEnum.Event (show only all-day and multiple-day appointments), AppointmentFilterEnum.Appointment (show only appointments with a duration of 24 hours or less) and AppointmentFilterEnum.All values. The CoverElementsPane.PaneName property should be set to the name of the AppointmentsCoverPane object that should display an appointment. For example:

Silverlight

XAML	Copy Code
<Setter Property="c1sched:C1Scheduler.VisualIntervalTemplate"> <Setter.Value> <DataTemplate> <Border Background="{Binding Path=StatusBrush}" Opacity="0.3" c1sched:AppointmentsCoverPane.AppointmentFilter="Appointment" c1sched:CoverElementsPane.Orientation="Vertical" c1sched:CoverElementsPane.PaneName="appPane" MinHeight="20"/> </DataTemplate> </Setter.Value> </Setter>

XAML

Copy Code

<Setter Property="c1sched:C1Scheduler.VisualIntervalTemplate">
 <Setter.Value>
   <DataTemplate>
      <Border Background="{Binding Path=StatusBrush}" Opacity="0.3"
              c1sched:AppointmentsCoverPane.AppointmentFilter="Appointment"
              c1sched:CoverElementsPane.Orientation="Vertical"
              c1sched:CoverElementsPane.PaneName="appPane" MinHeight="20"/>
   </DataTemplate>
 </Setter.Value>
</Setter>

WPF

XAML	Copy Code
<Setter Property="local:C1Scheduler.VisualIntervalTemplate"> <Setter.Value> <DataTemplate> <Border x:Name="IntervalBorder" SnapsToDevicePixels="True" Background="{Binding Path=Scheduler.Theme.WorkHourBrush}" BorderBrush="{Binding Path=Scheduler.Theme.WorkHourLightBorderBrush}" BorderThickness="0,1px,0,0" local:AppointmentsCoverPane.AppointmentFilter="Appointment" local:CoverElementsPane.Orientation="Vertical" local:CoverElementsPane.PaneName="appPane" MinHeight="20"> <Border.InputBindings> <MouseBinding MouseAction="LeftDoubleClick" Command="local:C1Scheduler.NewAppointmentDialogCommand"/> </Border.InputBindings> </Border> <DataTemplate.Triggers> <DataTrigger Binding="{Binding Path=IsSelected}" Value="True"> <Setter TargetName="IntervalBorder" Property="Background" Value="{Binding Path=Scheduler.Theme.SelectedSlotBrush}" /> </DataTrigger> </DataTemplate.Triggers> </DataTemplate> </Setter.Value> </Setter>

XAML

Copy Code

<Setter Property="local:C1Scheduler.VisualIntervalTemplate">
    <Setter.Value>     
      <DataTemplate>
        <Border x:Name="IntervalBorder" SnapsToDevicePixels="True"
              Background="{Binding Path=Scheduler.Theme.WorkHourBrush}"
                    BorderBrush="{Binding Path=Scheduler.Theme.WorkHourLightBorderBrush}"
                    BorderThickness="0,1px,0,0"
                    local:AppointmentsCoverPane.AppointmentFilter="Appointment"
                    local:CoverElementsPane.Orientation="Vertical"
                    local:CoverElementsPane.PaneName="appPane"
                    MinHeight="20">
          <Border.InputBindings>
            <MouseBinding MouseAction="LeftDoubleClick"
                Command="local:C1Scheduler.NewAppointmentDialogCommand"/>
          </Border.InputBindings>
        </Border>
        <DataTemplate.Triggers>
          <DataTrigger Binding="{Binding Path=IsSelected}" Value="True">
            <Setter TargetName="IntervalBorder" Property="Background"
                    Value="{Binding Path=Scheduler.Theme.SelectedSlotBrush}" />
          </DataTrigger>
        </DataTemplate.Triggers>
      </DataTemplate>
    </Setter.Value>
  </Setter>