How to use CalenderView in UWP MVVM

Question

I want to bind the selected Calender View Item and set it to a DateTime Variable.

My CalenderView Xaml looks like:

<CalendarView Grid.Row="6"  Grid.ColumnSpan="2"  VerticalAlignment="Center" HorizontalAlignment="Center" FontSize="20"/>

I have an DateTime item in the Datacontext class:

    private DateTime _DueDate;
    public DateTime DueDate
    {
        get { return this._DueDate; }
        set
        {
            if (this._DueDate != value)
            {
                this._DueDate = value;
                base.PropertyOnChanged("DueDate");
            }
        }
    }

And the DateTimeConverter:

    public class DateConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, string language)
    {
        DateTime date = ((DateTime)value);
        return date.Day + "." + date.Month + "." + date.Year;
    }

    public object ConvertBack(object value, Type targetType, object parameter, string language)
    {
        return DateTime.Parse((string)value);
    }
}

Here is also the Doc to the Calender View:

CalenderView MSDN

In the Docs is a Property SelectedDate, but I only see in the XAML SelectedDateChanged EventHandler. But I want to do it in MVVM.

My Problem is I don´t know on which Property I can set the Binding. I looked in the Doc but I only find the Date="" property from the DatePicker but I don´t find anything to the CalenderView.

UPDATE

Following to the Comment from

@Juo Zuo:"CalendarView has a SelectedDates property. Usually, we can use this property to set the selected date like: MyCalendarView.SelectedDates.Add(new DateTime(2016, 5, 5));. However this property is read-only, we can't use it for binding. So, I'm afraid there is no way to set selected dates with Binding"

I would expand the Question.

My Question is:

Is there any way to use the Calender View with the MVVM Pattern from MSDN ?

You can bind to the `SelectedDate` of the Calendar. `SelectedDate="{Binding Path=DueDate,Converter={StaticResource DateConverter }}"` — Lithium, May 16 '16 at 16:01
There is no SelectedDate only SelectedDateChanges EventHandler — FoldFence, May 16 '16 at 16:08
Mhm is there a way to use Calenderview in MVVM with ICommand ? like ´calenderview c = sender as CalenderView; DateTime d = c.Selecteddates;´ — FoldFence, May 17 '16 at 08:35

score 4 · Accepted Answer · answered May 18 '16 at 22:13

All you need to do is to create an attached property and encapsulate the SelectedDates.Add logic within it.

public static class CalendarViewHelper
{
    public static IList<DateTimeOffset> GetSelectedDates(DependencyObject obj)
    {
        return (IList<DateTimeOffset>)obj.GetValue(SelectedDatesProperty);
    }

    public static void SetSelectedDates(DependencyObject obj, IList<DateTimeOffset> value)
    {
        obj.SetValue(SelectedDatesProperty, value);
    }

    public static readonly DependencyProperty SelectedDatesProperty =
        DependencyProperty.RegisterAttached("SelectedDates", typeof(IList<DateTimeOffset>), typeof(CalendarView), 
            new PropertyMetadata(null, (d, e) =>
            {
                var cv = d as CalendarView;
                var dates = e.NewValue as IList<DateTimeOffset>;

                if (cv != null && dates != null)
                {
                    foreach (var date in dates)
                    {
                        cv.SelectedDates.Add(date);
                    }
                }
            }));
}

<CalendarView local:CalendarViewHelper.SelectedDates="{x:Bind Dates, Mode=OneWay}" />

If your Dates property has more than one items inside, make sure you change the SelectionMode to Multiple.

@SeeuD1, sure let me know how you go. – Justin XL May 20 '16 at 00:28 — Justin XL, May 20 '16 at 00:28

How to use CalenderView in UWP MVVM

1 Answers1

Linked