How make RadCalendar not fullpaged, but part of the page?



RadCalendar must be put in a parent layout panel that does not require from its children to have their own desired size. You should not therefore put RadCalendar in a StackLayout or an auto-sized row within a GridLayout.

But example for Angular looks so:

<StackLayout tkExampleTitle tkToggleNavButton>

I’m not using Angular. But only plain TypeScript.
How to built-in RadCalendar as part of page and combine it with other View’s (buttons, labels, textfields etc.) on page?

  1. Except the directives tkExampleTitle and tkToggleNavButton there is nothing Angular specific in the code.
  2. You can always check the Core repo.

  1. But it still does not work.
  2. There are no answer to my question.


You will have to explicitly assign a height if you are using it inside StackLayout.

<StackLayout xmlns:calendar="nativescript-ui-calendar">
 <calendar:RadCalendar height="600px" id="calendar" />