Day column display only first letter in radCalendar

8 posts, 1 answers
  1. Salini
    Salini avatar
    6 posts
    Member since:
    Jun 2014

    Posted 05 Mar 2015 Link to this post

    Hi, 
    Is it possible to display only first letter for the DayColumn in radCalendar.
    By default it is displaying first 3 letters of the week name. I need to display only 1 letter. I found this below thread and it is possible in WinForms to change the format using dayNameFormat.
    http://www.telerik.com/forums/day-column-display-change-in-radcalendar

    How can I do the same for radCalender on Silverlight.

    Thank you.
    Salini.
  2. Answer
    Nasko
    Admin
    Nasko avatar
    706 posts

    Posted 09 Mar 2015 Link to this post

    Hello Salini,

    In order to achieve the desired appearance of the names of the days you need to change the AbbreviatedDayNames of the current DateTimeFormat as shown below:
    this.radCalendar1.Culture = new System.Globalization.CultureInfo("en-US");
    this.radCalendar1.Culture.DateTimeFormat = new System.Globalization.DateTimeFormatInfo
    {
        AbbreviatedDayNames = new string[] { "S", "M", "T", "W", "T", "F", "S" }
    };

    Hopes this helps.

    Regards,
    Nasko
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  3. Salini
    Salini avatar
    6 posts
    Member since:
    Jun 2014

    Posted 10 Mar 2015 in reply to Nasko Link to this post

    Thank you Nasko.
  4. Roger
    Roger avatar
    3 posts
    Member since:
    Mar 2018

    Posted 19 Mar in reply to Nasko Link to this post

    How about changing Day buttons from single to double? like from the attached image (but this one's from syncfusion)

     

  5. Roger
    Roger avatar
    3 posts
    Member since:
    Mar 2018

    Posted 19 Mar in reply to Nasko Link to this post

    How about changing Day buttons from single to double? like from the attached image (but this one's from syncfusion)
  6. Vladimir Stoyanov
    Admin
    Vladimir Stoyanov avatar
    138 posts

    Posted 21 Mar Link to this post

    Hello Roger,

    Thank you for the attached picture. 

    In order to achieve the desired requirement you can use a DayButtonStyleSelector. You don't have to apply any style, since the goal is just to add a zero in front of the days before 10th. Still if you have any custom styles, you can apply them as well. Here is how that would look:
    public class DayButtonStyleSelector : StyleSelector
       {
           public override Style SelectStyle(object item, DependencyObject container)
           {
               CalendarButtonContent calendarButton = item as CalendarButtonContent;
               
               if (calendarButton != null)
               {
                   if (calendarButton.ButtonType == CalendarButtonType.Date)
                   {
                       calendarButton.Text = calendarButton.Text.PadLeft(2, '0');
                   }
               }
               return base.SelectStyle(item, container);
           }
       }

    You would also need to define the StyleSelector in xaml and set in on the RadCalendar. 
    <local:DayButtonStyleSelector x:Key="CustomStyleSelector" />
     
    <telerik:RadCalendar DayButtonStyleSelector="{StaticResource CustomStyleSelector}" DayButtonStyle="{x:Null}" />

    Hope this helps.

    Regards,
    Vladimir Stoyanov
    Progress Telerik
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  7. Roger
    Roger avatar
    3 posts
    Member since:
    Mar 2018

    Posted 22 Mar in reply to Vladimir Stoyanov Link to this post

    Hi Vladimir,

    Thanks for the response.It's working now but had some conflicts with my current style. I need it to look like the image on my first post. When you mentioned "Still if you have any custom styles, you can apply them as well." do you mean to apply them under the DayButtonStyleSelector class?

    Thanks in advance!

    P.S.

    I have attached a portion of the style we are currently using

  8. Vladimir Stoyanov
    Admin
    Vladimir Stoyanov avatar
    138 posts

    Posted 26 Mar Link to this post

    Hello Roger,

    Thank you for the attached picture. 

    You are correct that you can apply the style in the DayButtonStyleSelector. You can introduce a property of type Style in the StyleSelector and you can return that property instead of the call to the base class in the SelectStyle method. You also have to add a key to the style(let's say x:Key="DefaultStyle") and set it to the property of the StyleSelector like so:
    <local:DayButtonStyleSelector x:Key="CustomStyleSelector" DefaultStyle="{StaticResource DefaultStyle}" />

    Please give this approach a try and let me know if I can be of any further assistance.

    Regards,
    Vladimir Stoyanov
    Progress Telerik
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top