nativescriptangular2-nativescriptnativescript-angularnativescript-telerik-ui

Increasing the height of dayNameCells in RadCalendar


I am trying to create a weekly calendar view for my nativescript application. The issue is in styling for android. The week day names do not have enough spacing at the top and bottom.

I have tried to increase the height programmatically, but it has no impact.

        const weekViewStyle = new CalendarWeekViewStyle();
        const dayNameCellStyle = new CellStyle();
        dayNameCellStyle.cellAlignment = CalendarCellAlignment.HorizontalCenter;
        dayNameCellStyle.cellTextSize = 14;
        dayNameCellStyle.effectiveHeight = 30;
        dayNameCellStyle.effectiveMarginBottom = 20;
        weekViewStyle.dayNameCellStyle = dayNameCellStyle;

here's the link to the playground


Solution

  • I don't think the option to change the height is exposed in the plugin, but you might able to do it using the native method calls in loaded event.

    onLoaded(event) {
        const calendar = event.object;
        if (calendar.android) {
            calendar.android.setDayNamesHeight(layout.toDevicePixels(40));
        } else {
            calendar.ios.presenter.style.dayNameCellHeight = 40;
        }
    }
    

    Updated Playground