UWP : Binding selected date in calendarview

Question

I want to do a two way bind from my ViewModel to selected date (single) in my XAML calendarview. But we have no dependency properties to do it.

What to do ?

EDIT: the code I tried but I got Error. Its the combination of these two topics: How to use CalenderView in UWP MVVM How to select rang of dates on finger slide on Calendar Control - UWP Win10 VS2015 XAML:

<CalendarView  MinHeight="250" MaxHeight="500" MaxWidth="720"   FontWeight="Normal" 
             DayItemFontWeight="Light" MinWidth="100"
                          SelectionMode="Single"
                          Style="{StaticResource Mahcalenderstyle}" Visibility="Visible" 
             HorizontalAlignment="Stretch" x:Name="MyCalendarView" DisplayMode="Month" Margin="9,25,9,0"
             VerticalAlignment="Top" SelectedDatesChanged="CalendarView_SelectedDatesChanged"
             CalendarViewDayItemStyle="{StaticResource CalendarViewDayItemStyle1}"
                          />

And my VM:

 private DateTimeOffset _selecteddate;
    public DateTimeOffset SelectedDate
    {
        get
        {
            return _selecteddate;

        }
        set
        {

            if (_selecteddate != value)
            {
                _selecteddate = value;
                if (PropertyChanged != null)
                {
                    PropertyChanged(this,
                        new PropertyChangedEventArgs("SelectedDate"));
                }
            }
        }
    }
    public CalendarViewModel()
    {

        SelectedDate = DateTimeOffset.Now;}

The helper:

 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);
                    }
                }
            }));

}

@NoorAShuvo Nothind that special. I found nothing :( http://stackoverflow.com/questions/37258070/how-to-use-calenderview-in-uwp-mvvm I did it but did not work — Mohsen, May 02 '17 at 15:50
Any reason that you can't use a CalendarDatePicker? That has a SelectedDate property that can be bound to. — Mark W, May 02 '17 at 17:36
@Mohsen Refer this link http://stackoverflow.com/questions/37258070/how-to-use-calenderview-in-uwp-mvvm — Archana, May 03 '17 at 10:39
I can't find where you have used `SelectedDate` in your xaml. — Justin XL, May 03 '17 at 11:23
@JustinXL There is no DependencyProperty for that. So we can not declare it from XAML. But we can do it in C# code behind — Mohsen, May 03 '17 at 11:25
@JustinXL I did it by an attached property, but it failed :| — Mohsen, May 03 '17 at 11:26
Possible duplicate of [How to use CalenderView in UWP MVVM](http://stackoverflow.com/questions/37258070/how-to-use-calenderview-in-uwp-mvvm) — Archana, May 03 '17 at 13:34
@Archana There is some differences. And for VM I should use compiled binding — Mohsen, May 03 '17 at 13:51

score 3 · Accepted Answer · answered May 03 '17 at 11:47

You need to create an attached property of a DateTimeOffset, not an IList<DateTimeOffset> since you only want to select one date.

So instead of the code you copied over from my other answer, you will need something like this -

public static class CalendarViewHelper
{
    public static DateTimeOffset GetSelectedDate(DependencyObject obj)
    {
        return (DateTimeOffset)obj.GetValue(SelectedDateProperty);
    }

    public static void SetSelectedDate(DependencyObject obj, DateTimeOffset value)
    {
        obj.SetValue(SelectedDateProperty, value);
    }

    public static readonly DependencyProperty SelectedDateProperty =
        DependencyProperty.RegisterAttached("SelectedDate", typeof(DateTimeOffset), typeof(CalendarView),
            new PropertyMetadata(null, (d, e) =>
            {
                var cv = (CalendarView)d;
                var date = (DateTimeOffset)e.NewValue;

                cv.SelectedDates.Clear();
                cv.SelectedDates.Add(date);
            }));
}

Note you will need to call Clear to clear all the previously selected date(s) because the SelectionMode is set to Single, without doing so, an error will be thrown.

Then you will just need to hook it up in xaml with your SelectedDate property.

<CalendarView SelectionMode="Single"
                  DisplayMode="Month"
                  local:CalendarViewHelper.SelectedDate="{x:Bind SelectedDate, Mode=OneWay}" />

Hey, I got the same error as before in this.InitializeComponent(); Windows.UI.Xaml.Markup.XamlParseException: 'The text associated with this error code could not be found. Failed to assign to property 'Denna.Classes.CalendarViewHelper.SelectedDate'. [Line: 60 Position: 58]' — Mohsen, May 03 '17 at 13:07
I donno why when I x:bind from local property it does fine, but when I use binding from my VM it goes into issue :( — Mohsen, May 03 '17 at 13:17

UWP : Binding selected date in calendarview

1 Answers1