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

10 posts, 0 answers
  1. Chandan
    Chandan avatar
    17 posts
    Member since:
    Jun 2015

    Posted 23 Jun 2015 Link to this post

    Hi,

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

  2. Jack
    Admin
    Jack avatar
    2333 posts

    Posted 24 Jun 2015 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. DevCraft banner
  4. Chandan
    Chandan avatar
    17 posts
    Member since:
    Jun 2015

    Posted 25 Jun 2015 Link to this post

    Hi Jack,

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

    Thank you.

  5. Jack
    Admin
    Jack avatar
    2333 posts

    Posted 25 Jun 2015 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  6. Chandan
    Chandan avatar
    17 posts
    Member since:
    Jun 2015

    Posted 29 Jun 2015 Link to this post

    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 ?

  7. Jack
    Admin
    Jack avatar
    2333 posts

    Posted 02 Jul 2015 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  8. Chandan
    Chandan avatar
    17 posts
    Member since:
    Jun 2015

    Posted 02 Jul 2015 Link to this post

    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.

  9. Jack
    Admin
    Jack avatar
    2333 posts

    Posted 02 Jul 2015 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  10. Chandan
    Chandan avatar
    17 posts
    Member since:
    Jun 2015

    Posted 02 Jul 2015 Link to this post

    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.

     

  11. Jack
    Admin
    Jack avatar
    2333 posts

    Posted 06 Jul 2015 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top
DevCraft banner