This is a migrated thread and some comments may be shown as answers.

Scaling Responsively

2 Answers 323 Views
Calendar
This is a migrated thread and some comments may be shown as answers.
Zhi Yuan
Top achievements
Rank 1
Veteran
Zhi Yuan asked on 20 Jan 2021, 08:46 AM

Hello,

Is it possible to scale the Calendar to fit the size of the screen and to have the font size, cell size etc scale responsively. As seen in the attached images, if I were to naively increase the width of the calendar to 100%:

1. The cells now have a gap in between them

2. The dates are no longer aligned to the days

Thanks!

2 Answers, 1 is accepted

Sort by
0
Accepted
Marin Bratanov
Telerik team
answered on 20 Jan 2021, 10:28 AM

Hi Zhi Yuan,

You can increase the font through CSS, and that will also enlarge the cells and text, here's a basic example (needs 2.21.0 for the Class parameter) and a screenshot of the result is attached below.

I must note that the calendar is an inline-block element, so 100% width is not really part of its design purpose.

 

<style>
    .large-font {
        font-size: 24px;
    }
</style>

<TelerikCalendar Class="large-font"
                 Min="@min" Max="@max" @bind-Date="@theDate">
</TelerikCalendar>

<TelerikCalendar Min="@min" Max="@max" @bind-Date="@theDate">
</TelerikCalendar>


@code {
    private DateTime min = new DateTime(2015, 1, 1);
    private DateTime max = new DateTime(2025, 12, 31);
    private DateTime theDate { get; set; } = DateTime.Now;
}

 

 

Regards,
Marin Bratanov
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
Zhi Yuan
Top achievements
Rank 1
Veteran
answered on 20 Jan 2021, 01:32 PM

Thanks so much Marin! This works like a charm. On a side note, I realise that the font size modification doesn't apply to the month & year on the top left, and it also doesn't apply to the days of week. It's easy to override them using css though. :)

Tags
Calendar
Asked by
Zhi Yuan
Top achievements
Rank 1
Veteran
Answers by
Marin Bratanov
Telerik team
Zhi Yuan
Top achievements
Rank 1
Veteran
Share this question
or