Highlighting days in a XamForms Calendar

Issue

I have made a Xamarin app that allows me to choose a date in a DatePicker and and save it to a Database using SQLite. I then get those dates and show them in a ListView, and I was wondering if its possible to highlight the days that are in the database onto the Calendar?

This is what is used to save the data

    void SaveButton_OnClicked(object sender, EventArgs e)
    {

        Birthdays brithday = new Birthdays()
        {
            FirstName = fNameEntry.Text,
            LastName = lNameEntry.Text,
            Date = datePicker.Date
        };

        using (SQLiteConnection conn = new SQLiteConnection(App.FilePath))
        {
            conn.CreateTable<Birthdays>();
            int rowsAdded = conn.Insert(brithday);               
        }
        DisplayAlert("Alert", "Birthday has been saved to database", "OK");
    }

And this to load it into the ListView

    private async void NavigateButton_OnClicked(object sender, EventArgs e)
    {
        await Navigation.PushAsync(new Page1());
    }

    protected override void OnAppearing()
    {

        base.OnAppearing();
        using(SQLiteConnection conn = new SQLiteConnection(App.FilePath))
        {
            conn.CreateTable<Birthdays>();
            var birthday = conn.Table<Birthdays>().ToList();
            birthdayListView.ItemsSource = birthday; 
        }
    }

And this is my XML im using to load the Calendar and the ListView on the home page.

<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" BackgroundColor="{AppThemeBinding Dark=Black, Light=White}" xmlns:controls="clr-namespace:XamForms.Controls;assembly=XamForms.Controls.Calendar" xmlns:d="http://xamarin.com/schemas/2014/forms/design" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" mc:Ignorable="d" x:Class="Mobile_App.MainPage">
    <ContentPage.ToolbarItems>
        <ToolbarItem
            Text="Settings"
            Clicked="ToolbarItem_Clicked"
            ></ToolbarItem>
    </ContentPage.ToolbarItems>
    <StackLayout>
        <!-- Place new controls here -->
        <controls:Calendar DatesBackgroundColor="{AppThemeBinding Dark=Black, Light=White}"  DatesTextColor="{AppThemeBinding Dark=White, Light=Black}" BackgroundColor="{AppThemeBinding Dark=Black, Light=White}" Padding="10,0,10,0" SelectedBorderWidth="4" DisabledBorderColor="Black" ShowNumberOfWeek="false" StartDay="Sunday" TitleLabelTextColor="Purple" TitleLeftArrowTextColor="MediumVioletRed" TitleRightArrowTextColor="MediumVioletRed" SpecialDates="{Binding Date}"  DateCommand="{Binding DateChosen}" />
        <Label Text="Welcome to the Birthday App!" HorizontalOptions="Center" VerticalOptions="CenterAndExpand" />
        <Button Text="Add a birthday" AnchorX="1" AnchorY="1" Clicked="NavigateButton_OnClicked"  />
        <Switch  AnchorX="1" AnchorY="1" IsToggled="False" Toggled="Switch_Toggled"  />
        <ListView HeightRequest="250" WidthRequest="50" BackgroundColor="{AppThemeBinding Dark=Black, Light=#444343}" x:Name="birthdayListView">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <TextCell                                 
                              Text="{Binding FullName}"
                              Detail="{Binding Date}"
                              DetailColor="YellowGreen">
                    </TextCell>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </StackLayout>
</ContentPage>

Solution

As Jason's reply, you can get list data from Sqlite database, then create ObservableCollection<XamForms.Controls.SpecialDate> attendances to add current Date data.

ObservableCollection Class represents a dynamic data collection that provides notifications when items get added, removed, or when the whole list is refreshed.

I do one simple that you can take a look:

 <StackLayout>
        <controls:Calendar
            Padding="10,0,10,0"
            BackgroundColor="{AppThemeBinding Dark=Black,
                                              Light=White}"
            DateCommand="{Binding DateChosen}"
            DatesBackgroundColor="{AppThemeBinding Dark=Black,
                                                   Light=White}"
            DatesTextColor="{AppThemeBinding Dark=White,
                                             Light=Black}"
            DisabledBorderColor="Black"
            SelectedBorderWidth="4"
            SelectedDate="{Binding Date}"
            ShowNumberOfWeek="false"
            SpecialDates="{Binding attendances}"
            StartDay="Sunday"
            TitleLabelTextColor="Purple"
            TitleLeftArrowTextColor="MediumVioletRed"
            TitleRightArrowTextColor="MediumVioletRed" />

        <ListView
            x:Name="birthdayListView"
            BackgroundColor="{AppThemeBinding Dark=Black,
                                              Light=#444343}"
            HeightRequest="250"
            ItemsSource="{Binding birthdays}"
            WidthRequest="50">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <TextCell
                        Detail="{Binding Date}"
                        DetailColor="YellowGreen"
                        Text="{Binding FullName}" />
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </StackLayout>

public partial class Page38 : ContentPage, INotifyPropertyChanged
{
    private List<Birthday> _birthdays;
    public List<Birthday> birthdays 
    {
        get { return _birthdays; }
        set
        {
            _birthdays = value;
            RaisePropertyChanged("birthdays");
        }
    }
    private DateTime? _date;
    public DateTime? Date
    {
        get
        {
            return _date;
        }
        set
        {
            _date = value;
            RaisePropertyChanged(nameof(Date));
        }
    }
    public ObservableCollection<XamForms.Controls.SpecialDate> attendances { get; set; }
    public ICommand DateChosen
    {
        get
        {
            return new Command((obj) => {
                System.Diagnostics.Debug.WriteLine(obj as DateTime?);
            });
        }
    }

    public Page38()
    {
        InitializeComponent();      
        attendances = new ObservableCollection<SpecialDate>();
        Date = DateTime.Now;
        this.BindingContext = this;
    
    }
    protected override void OnAppearing()
    {
        base.OnAppearing();
        //get data from sqlite database.
         birthdays = new List<Birthday>()
        {
            new Birthday(){FirstName="cherry", Date=new DateTime(2021,5,25), },
            new Birthday(){FirstName="cherry", Date=new DateTime(2021,5,26), },
            new Birthday(){FirstName="cherry", Date=new DateTime(2021,5,27), },
            new Birthday(){FirstName="cherry", Date=new DateTime(2021,5,28), },
            new Birthday(){FirstName="cherry", Date=new DateTime(2021,5,30), },
            new Birthday(){FirstName="cherry", Date=new DateTime(2021,5,31), },

        };
        //foreach birthdays data, add Date property to  attendances
        foreach (Birthday b in birthdays)
        {
            attendances.Add(new XamForms.Controls.SpecialDate(b.Date) { BackgroundColor = Color.Green, TextColor = Color.White, BorderColor = Color.Yellow, BorderWidth = 8, Selectable = true });
        }

    }
    
    public event PropertyChangedEventHandler PropertyChanged;
    public void RaisePropertyChanged(string propertyName)
    {
        PropertyChangedEventHandler handler = PropertyChanged;
        if (handler != null)
        {
            handler(this, new PropertyChangedEventArgs(propertyName));
        }
    }
}

You need to implement INotifyPropertyChanged to notify data changed.

The screenshot:

Answered By - Cherry Bu - MSFT