Our powerful JS Calendar component


Post by smalchow »

Hi!

I'm actually creating a custom theme based on the classic theme. To do so, I created a new scss file directly in my project and customized html elements by their classes and other selectors. At the end of my file I used this import:

@import '../node_modules/@bryntum/calendar/source/resources/sass/themes/classic.scss';

to base my custom theme on the classic theme. Everything worked fine for me except of the fonts/icons. So, I researched this forum and came up with setting these two variables before importing the classic theme:

$fa-font-path : '../node_modules/@bryntum/calendar/source/resources/fontawesome/webfonts';
$icon-font : 'Font Awesome 5 Pro';

but this didn't change anything. The icons are still not visible in my UI. Here the sumup of my file:

.
.
.
.b-button{
    @apply  max-h-10 #{!important};
    min-height: 40px !important;
}

$fa-font-path : '../node_modules/@bryntum/calendar/source/resources/fontawesome/webfonts';
$icon-font : 'Font Awesome 5 Pro';

@import '../node_modules/@bryntum/calendar/source/resources/sass/themes/classic.scss';

Can you please help me out with the standard way to get the fonts to work when customizing a theme?

Best regards,
Sara


Post by marcio »

Hey Sara,

We have a very detailed post regarding the font customization here viewtopic.php?p=87782#p87782

Please check it out and if you are still not able to make it work, let us know!

Best regards,
Márcio


Post by smalchow »

Hey, thanks for your quick response. This doesn't seem to help me out because I don't want to customize the font. I want to use the default font and this doesn't work already. You see that in my file I have only one import - the classic.scss. I expected it to also import the font awesome fonts but it doesn't seem so. Do you have an idea?

Maybe, this line was confusing:

$fa-font-path : '../node_modules/@bryntum/calendar/source/resources/fontawesome/webfonts';
$icon-font : 'Font Awesome 5 Pro';

I only added it because I thought this would solve my issue. I don't want to use the pro fonts. I want to use the default.

I also tried to see the example of a custom theme in the scheduler by downloading the scheduler trial but there is no example folder in it.

Best regards


Post by smalchow »

After further investigation I solved it. The solution was to copy fa-solid-900.tff and fa-solid-900.woff2 to my fonts folder and then add the line

$fa-font-path : '/fonts';

to my custome theme file.

Now my file looks like this:

.
.
.
.b-button{
    @apply  max-h-10 text-button #{!important};
    min-height: 40px !important;
}

$fa-font-path : '/fonts';

@import '../node_modules/@bryntum/calendar/source/resources/sass/themes/classic.scss';

Post by marcio »

Hey smalchow,

Glad that you figure it out and thanks for sharing the solution for others to see here in the forums.

Best regards,
Márcio


Post Reply