Scheduler Theme Problem

1 Answer 35 Views
Scheduler Styling
vahid
Top achievements
Rank 2
Iron
Iron
Iron
vahid asked on 30 Jul 2022, 09:59 AM | edited on 30 Jul 2022, 09:59 AM

Hi,

i use

kendo.common-bootstrap.min.css
kendo.default-v2.min.css (for k-icon k-i-gear k-icon-xl)
kendo.highcontrast.min.css

now Scheduler Background color and text color of days in a week  and alldays are white

also this problem exist in following themes

Highcontrast,Black,MetroBlack,Moonlight

sample

thank you

 

1 Answer, 1 is accepted

Sort by
1
Accepted
Neli
Telerik team
answered on 03 Aug 2022, 09:06 AM

Hello Vahid,

The 'common-bootstrap' style is a common (base) stylesheet that should be used with the LESS Bootstrap theme:

- https://docs.telerik.com/kendo-ui/styles-and-layout/less-themes/overview#common-css-files

The 'default-v2' is a SASS stylesheet. In the links below you can read more about the SASS theme and the different swatches of each theme. 

https://docs.telerik.com/kendo-ui/styles-and-layout/sass-themes/overview

https://docs.telerik.com/kendo-ui/styles-and-layout/sass-themes/swatches

The corresponding swatch to the theme that you're currently using(v2) is called default-main and it is the one that is used by default. You can take a look at our demos and play with the different swatches 

I would recommend using either SASS or LESS styles. Here is the modified Dojo example where the 'common-bootstrap' stylesheet is removed and the default-main swatch is used. 

Please note also that the LESS based themes will be deprecated starting with 2023 R1 release.

Regards,
Neli
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

vahid
Top achievements
Rank 2
Iron
Iron
Iron
commented on 03 Aug 2022, 10:24 AM | edited

thank you for Answer

goto your example and click next day, again Background color and text color of days in a week  and alldays are white

plz help

Neli
Telerik team
commented on 08 Aug 2022, 09:47 AM

Hi Vahid,

Please excuse me for misleading you in my previous reply. The 'Highcontrast' is a LESS-based theme. Thus, it should be used with LESS-based common files. If we use the following stylesheets in the Dojo example, then the background in all the cells will be dark.  

<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2022.2.621/styles/kendo.common.min.css" />    
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2022.2.621/styles/kendo.highcontrast.min.css" />

If you decide to use the SASS-based themes, you could use the 'Ocean-Blue' swatch of the Default theme which is build to cover full accessibility contrast standards.

Regards,

Neli

vahid
Top achievements
Rank 2
Iron
Iron
Iron
commented on 09 Aug 2022, 08:07 AM | edited

Hi ,Thank you

now your Dojo example the size of icons is not correct

<span class="k-icon k-i-gear k-icon-xs"></span>
<span class="k-icon k-i-gear k-icon-md"></span>
<span class="k-icon k-i-gear k-icon-xl"></span>
<span class="k-icon k-i-gear k-icon-24"></span>
Screenshot
Neli
Telerik team
commented on 12 Aug 2022, 06:53 AM

Hi Vahid,

As described in the decumentation linked below - The Less-based themes support only the default values of the new Components Styling Options.

https://docs.telerik.com/kendo-ui/styles-and-layout/less-themes/less-themes-migration#which-styling-options-are-available-for-the-less-themes

However, if you need to have different sizes of the icons when LESS based theme is used you can apply custom style as in the example below:

<style>
    .k-icon-xl{
      font-size: 64px;
    }
  </style>

Here you will find the modified example. 

Regards,

Neli

vahid
Top achievements
Rank 2
Iron
Iron
Iron
commented on 12 Aug 2022, 03:22 PM

thank you so much
Tags
Scheduler Styling
Asked by
vahid
Top achievements
Rank 2
Iron
Iron
Iron
Answers by
Neli
Telerik team
Share this question
or