Calendar Populate DataTemplateSelector from viewmodel

[peter]

Hi I am copying your example from the demos.

Calendar.Silverlight/FirstLook

You have this bit of code which populates the calendar with events. How do i go about using an observablecollection from my viewmodel. Here is your code

<local:EventsCollection x:Key="EventsList">
        <local:Event Day="2" Title="The Future Of Web Development"  Company="Telerik Inc - Boston, USA"
                             Description="Speaker: Tom Black; Start Time - 11.15 AM"  />
        <local:Event Day="2" Title="Blend For Silverlight Developers"  Company="Telerik Inc - Texas, USA"
                             Description="Speaker: Tom Black; Start Time - 4.00 PM"  />
        <local:Event Day="2" Title="Integrating WPF and WCF"  Company="Telerik Inc - Boston, USA"
                             Description="Speaker: Tom Wildermuth; Start Time - 1.00 PM"  />

        <local:Event Day="3" Title="What's new in WCF 4"  Company="Telerik Inc - Boston, USA"
                             Description="Speaker: Grace Becerra; Start Time - 10.00 AM"  />
        <local:Event Day="3" Title="The Future Of Web Development"  Company="Telerik Inc - Boston, USA"
                             Description="Speaker: Tom Black; Start Time - 11.15 AM"  />
        <local:Event Day="3" Title="Blend For Silverlight Developers"  Company="Telerik Inc - Texas, USA"
                             Description="Speaker: Tom Black; Start Time - 4.00 PM"  />
        <local:Event Day="4" Title="What's new in WCF 4"  Company="Telerik Inc - Boston, USA"
                             Description="Speaker: Grace Becerra; Start Time - 10.00 AM"  />
        <local:Event Day="4" Title="Multimedia in Silverlight 4"  Company="Telerik Inc - Boston, USA"
                             Description="Speaker: Jeremy Boatner; Start Time - 12.00 PM"  />
        <local:Event Day="5" Title="The Future Of Web Development"  Company="Telerik Inc - Boston, USA"
                             Description="Speaker: Tom Black; Start Time - 11.15 AM"  />
        <local:Event Day="5" Title="Multimedia in Silverlight 4"  Company="Telerik Inc - Boston, USA"
                             Description="Speaker: Jeremy Boatner; Start Time - 2.00 PM"  />
        <local:Event Day="5" Title="Blend For Silverlight Developers"  Company="Telerik Inc - Texas, USA"
                             Description="Speaker: Tom Black; Start Time - 4.00 PM"  />
        <local:Event Day="8" Title="Integrating WPF and WCF"  Company="Telerik Inc - Boston, USA"
                             Description="Speaker: Tom Wildermuth; Start Time - 9:45 AM" />
        <local:Event Day="8" Title="Blend For Silverlight Developers"  Company="Telerik Inc - Texas, USA"
                             Description="Speaker: Tom Black; Start Time - 2.00 PM"  />
        <local:Event Day="8" Title="Multimedia in Silverlight 4"  Company="Telerik Inc - Boston, USA"
                             Description="Speaker: Jeremy Boatner; Start Time - 4.00 PM"  />
        <local:Event Day="11" Title="The Future Of Web Development"  Company="Telerik Inc - Boston, USA"
                             Description="Speaker: Tom Black; Start Time - 11.15 AM"  />
        <local:Event Day="11" Title="Blend For Silverlight Developers"  Company="Telerik Inc - Texas, USA"
                             Description="Speaker: Tom Black; Start Time - 4.00 PM"  />

        <local:Event Day="14" Title="Integrating WPF and WCF"  Company="Telerik Inc - Boston, USA"
                             Description="Speaker: Tom Wildermuth; Start Time - 11.45 PM"  />
        <local:Event Day="14" Title="The Future Of Web Development"  Company="Telerik Inc - Boston, USA"
                             Description="Speaker: Tom Black; Start Time - 1.15 PM"/>
        <local:Event Day="14" Title="Multimedia in Silverlight 4"  Company="Telerik Inc - Boston, USA"
                             Description="Speaker: Jeremy Boatner; Start Time - 3.00 PM"  />


        <local:Event Day="15" Title=" Windows Phone 7 Development"  Company="Telerik Inc - Texas, USA"
                             Description="Speaker: Brenda Smith; Start Time - 12:00 AM"  />
        <local:Event Day="15" Title="Integrating WPF and WCF"  Company="Telerik Inc - Boston, USA"
                             Description="Speaker: Tom Wildermuth; Start Time - 1.00 PM"  />

        <local:Event Day="17" Title="The Future Of Web Development"  Company="Telerik Inc - Boston, USA"
                             Description="Speaker: Tom Black; Start Time - 11.15 AM"  />
        <local:Event Day="17" Title="Blend For Silverlight Developers"  Company="Telerik Inc - Texas, USA"
                             Description="Speaker: Tom Black; Start Time - 1:30 PM"  />
        <local:Event Day="17" Title="What's new in WCF 4"  Company="Telerik Inc - Boston, USA"
                             Description="Speaker: Grace Becerra; Start Time - 3.00 PM"  />

        <local:Event Day="24" Title="Integrating WPF and WCF"  Company="Telerik Inc - Boston, USA"
                             Description="Speaker: Tom Wildermuth; Start Time - 12.00 AM"  />
        <local:Event Day="24" Title="The Future Of Web Development"  Company="Telerik Inc - Boston, USA"
                             Description="Speaker: Tom Black; Start Time - 2.15 PM"/>
        <local:Event Day="24" Title=" Windows Phone 7 Development"  Company="Telerik Inc - Texas, USA"
                             Description="Speaker: Brenda Smith; Start Time - 5:00 PM"  />

        <local:Event Day="25" Title="Blend For Silverlight Developers"  Company="Telerik Inc - Texas, USA"
                             Description="Speaker: Tom Black; Start Time - 10.00 AM"  />
        <local:Event Day="25" Title="Integrating WPF and WCF"  Company="Telerik Inc - Boston, USA"
                             Description="Speaker: Tom Wildermuth; Start Time - 1.00 PM"  />
        <local:Event Day="25" Title=" Windows Phone 7 Development"  Company="Telerik Inc - Texas, USA"
                             Description="Speaker: Brenda Smith; Start Time - 3:00 PM"  />
        <local:Event Day="27" Title="What's new in WCF 4"  Company="Telerik Inc - Boston, USA"
                             Description="Speaker: Grace Becerra; Start Time - 10.00 AM"  />
        <local:Event Day="27" Title="Blend For Silverlight Developers"  Company="Telerik Inc - Texas, USA"
                             Description="Speaker: Tom Black; Start Time - 2.00 PM"  />

        <local:Event Day="28" Title="Integrating WPF and WCF"  Company="Telerik Inc - Boston, USA"
                             Description="Speaker: Tom Wildermuth; Start Time - 1.00 PM"  />
        <local:Event Day="28" Title="The Future Of Web Development"  Company="Telerik Inc - Boston, USA"
                             Description="Speaker: Tom Black; Start Time - 2:00 PM"/>
        <local:Event Day="28" Title=" Windows Phone 7 Development"  Company="Telerik Inc - Texas, USA"
                             Description="Speaker: Brenda Smith; Start Time - 4:00 PM"  />

    </local:EventsCollection>
    <CollectionViewSource x:Key="EventsView" x:Name="EventsList" Filter="EventsList_Filter" Source="{StaticResource EventsList}" />
    <local:EventDayTemplateSelector x:Key="EventDayTemplateSelector" EventsCollection="{StaticResource EventsList}">
        <local:EventDayTemplateSelector.DefaultTemplate>
            <DataTemplate>
                <TextBlock Text="{Binding Text}" />
            </DataTemplate>
        </local:EventDayTemplateSelector.DefaultTemplate>
        <local:EventDayTemplateSelector.EventTemplate>
            <DataTemplate>
                    <TextBlock Text="{Binding Text}" Foreground="#FF000000" FontWeight="Bold" />
            </DataTemplate>
        </local:EventDayTemplateSelector.EventTemplate>
    </local:EventDayTemplateSelector>

