How to customize the inline event template of telerik calendar for ios

[Chandan]

Hi,

    Is anyone know how to customize template of inline event view for ios ?

[Jack]

Hi Chandan,

You can access the inline view by using the inlineEventsView property of TKCalendarMonthPresenter class:

TKCalendarMonthPresenter *presenter = (TKCalendarMonthPresenter*)self.calendarView.presenter;
presenter.inlineEventsView.rowHeight = 20;

You can customize its appearance by using a custom implementation of TKCalendarInlineView class. Here is a sample:

@interface MyInlineView : TKCalendarInlineView

@end

@implementation MyInlineView

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:@"cell"];
    if (cell == nil) {
        cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleValue1 reuseIdentifier:@"cell"];
    }
    TKCalendarEvent *event = self.dayCell.events[indexPath.row];
    cell.textLabel.text = event.title;
    return cell;
}

@end

Use the following code to replace the default implementation:

MyInlineView *view = [MyInlineView new];
presenter.inlineEventsView = view;

I hope this helps.

Regards,
Jack
Telerik

[Chandan]

Hi Jack,

     As I am using the calendar for xamarin. So can you please provide me this code in c#.

Thank you.

[Jack]

Hi Chandan,

Here is the same code in C#:

TKCalendarMonthPresenter presenter = (TKCalendarMonthPresenter)this.CalendarView.Presenter;
presenter.InlineEventsView.RowHeight = 20;

public class MyInlineView: TKCalendarInlineView
{
    [Export("tableView:cellForRowAtIndexPath:")]
    public UITableViewCell GetCell (UITableView tableView, NSIndexPath indexPath)
    {
        UITableViewCell cell = tableView.DequeueReusableCell("cell");
        if (cell == null) {
            cell = new UITableViewCell(UITableViewCellStyle.Value1, "cell");
        }
        TKCalendarEvent calendarEvent = (TKCalendarEvent)this.DayCell.Events[indexPath.Row];
        cell.TextLabel.Text = calendarEvent.Title;
        return cell;
    }
}

MyInlineView view = new MyInlineView();
presenter.InlineEventsView = view;

I chose Objective-C in my answer because this is a thread specific for the native version of our iOS controls. You will get more precise and fast response if you post your questions related to our Xamarin.Forms controls and Xamarin wrappers in their dedicated product threads.

Regards,
Jack
Telerik

[Chandan]

Hey jack,

       For the template of inline event, I am able to show only 2 values (as I shown in the image), so is it possible to show more than 2 values. If yes then please let me know how ? Also how should I increase the height of this template ?

[Jack]

Hello Chandan,

The inline view height is controlled by the properties of TKCalendarInlineView class. You can access them by using the TKCalendarMonthPresenter class. Consider the following snippet:

TKCalendarMonthPresenter *presenter = (TKCalendarMonthPresenter*)self.calendarView.presenter;
presenter.inlineEventsViewMode = TKCalendarInlineEventsViewModeInline;
presenter.inlineEventsView.maxHeight = 300;

I hope this helps.

Regards,
Jack
Telerik

[Chandan]

Hello Jack,

Thank you for the reply.

          Ya it is working but can you please tell me how to show more than 2 values in the individual inline template. Because I am able to show only 2 values in it.

[Jack]

Hi Chandan,

I am not sure that I understand correctly the issue. The inline view should show all events related with the selected date. It will show 2 events when there are 2 events that include the specified date. Could you, please prepare a sample project where the issue can be reproduced. This will allow me to investigate further and find a proper solution for you.

Looking forward to your reply.

Regards,
Jack
Telerik

[Chandan]

Hello Jack,

Thanks for your valuable time.

      I have done the following code to design template of inline event view

 

[Export("tableView:cellForRowAtIndexPath:")]
            public UITableViewCell GetCellForRow(UITableView tableView, NSIndexPath indexPath)
            {
                UITableViewCell cell = tableView.DequeueReusableCell("cell");
                if (cell == null)
                {
                    cell = new UITableViewCell(UITableViewCellStyle.Subtitle, "cell");
                    cell.BackgroundColor = UIColor.Gray;
                }

                TelerikAppointment calendarEvent = (TelerikAppointment)this.DayCell.Events[indexPath.Row];
                cell.TextLabel.Text = calendarEvent.Title;
                cell.TextLabel.TextAlignment = UITextAlignment.Left;
                cell.TextLabel.TextColor = UIColor.Black;

                cell.DetailTextLabel.Text = calendarEvent.Location;
                cell.DetailTextLabel.TextAlignment = UITextAlignment.Right;
                cell.DetailTextLabel.TextColor = UIColor.Black;

                return cell;
            }

 but it shows only 2 values in the template as I shown in the image in red box. I want to show more than 2 values (in front of that 2 values) in that template. So can you please tell me how should I take that.

 

Thank you.

 

[Jack]

Hello Chandan,

You can do this by adding custom UILabel instances in cell's contentView. Here is a nice article demonstrating how to customize your UITableViewCell.

Regards,
Jack
Telerik