We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

change how an appointment looks like

Thread ID:

Created:

Updated:

Platform:

Replies:

146564 Aug 8,2019 09:53 AM UTC Aug 14,2019 11:34 AM UTC Xamarin.Forms 5
loading
Tags: SfCalendar
jens de rijcke
Asked On August 8, 2019 09:53 AM UTC

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 [Syncfusion]
Replied On August 9, 2019 11:20 AM UTC

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 
 
 
 
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. 
 
 
We hope this helps. Please let us know, if you would require any further assistance.  
 
Regards,
Subburaj Pandian V 


jens de rijcke
Replied On August 12, 2019 12:11 PM UTC

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 [Syncfusion]
Replied On August 13, 2019 02:49 PM UTC

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
Replied On August 14, 2019 07:58 AM UTC

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 [Syncfusion]
Replied On August 14, 2019 11:34 AM UTC

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 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon