IOS Calendar Custom Cell and event renderer

[Kyle]

Hi all,

 I'm working on an application using the Telerik Calendar Widget for IOS.  Functionally, everything works okay.  I'm now trying to get into some customization of the cells, and more specifically what the events look like.  Before this, I created an Android application and created a customer renderer for the calendar for the cells.  I've attached a picture of what my calendar looks like in Android.  I'd like to recreate something similar to this for the IOS version.  I'm new to IOS development all together, and like I said its the Xamarin version, so everything is in C#.

 

It doesn't need to be an exact match.  The important part is that I can display the event's text next to the event indicator.  Basically, each day can only have 1 event object, and the title of that event is the number representation next to it.  Which is how many pieces are part of that event.  

 I'm thinking the goal for IOS would be to move the date in the cell from the center to more of the top right corner and then increase the size of my event?  I'm just not sure how to do this or even start in IOS.

 

Would I need to use UpdateVisualsForCell?

 

Thank you for any help

 

 

[Kyle]

Hi Again,

 So I was able to get fairly close last night.  Attached is what my IOS version currently looks like:

 This is very close to what I want.  I'd like to try and move it so the events render in the bottom left hand corner of the cell, similarly to how it is on the Android version from the post above.  It would be nice if I could shift the Date text in each cell a little bit as well to create more spacing, however that isn't quite as important.  

 

I've tried using:  dayCell.Style.EventAlignment = TKCalendarCellAlignment.Bottom

 

However, that doesn't seem to have any effect.  Any advice on either of those two issues?  Also is the way I reduced the size of the date text a good way to do it?  I figured taking its current size and just reducing it by a percentage was a good bet.

 

Thanks for any help

 

public override void UpdateVisualsForCell (TKCalendar calendar, TKCalendarCell cell)
        {
            if (cell is TKCalendarDayCell) {
                TKCalendarDayCell dayCell = (TKCalendarDayCell)cell;
                dayCell.Style.DisplayEventsAsText = true;
                dayCell.Style.TextFont= dayCell.Style.TextFont.WithSize (dayCell.Style.TextFont.PointSize * .7f);
            }
        }

[Yoanna]

Hello, Kyle, 

thank you for contacting us.

For detailed customization of the event showing in the cell you need to either override the UpdateVisualsForCell() method of TKCalendarDelegate or create your own custom cell.  
For this example I've created a custom cell, so we would be able to attach different UI elements to it easier. 

This is what the class looks like :

public class CustomCell : TKCalendarDayCell

    {

        public UILabel EventLabel {

 

            get; 

            set;

        }

 

        public CustomCell ()

        {

            this.EventLabel = new UILabel(new CGRect());

            this.EventLabel.TextColor = new UIColor (0, 0, 0, 1);
                   this.AddSubview (this.EventLabel);

        }

 

        public override void LayoutSubviews ()

        {

            base.LayoutSubviews ();

            this.EventLabel.Frame = new CGRect (this.Frame.Size.Width - 10, this.Frame.Size.Height - 10, 10, 10);

        }

 

        public override void UpdateVisuals ()

        {

            base.UpdateVisuals ();

            if (this.Events != null) {

                if (this.Events.Length > 0) {

                    this.EventLabel.Text = "1";

                }

                this.Style.TextInsets = new UIEdgeInsets (0, 25, 30, 0);

                this.Style.EventTextColor = new UIColor (0.4f, 0.6f, 0.8f, 1.0f);

                this.Style.EventShape = new TKPredefinedShape (TKShapeType.Circle, new CGSize (13, 13));



            }

        }

 

        public override void Draw (CGRect rect)

        {

            base.Draw (rect);

        }

 

    }

In few steps I've added a UILabel for the event title to appear next to your event shape, as you've mentioned that this is one of your goals. By using TKCalendarDayCell's Style property of type TKCalendarDayCellStyle you are able to customize the look of the cell and its components. In the above example some of them are demonstrated.

In order to use the custom cell you have created you need to pass it to the calendar by overriding the method ViewForCellOfKind() of TKCalendarDelegate.

public override TKCalendarCell ViewForCellOfKind (TKCalendar calendar, TKCalendarCellType cellType)
            {
                if (cellType == TKCalendarCellType.Day) {

                    return new CustomCell ();
                }

                return null;
            }

As you have updated your question and you have almost achieved the desired scenario, please notice that if you have set DisplayEventsAsText property to true moving the event around the cell will be available through EventInsets property of the Style. If DisplayEventsAsText is set to false you can use the EventAlignment property to adjust the event's position.

Moving the Date text around the cell could be done by adjusting its TextInset property:

this.Style.TextInsets = new UIEdgeInsets (0, 25, 30, 0);

I hope this points you in the right direction. If you have other questions I will be glad to assist you. 

Regards,
Yoanna
Telerik

 

[Kyle]

Thank you for the quick response!

 

I'll take a look at creating a custom cell, however I'm so close without that I'm hoping i'll be able to finish with the current way.  That is good to know about the event insets, thank you.  Through insets is it also possible to move the selection circle?  I've been expiramenting with moving the date in the cell, however the circle when it is selected doesn't move.  I've tried adding insets to the shapefill, but that doesn't seem to be doing anything.  

 

Is there a way to provide the same insets to the draw shape for the selected cell as i do for the text in the cell?

 

Thanks

[Kyle]

So as i've been playing with the Event insets, i'm running into the issue where if I try to move the event below the half way point in the cell, so the bottom half of the cell, it automatically starts the "And 1 more event..." truncate.  Is there a way to disable that or do I need to try to go the route of a complete custom cell?

[Kyle]

One last question =).

 

What is the best way to make the calendar responsive while using all of these insets/event sizes.  I was originally trying by grabbing the cell.frame and using that to determine the other sizes, however, it looks like cell.frame size is all 0's for the first time the calendar is created?

[Kyle]

I wish I could edit or remove some of my past posts.  I've now tried a bit with the custom cell, and your code was very very helpful.  However, i am once again stuck.  Common occurrence I know...  

 

My issue now lies in setting the text for the eventsLabel.  The issue is that it seems like the cell's events property is empty until the user clicks on one of the cells, when inside UpVisuals or UpdateVisualsForCell.   The way I have it working is that each day has a maximum of 1 event (business logic), and the title of that event is a number representation that I want to display in that eventsLabel.

 

Is there another function I should override where I would access to the events?  Where does the event color get set and rendered?  I'm wondering if I might be able to do it there.

[Kyle]

Sorry about the posts, I had more time to work on this tonight and got it.  Figured out I should override DrawEvents inside my custom cell.  Here I was able to access the fields that I needed to.  I can post my full solution if anyone is interested.  I've attached what my IOS calendar now looks like.  Thank you for all of the help.

[Yoanna]

Hello, Kyle, 

thank you for this update.
I am glad that you have achieve the desired results with TKCalendar.
If you need any assistance for future projects, please do not hesitate to contact us.


Regards,
Yoanna
Telerik

[Nico]

Hi all,

thx for the custom renderer code, helped me a lot.

But regarding on this, i have another challange to solve.

I´m using Xamarin.Forms with a binding on a Collection of my custom appointment class which implements the IAppointment interface.

 

What i want to achieve is that on the bottom of my custom TKCalendarDayCell the different Event-Types I will implement are shown in different Colors.

Or at least the different Event-Types shown as Text, not at the bottom, but also in different colors.

 

I attached a Foto which illustrates this.

 

The question is:

- How can i get my different custom appointment types in the custom renderer

- Is it even possible to display different event colors in Xamarin.Forms with IOS renderer

 

Best Regards,

Nico

 

 

[Pavel R. Pavlov]

Hi,

I understand your requirement. The bad news is that there is not an easy way to achieve this with the current version of the RadCalendar component.  We did not consider supporting this scenario when we designed the control. The way to achieve your requirement with the current implementation involves deep control customization and using hacky approaches. It can be done but it is not recommended at the moment of writing.

There is also a good news, however. We are currently working on implementing such feature in the RadCalendar control. We were not able to include it in today's release but we will try to release it for our next official version. This is why we recommend trying out the new feature after our next official version is available.

Regards,
Pavel R. Pavlov
Telerik