Calendar with dark theme

7 posts, 0 answers
  1. Yodo
    Yodo avatar
    12 posts
    Member since:
    Feb 2015

    Posted 29 Sep Link to this post

    I use light and dark themes in my app(android + xamarin form). Calendar supported only light theme.

    I try use :

          Calendar.SetStyleForCell = EvaluateCellStyle;

          ....
          private CalendarCellStyle EvaluateCellStyle(CalendarCell cell)

          { 

               if(DarkTheme)

                   return this.Calendar.DarkStyle;

              else

                  return null;

          }

    But then my page is loaded for 5 seconds longer.
    Maybe there is another way? 

  2. Namysław
    Namysław avatar
    19 posts
    Member since:
    Jul 2017

    Posted 29 Sep Link to this post

    Same for me - I'm using Telerik **RadCalendar** together with **Rg.Plugins.Popup**, in order to provide "day chooser" for app users, and against Android, whole popup initialization tooks around **2-3 seconds** (long, but let say more or less acceptable).

    However when I'm trying to customize calendar cells styles, it tooks up to even 6-8 seconds, which is way to long.

    Below example of my cells styles customization - look especially at **Calendar.SetStyleForCell = SetStyleForCell;**

    public partial class CalendarPopupView : PopupPage // Rg.Plugins.Popup.Pages.PopupPage 
    {
        private Color _themeColor;
        private Color _fontLightColor;
        private Color _lightAccentColor;
        private Color _darkAccentColor;
        private Color _accentColor;
        private Color _veryLightAccentColor;
     
        private Thickness _borderThickness;
     
        private double _fontVerySmall;
     
        public CalendarPopupView()
        {
            InitializeComponent();
     
            InitializeStyles();
     
            Calendar.SetStyleForCell = SetStyleForCell;
        }
     
        private void InitializeStyles()
        {
            _themeColor = (Color)Application.Current.Resources[nameof(GenericStorage.ThemeColor)]; // any color could be used
            _fontLightColor = (Color)Application.Current.Resources[nameof(GenericStorage.FontLightColor)]; // any color could be used
            _lightAccentColor = (Color)Application.Current.Resources[nameof(GenericStorage.LightAccentColor)]; // any color could be used
            _darkAccentColor = (Color)Application.Current.Resources[nameof(GenericStorage.DarkAccentColor)]; // any color could be used
            _accentColor = (Color)Application.Current.Resources[nameof(GenericStorage.AccentColor)]; // any color could be used
            _veryLightAccentColor = (Color)Application.Current.Resources[nameof(GenericStorage.VeryLightAccentColor)]; // any color could be used
     
            _borderThickness = new Thickness(1);
     
            _fontVerySmall = (double)Application.Current.Resources["FontVerySmall"]; // any font size could be used
        }
     
        private CalendarCellStyle SetStyleForCell(CalendarCell calendarCell)
        {
            var calendarDayCell = calendarCell as CalendarDayCell;
            var calendarTextCell = calendarCell as CalendarTextCell;
     
            if (calendarDayCell != null)
            {
                // CURRENT MOTH
                if (calendarDayCell.IsFromCurrentMonth)
                {
                    // Selected day style
                    if (calendarDayCell.IsSelected)
                    {
                        return new CalendarCellStyle
                        {
                            BackgroundColor = _themeColor,
                            TextColor = _fontLightColor,
                            FontSize = _fontVerySmall,
                            BorderColor = _lightAccentColor,
                            FontAttributes = calendarDayCell.IsToday ? FontAttributes.Bold : FontAttributes.None,
                            BorderThickness = _borderThickness
                        };
                    }
     
                    // Enabled day style for current month
                    if (calendarDayCell.IsEnabled)
                    {
                        return new CalendarCellStyle
                        {
                            BackgroundColor = _fontLightColor,
                            TextColor = _darkAccentColor,
                            FontSize = _fontVerySmall,
                            BorderColor = _lightAccentColor,
                            FontAttributes = calendarDayCell.IsToday ? FontAttributes.Bold : FontAttributes.None,
                            BorderThickness = _borderThickness
                        };
                    }
     
                    // Disabled day style for current month
                    return new CalendarCellStyle
                    {
                        BackgroundColor = _fontLightColor,
                        TextColor = _accentColor,
                        FontSize = _fontVerySmall,
                        BorderColor = _lightAccentColor,
                        FontAttributes = calendarDayCell.IsToday ? FontAttributes.Bold : FontAttributes.None,
                        BorderThickness = _borderThickness
                    };
                }
                // PREVIOUS/NEXT MONTH
                else
                {
                    return new CalendarCellStyle
                    {
                        BackgroundColor = _veryLightAccentColor,
                        TextColor = _accentColor,
                        FontSize = _fontVerySmall,
                        BorderColor = _lightAccentColor,
                        FontAttributes = calendarDayCell.IsToday ? FontAttributes.Bold : FontAttributes.None,
                        BorderThickness = _borderThickness
                    };
                }
            }
     
            if (calendarTextCell != null)
            {
                return new CalendarCellStyle
                {
                    BackgroundColor = _fontLightColor,
                    TextColor = _accentColor,
                    FontSize = _fontVerySmall,
                    BorderColor = _lightAccentColor,
                    FontAttributes = FontAttributes.None,
                    BorderThickness = _borderThickness
                };
            }
     
            return new CalendarCellStyle
            {
                BackgroundColor = _fontLightColor,
                TextColor = _accentColor,
                FontSize = _fontVerySmall,
                BorderColor = _lightAccentColor,
                FontAttributes = FontAttributes.None,
                BorderThickness = _borderThickness
            };
        }
    }
  3. Yodo
    Yodo avatar
    12 posts
    Member since:
    Feb 2015

    Posted 02 Oct in reply to Namysław Link to this post

    I use customization rules. It works faster. See this link - http://docs.telerik.com/devtools/xamarin/nativecontrols/android/calendar/calendar-customizations
  4. Namysław
    Namysław avatar
    19 posts
    Member since:
    Jul 2017

    Posted 03 Oct in reply to Yodo Link to this post

    Yodo said:I use customization rules. It works faster. See this link - http://docs.telerik.com/devtools/xamarin/nativecontrols/android/calendar/calendar-customizations

    But it requires platform specific code implementation.
  5. Stefan Nenchev
    Admin
    Stefan Nenchev avatar
    503 posts

    Posted 03 Oct Link to this post

    Hi, 

    You can try applying the modifications through the newly introduced theming mechanism - You can Set a Theme for the Calendar control and eventually modify the resources that are used. I have attached a sample for your reference. Can you try this approach in your actual setups and update the thread whether it has improved the loading time?

    Regards,
    Stefan Nenchev
    Progress Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  6. Yodo
    Yodo avatar
    12 posts
    Member since:
    Feb 2015

    Posted 05 Oct Link to this post

    Thanks for your reply. Customization rules work for me. I don't want use "Xamarin.Forms.Theme..". My work project is not build with this package. I think this package is not updated(the last update was 04/05/2016).

     

  7. Lance | Tech Support Engineer, Sr.
    Admin
    Lance | Tech Support Engineer, Sr. avatar
    419 posts

    Posted 06 Oct Link to this post

    Hi Yodo,

    I do not see any trials or purchases for UI for Xamarin on your account. I assume you're using your work's license. 

    If that is the case, please ask them to assign you as the Licensed User as this is the policy for Telerik product licensing (1 license per developer). It only takes about 20-30 seconds to assign you as the user on the Manage Licensed Users page (the company will still own the product and can change Licensed User at any time).

    Here are the steps:

    1 - Go to the Manage Licensed Users page
    2 - Remove the company as the current Licensed User (they still retain ownership)
    3 - Add you as a Licensed User using your email address.

    This will allow you to get the latest update from the Telerik NuGet server directly, the instructions to connect are here. Alternatively, you can download non-package based installer here and use the DLLs directly.

    Side Note: Being the Licensed User not only allows for you to update to the latest release, but you'll also get the support license and can submit support tickets instead of forum posts. We do actively monitor the forums, but our response time is limited by available resources. A support Ticket carries a guaranteed response time.

    Let us know if you have any further questions or concerns.

    Regards,
    Lance | Tech Support Engineer, Sr.
    Progress Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top