WPF Week Calendar DataTemplate

Question

I want to create a weekly calendar UserControl. In the end it should look something like this.

I have an ObservableCollection with Events. Each Event has an start DateTime and an end DateTime. I also have a Grid where I would like to place each event:

   <Grid x:Name="week_Grid" Margin="38,0,0,0" ShowGridLines="True">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>
</Grid>

Each column represents a week day. The button for each event must have the correct length and offset according to the start/end DateTimes also be in the correct column.

Currently all I managed to do is create a ListBox:

<ListBox Width="400" Margin="10" ItemsSource="{Binding Path=Events}">
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <StackPanel>
                        <TextBlock Text="{Binding Path=Id}" />
                        <TextBlock Text="{Binding Path=Start}" />
                        <TextBlock Text="{Binding Path=End}" />
                    </StackPanel>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>

But how can I freely position the elements in the grid, assign the correct GridColumn according to the day of the week and position it correctly at the correct time of the day? The Grid does not allow to set an ItemSource.

I also have to manage events that start on a different day than they end. These events need more then one button. Is it even possible to do this with DataTemplates or do I have to manually iterate over the event and create a buttons for each event manually? Which is the best approach?

if an event spans over 2 days, how do you plan to show it inside 1 grid column only? i fear that you have to play with a canvas and arrange somewhere there — Milan, Feb 07 '18 at 15:38
With Grid you would use `Children.Add();` then it will take the available space in that cell. If you want to span element then set the `Grid.ColumnSpan=2;`. And I wouldn't use the `ListBox` for it, more like a Label, so you can assign a Picture there if you want. You would have to have another grid in there that splits every half hour for good measure. — XAMlMAX, Feb 07 '18 at 15:42
And if you want solid lines for your grid then use [this SO link](https://stackoverflow.com/a/10869736/2029607). — XAMlMAX, Feb 07 '18 at 15:55

score 0 · Answer 1 · answered Feb 08 '18 at 09:32

I decided that it is not possible to do this with just a DataTemplate. I was not able to realise all the necessary logic (e.g. adding multiple elements for events spanning multiple days). I instead added an Event Handler in the View to do it manually:

private void EventsChanged(object sender, NotifyCollectionChangedEventArgs e)
{
       switch (e.Action)
       {
           case NotifyCollectionChangedAction.Add:
              break;
           case NotifyCollectionChangedAction.Replace:
              break;
           case NotifyCollectionChangedAction.Remove:
              break;
           case NotifyCollectionChangedAction.Reset:
              break;
           case NotifyCollectionChangedAction.Move:
              break;
       }
}

And simply passed it to the ViewModel:

public EventViewModel(System.Collections.Specialized.NotifyCollectionChangedEventHandler changed)
{
    ...
    Events = new ObservableCollection<Event>();
    Events.CollectionChanged += changed;
    ...
}

Taking care of the mentioned problems is then straight forward.

WPF Week Calendar DataTemplate

1 Answers1