Articles in this section
Category / Section

How to refresh the Xamarin.Forms Calendar using MVVM pattern?

2 mins read

SfCalendar provides support to refresh the calendar layout by calling the Refresh method.

 

This article explains you how to refresh calendar from ViewModel.

 

Step 1: Define the command used to refresh the calendar layout in MVVM pattern.

 

public class ViewModel : INotifyPropertyChanged
    {
        private ICommand _refresh;
 
        public ICommand Refresh
        {
            get
            {
                return _refresh;
            }
            set
            {
                _refresh = value;
                RaisePropertyChanged("Refresh");
            }
        }
 
        public ViewModel()
        {
            Refresh = new Command(ExecuteRefresh);
        }
 
        // Refresh Calendar from ViewModel
        private void ExecuteRefresh(object obj)
        {
            if (obj is SfCalendar)
            {
                (obj as SfCalendar).Refresh();
            }
        }
 
        public event PropertyChangedEventHandler PropertyChanged;
 
        private void RaisePropertyChanged(string name)
        {
            if (PropertyChanged != null)
                PropertyChanged(this, new PropertyChangedEventArgs(name));
        }
    }

 

Step 2: Pass the SfCalendar instance as CommandParameter property of button to get the calendar instance, using which you can call the Refresh method to update the calendar layouts after the button command has been executed.

 

 

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:RefreshCalendar"
             xmlns:syncfusion="clr-namespace:Syncfusion.SfCalendar.XForms;assembly=Syncfusion.SfCalendar.XForms"
             x:Class="RefreshCalendar.CalendarView">
    <ContentPage.BindingContext>
        <local:ViewModel/>
    </ContentPage.BindingContext>
    <ContentPage.Content>
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="*" />
                <RowDefinition Height="50" />
            </Grid.RowDefinitions>
            <syncfusion:SfCalendar x:Name="calendar" Grid.Row="0"/>
            <Button Grid.Row="1" Text="Refresh" Command="{Binding Refresh}" CommandParameter="{Binding Source={x:Reference calendar}}" WidthRequest="100" HeightRequest="30" />
        </Grid>
    </ContentPage.Content>
</ContentPage>

 

Sample Demo: RefreshCalendar

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Please  to leave a comment
Access denied
Access denied