Calendar Background Colors Transparent

7 posts, 0 answers
  1. Ericky
    Ericky avatar
    49 posts
    Member since:
    Jun 2017

    Posted 05 Jul Link to this post

    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.

  2. Nikolay Iliev
    Admin
    Nikolay Iliev avatar
    294 posts

    Posted 06 Jul Link to this post

    Hello Ericky,

    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
    Did you know that you can open private support tickets which are reviewed and answered within 24h by the same team who built the components? This is available in our UI for NativeScript Pro + Support offering.
  3. Ericky
    Ericky avatar
    49 posts
    Member since:
    Jun 2017

    Posted 06 Jul Link to this post

    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.

  4. Ericky
    Ericky avatar
    49 posts
    Member since:
    Jun 2017

    Posted 06 Jul Link to this post

    Sorry, I forgot to mention.

    colors.transparent = 'transparent'

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

  5. Nikolay Iliev
    Admin
    Nikolay Iliev avatar
    294 posts

    Posted 06 Jul Link to this post

    Hello Ericky,

    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
    Did you know that you can open private support tickets which are reviewed and answered within 24h by the same team who built the components? This is available in our UI for NativeScript Pro + Support offering.
  6. Ericky
    Ericky avatar
    49 posts
    Member since:
    Jun 2017

    Posted 06 Jul in reply to Nikolay Iliev Link to this post

    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

  7. Nikolay Iliev
    Admin
    Nikolay Iliev avatar
    294 posts

    Posted 07 Jul Link to this post

    Hey Ericky,

    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
    Did you know that you can open private support tickets which are reviewed and answered within 24h by the same team who built the components? This is available in our UI for NativeScript Pro + Support offering.
Back to Top