change how an appointment looks like

[jens de rijcke]

Hello,

I'm making an application where I use the SfCalendar control, but instead of the tiny dot at the bottom of the day I'd like to have my day colored so that it is clearer on which day I have something going on. 

I can't use the blacked out dates here because this already has another purpose and than I wouldn't be able to see my appointment.

Is there anyway to do is?

If that is not possible: maybe there is a way to highlight a timeperiod without using select, something for special dates?

Thank you in advance!

Jens

[Subburaj Pandian Veluchamy]

Hi Jens, 

 

Thank you for contacting Syncfusion support. 

Your requirement of customizing Calendar MonthView in Xamarin.Forms can be achieved by setting Custom view to the month cell using OnMonthCellLoadedEvent or setting CellTemplate of Calendar MonthViewSettings. Based on your requirement, you can customize the calendar UI elements, using the same. 

 

If your requirement is just to customize the Text and Background, you can use MonthViewSettings properties, you can refer our User Guide documentation regarding the same by the following link.

Month Cell customization using properties: https://help.syncfusion.com/xamarin/sfcalendar/display-modes#month-view-customization

Month Cell customization using Custom view: https://help.syncfusion.com/xamarin/sfcalendar/how-to?cs-save-lang=1&cs-lang=csharp#create-your-own-custom-calendar-month-cell-view 

 

Month Cell customization using Cell template: https://help.syncfusion.com/xamarin/sfcalendar/how-to?cs-save-lang=1&cs-lang=csharp#how-to-customize-month-view-cell-using-a-template 

 

KB link: https://www.syncfusion.com/kb/8588/how-to-customize-the-month-cell-of-sfcalendar-with-custom-object 

 

We have Customization sample in our Calendar Sample browser sample and it is in MVVM pattern. you can download and refer the same by the following GitHub link. 

 

SB Sample link: https://github.com/syncfusion/xamarin-demos/tree/245d3074f3356d283e29a56e1fbe63a921011ed8/Forms/Calendar/Calendar/Samples/Customization 

 

We hope this helps. Please let us know, if you would require any further assistance.  

 

Regards,
Subburaj Pandian V 

[jens de rijcke]

Hi

Already a big thanks for the help, I'm using OnMonthCellLoaded for changing the layout of certain cells as asked before and that works fine.

But I'm working with a toggle to put this highlight on and off and I'm not seeing a way to do this. Is there a way that this can be achieved as well? I'm thinking in the same was as before, maybe there is a way to get a certain date and edit the specific field.

Underneath is the xaml layout that needs to be toggled. The dates that need to be toggled are in a collection.

    <ContentView.Resources>

        <ResourceDictionary>

            <DataTemplate x:Key="scheduleTemplate">

                <Grid HorizontalOptions="Center" BackgroundColor="{Binding bgColor}" >

                    <Image Source="{Binding imageSource}" Margin="2"/>

                    <Label Text="{Binding Date.Day}" HorizontalOptions="Center" TextColor="{Binding lblColor}" HorizontalTextAlignment="Center" VerticalOptions="Center" VerticalTextAlignment="Center" FontSize="16"/>

                </Grid>

            </DataTemplate>

        </ResourceDictionary>

    </ContentView.Resources>

Regards,

Jens

[Ganeshamoorthy Chandramoorthy]

Hi Jens,

 

You can add or remove the highlight of certain cells by refreshing the calendar by using Refresh method. By calling the refresh method, each month cell UI will be updated and by using MonthCellLoaded event you can customize the specific set of dates.  Kindly refer the below code snippet.

 

        private bool isToggled = false;
        public MainPage()
        {
            InitializeComponent();
            calendar.OnMonthCellLoaded += Calendar_OnMonthCellLoaded;
        }

        private void Handle_Clicked(object sender, System.EventArgs e)
        {
            this.isToggled = !this.isToggled;
            calendar.Refresh();
        }

        private void Calendar_OnMonthCellLoaded(object sender, MonthCellLoadedEventArgs e)
        {
            if ((e.Date.Date.Day == 10 || e.Date.Date.Day == 11 || e.Date.Date.Day == 13) && this.isToggled)
            {
                var button = new Button();
                button.Text = e.Date.Day.ToString();
                e.View = button;
            }
        }

 

Sample link: GettingStartedCalendar

 

We hope this helps to achieve your requirement. Please let us know, if you would require any further assistance.

 

Regards,

Ganeshamoorthy C

[jens de rijcke]

Hi Ganeshamoorthy,

That works, thank you! I was actually looking for a way to refresh certain cells, just the ones in the collection, so that I don't have to reload the whole calendar to change two or three cells. That is probably not possible, if not i'm out of questions for this thread.

Regards,

Jens

[Farjana Parveen Ayubb]

Hi Jens, 

 

Thanks for the update. As per the implementation, each cell in the month view will be refreshed by calling Refresh method. So, it is not possible to to refresh the certain cells in month view 

 

Regards, 

Farjana Parveen A