You have hardcoded your events section, however please show me how this will be done when populating from a database or viewmodel. Thanks

[Lancelot]

Hi Peter,

To swap out the sample data and use another viewmodel in the calendar example, you'll need to change the ItemsSource property of the control. 

In the example they bind the listbox to a StaticResource named EventsView. Here is the code from the example:

<qsf:HeaderedContentControl Grid.Column="1" Header="Events" Margin="-1 0 0 0">

            <Grid>

<!-- Notice the ItemsSource property -->

                <ListBox x:Name="myEventsList" Style="{StaticResource ListBoxStyle}" ItemsSource="{Binding Source={StaticResource EventsView}}" />

                <TextBlock x:Name="EmptyContent" Margin="20" HorizontalAlignment="Center" VerticalAlignment="Center" Text="There are no upcoming events for this date." FontStyle="Italic" FontSize="12" Foreground="#FF666666" />

            </Grid>

        </qsf:HeaderedContentControl>

The example binds the listbox and the calender to a static collection. You can swap out what collection it is bound to. Lets say your ViewModel has an ObservableCollection named "MyCustomCalendar". You can replace the CollectionViewSource inside of the UserControl.Resources section of the page. Here's how...

Locate this section in the UserControl.Resources section at the top of the page (It's directly below the local:EventsCollection you mentioned in your question).

<CollectionViewSource x:Key="EventsView" x:Name="EventsList" Filter="EventsList_Filter" Source="{StaticResource EventsList}" />

Now notice  Source="{StaticResource EventsList}"

You need to use your ObservableCollection here in place of the StaticResource. 

 Here's how to plug yours in...

Source="{Binding MyCustomCalendar}"


As long as your ViewModel is properly setup (look at the bindings in the listbox itemTemplate, it's the first thing in the UserControl.Resources section).  This code block shows the ItemTemplate the listbox uses.

<DataTemplate x:Key="EventTemplate">
            <StackPanel Orientation="Vertical" Width="281" HorizontalAlignment="Left">
                <TextBlock x:Name="EventDate" TextWrapping="Wrap" Foreground="#FF000000" FontWeight="Bold" FontSize="11" Text="{Binding FormatedDate}" />
                <TextBlock x:Name="EventCompanyBranch" TextWrapping="Wrap" Foreground="#FF686868"  FontSize="11" Text="{Binding Company}"/>
                <TextBlock x:Name="EventTitle" TextWrapping="Wrap" Margin="0,4" FontSize="11" Text="{Binding Title}" />
                <TextBlock x:Name="EventDetails" TextWrapping="Wrap" FontSize="11" Text="{Binding Description}" />
            </StackPanel>
        </DataTemplate>

Add your own listbox ItemTemplate in there, or change the items in your viewmodel to match. If these dont line up, the UI wont know what to display. For instance, if your viewModel doesnt have the "FormattedDate", "Company", "Title" or "Description" properties in the collection, it wont work.

Click on this link to get the example app I've written for you. Open the task list and go to the first comment. I've left comments throughout the app to guide you. Let me know if you are still having trouble and we can take it a step further if you provide me with the collection you want to bind.

Example Source Code 
http://dl.dropbox.com/u/47517502/PeterCalendarExample.zip

Good Luck!
Lancelot

[Egemen]

Hi,

The zip file file doesn't exist in dropbox. Can you upload this example in telerik ressources or dropbox again please ?

Best regards