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.
Unfortunately, activation email could not send to your email. Please try again.

Customizing the month cell

Thread ID:

Created:

Updated:

Platform:

Replies:

129287 Mar 9,2017 12:01 PM Apr 10,2017 07:37 AM Xamarin.Forms 3
loading
Tags: SfSchedule
Ryan Korsak
Asked On March 9, 2017 07:33 PM

I am using the month view of the SfSchedule control, and would like each day to render a bit differently on iOS (different padding, some customization of the appointment dots).  I'm using the OnMonthCellLoadedEvent and setting the "view" property of the args.  While this technically works, it doesn't work as I would expect.

Following the sample code in the docs I tried simply verifying that the view can be replaced:

_schedule.OnMonthCellLoadedEvent += CustomizeMonthCell;
...
void CustomizeMonthCell(object sender, MonthCellLoadedEventArgs args)
{
    args.view = new Button { BackgroundColor = Color.Green };
}

This works as expected, and shows each day as a solid green button.

However, when I try something even slightly more complex, I can't get it to render as I would expect.  Here I try to render a StackLayout with a single Label:
void CustomizeMonthCell(object sender, MonthCellLoadedEventArgs args)
{
    var stack = new StackLayout { BackgroundColor = Color.Green };
    stack.Children.Add(new Label { Text = "#", TextColor = Color.White });
    args.view = stack;
}

This will render each day cell in solid green with no text:
Solid green

Is it not possible to use a layout as the month cell view, or am I just doing something wrong?

Sivakumar Punniya Moorthi [Syncfusion]
Replied On March 10, 2017 01:09 AM

Hi Ryan, 

  

Thanks for using Syncfusion Products. 

  

We have analyzed your Query with “While setting the custom view in the another view in monthcell loaded event in Xamrin.Forms iOS ”. In the custom view child did not get the Size by setting the width request and height request for the children the mentioned issue can be resolved. Please refer below code example, 

  

[C#] 

void Schedule_OnMonthCellLoadedEvent(object sender, MonthCellLoadedEventArgs args)
        {
            var monthCell = new StackLayout { BackgroundColor = Color.Transparent };
            var monthLabel = new Label();
            monthLabel.HeightRequest = 50;
            monthLabel.WidthRequest = 50;
            monthLabel.Margin = new Thickness(001010);
            monthLabel.BackgroundColor = Color.Green;
            monthLabel.Text = (args.appointments as ScheduleAppointmentCollection).Count.ToString();
            monthLabel.TextColor = Color.White;

            monthCell.Children.Add(monthLabel);

            args.view = monthCell;

        }
 

  

Based on your requirement we have prepared the simple sample and pass the schedule appointment count with in the schedule month cell. Kindly find the sample link below, 

  

Sample Link : MonthCellCustomization  

  

If the provided information does not meet your requirement. Could you please revert us back with your query. We are happy to assist you. 

  

Regards, 

Sivakumar P 

Ryan Korsak
Replied On March 27, 2017 11:06 AM

Thanks Sivakumar.  We ended up switching back to the Calendar control, which was visually a little closer to what we want.  However, I would still like to fully understand the customization options, so I do have one followup:

Based on some further experimentation and your example (which sets the Margin of the date label to 0,0,10,10), it looks like I can't make use of HorizontalOptions or VerticalOptions for positioning of elements within the day cells.  Is this correct?  Setting the margins manually feels a little brittle, given that I can't always know exactly what the size of the cell will be depending on screen size, orientation, etc.  Is there anything I'm missing?

Thanks,
Ryan

Subburaj Pandian Veluchamy [Syncfusion]
Replied On April 10, 2017 07:37 AM

Hi Ryan, 
 
We regret for the delay. 
 
We have suggested to set Margin to the CustomView for differentating the CustomView with the border, you can use also use LayoutOptions instead of setting Margin and padding to the View. Please refer the below code example, 
 
[c#] 
            Button button = new Button();
            button.Text = "click";
            button.BackgroundColor = Color.Blue;
            button.VerticalOptions = LayoutOptions.FillAndExpand;
            button.HorizontalOptions = LayoutOptions.FillAndExpand;

            StackLayout stack = new StackLayout();
            stack.Orientation = StackOrientation.Vertical;
            stack.BackgroundColor = Color.Green;             
            stack.Children.Add(button);

            args.view = stack; 
 
   
By setting LayoutOptions to the child element you can position the CustomView as per your requirement, please let us know if you have any query on this. 
 
Regards,  
Subburaj Pandian V.    


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.

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.

;