Customizing the month cell

[Ryan Korsak]

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:

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

[Sivakumar Punniya Moorthi]

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#]

voidSchedule_OnMonthCellLoadedEvent(objectsender,MonthCellLoadedEventArgsargs)
{
varmonthCell=newStackLayout{BackgroundColor=Color.Transparent};
varmonthLabel=newLabel();
monthLabel.HeightRequest=50;
monthLabel.WidthRequest=50;
monthLabel.Margin=newThickness(0,0,10,10);
monthLabel.BackgroundColor=Color.Green;
monthLabel.Text=(args.appointmentsasScheduleAppointmentCollection).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]

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]

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.