Calendar Background Colors Transparent

[Ericky]

Hello,

 

Is there any way to set the calendar DayCell background color and other style colors to transparent on iOS?

Settings it to a transparent color only works on android.

I tried to figure out how to access the native properties to set them there, but I couldn't figure it out.

 

I'd appreciate any help, thanks.

[Nick Iliev]

Hello ,

You should be able to set a transparent color to your cells by setting this value to cellBackgroundColor as done here with custom color. However, keep in mind that you will need also to set transparent color to the monthlyView main background color as done here (otherwise your cells will be transparent but will have the default color of your monthly view). The same technique should be done for the background color of week view styles as done here. Applying transparency as the background color for the Month and Weeks will allow your cells to be transparent as well.

Regards,
Nikolay Iliev
Progress Telerik

[Ericky]

Hello Nikolay,

 

I did set all the background colors to transparent, but everything just turned white.

 

getMonthViewStyle() {
    let monthViewStyle = new CalendarMonthViewStyle();
    monthViewStyle.backgroundColor = colors.transparent;
    monthViewStyle.showTitle = true;
    monthViewStyle.showWeekNumbers = false;
    monthViewStyle.showDayNames = true;
    (<any>monthViewStyle).selectionShape = 'None';

    let todayCellStyle = new DayCellStyle();
    todayCellStyle.cellPaddingHorizontal = 5;
    todayCellStyle.cellPaddingVertical = 5;
    todayCellStyle.cellBackgroundColor = colors.white;
    todayCellStyle.cellBorderWidth = 0.5;
    todayCellStyle.cellBorderColor = colors.white;
    todayCellStyle.cellTextColor = colors.darkBlue;
    todayCellStyle.cellTextFontStyle = 'Bold';
    todayCellStyle.cellTextSize = 14;
    monthViewStyle.todayCellStyle = todayCellStyle;

    let dayCellStyle = new DayCellStyle();
    dayCellStyle.cellPaddingHorizontal = 5;
    dayCellStyle.cellPaddingVertical = 5;
    dayCellStyle.cellBackgroundColor = colors.transparent;
    dayCellStyle.cellBorderWidth = 0.5;
    dayCellStyle.cellBorderColor = colors.white;
    dayCellStyle.cellTextColor = colors.white;
    dayCellStyle.cellTextFontStyle = 'Bold';
    dayCellStyle.cellTextSize = 14;
    monthViewStyle.dayCellStyle = dayCellStyle;

    let selectedCellStyle = new DayCellStyle();
    selectedCellStyle.cellPaddingHorizontal = 5;
    selectedCellStyle.cellPaddingVertical = 5;
    selectedCellStyle.cellBackgroundColor = colors.darkBlue;
    selectedCellStyle.cellBorderWidth = 0.5;
    selectedCellStyle.cellBorderColor = colors.transparent;
    selectedCellStyle.cellTextColor = colors.white;
    selectedCellStyle.cellTextFontStyle = 'Bold';
    selectedCellStyle.cellTextSize = 16;
    if (isIOS) {
      selectedCellStyle.cellBorderColor = colors.white;
    }

    monthViewStyle.selectedDayCellStyle = selectedCellStyle;

    let dayNameCellStyle = new CellStyle();
    dayNameCellStyle.cellBackgroundColor = colors.transparent;
    dayNameCellStyle.cellBorderWidth = 0.5;
    dayNameCellStyle.cellBorderColor = colors.white;
    dayNameCellStyle.cellTextColor = colors.white;
    dayNameCellStyle.cellTextFontStyle = 'Bold';
    dayNameCellStyle.cellTextSize = 14;
    if (isAndroid) {
      dayNameCellStyle.cellAlignment = 'Center';
    }

    monthViewStyle.dayNameCellStyle = dayNameCellStyle;

    let titleCellStyle = new DayCellStyle();
    titleCellStyle.cellBackgroundColor = colors.transparent;
    titleCellStyle.cellBorderWidth = 1;
    titleCellStyle.cellBorderColor = colors.transparent;
    titleCellStyle.cellTextColor = colors.white;
    titleCellStyle.cellTextFontStyle = 'Bold';
    titleCellStyle.cellTextSize = 20;
    monthViewStyle.titleCellStyle = titleCellStyle;

    return monthViewStyle;
  }

 

Thanks for responding.

[Ericky]

Sorry, I forgot to mention.

colors.transparent = 'transparent'

I also tried using 'rgba(0, 0, 0, 0)'

[Nick Iliev]

Hello ,

Are you using a container layout "behind" your calendar (perhaps the containers also needs to be made transparent if you want the UX to show a background image from a root element)?
If this is not the case please send us an archive with your application so we could test at our side your specific scenario (you can safely remove node_modules and platforms folder to decrease the size of the archive).

Regards,
Nikolay Iliev
Progress Telerik

[Ericky]

Hello Nikolay,

 

I just used telerik's sample app to reproduce the problem. These are the changes are made if you don't want to go through the trouble of downloading the app.

* Add "backgroundColor='red'" to the StackLayout container which contains RadCalendar.

* Change every single backgroundColor property in the calendar-styles.service.ts to "transparent."

 

Sample App

[Nick Iliev]

Hey ,

Thank you for the provided test project.
I was able to reproduce the issue on iOS (while on Android the current settings were enough to make the calendar transparent). 
To make the calendar transparent on iOS you will need to add an explicit transparent color to the RadCalendar itself. 
e.g.

<StackLayout backgroundColor="red">
    <RadCalendar backgroundColor="transparent"></RadCalendar>
</StackLayout>

With this change added now the calendar will be transparent on both iOS and Android.

Regards,
Nikolay Iliev
Progress Telerik