Our pure JavaScript Scheduler component


Post by mirkor89 »

Hi Bryntum team,

I'd like to set a static theme. In particular the material.
I saved the themes file css in a folder and added the following link to the index.html file:

  <link rel="stylesheet" href="%PUBLIC_URL%/themes/scheduler.material.css" id="bryntum-theme" data-bryntum-theme />

I saw in the docs that I should to use the function:

DomHelper.setTheme('material')

But I can't understand where I have to call it.

Could you help me?

Thank you for your help,
Mirko


Post by johan.isaksson »

Hi,

DomHelper.setTheme() is for changing themes dynamically, if you want a static theme there is no need to use it. You only need to include the themes css as you seem to be doing already.

Hope that clarifies it!

Best regards,
Johan Isaksson

Post by mirkor89 »

Hi Johan,

Thank you for your replay.
I set only the link in the head but it doesn't work. For that I thought that I needed some function.

Thank you for your help,
Mirko


Post by johan.isaksson »

Hi,

There is nothing special with the file, it is plain CSS. Just having it included on page is enough. Try and verify that the path is correct on the Network tab in devtools?

Best regards,
Johan Isaksson

Post by mirkor89 »

Ok I changed the position of the file because I the app could't find the css. Now I can see it in the network but it's still not working.
New path:

  <link rel="stylesheet" href="../src/scheduler.material.css" id="bryntum-theme" data-bryntum-theme />
Attachments
Immagine 2022-05-04 105043.png
Immagine 2022-05-04 105043.png (68.88 KiB) Viewed 650 times

Thank you for your help,
Mirko


Post by johan.isaksson »

Looks like the Scheduler is rendered, but with another theme. You must be including a theme elsewhere in your application, please check your sources

Best regards,
Johan Isaksson

Post by mirkor89 »

Hi Johan,

I checked all my application but I can't find where the theme is already set.
Do you know if there is another way to set the theme other to use the link in html.index?

Thank you for your help,
Mirko


Post by alex.l »

Please have a look at our guide here:
https://bryntum.com/docs/scheduler/guide/Scheduler/customization/styling#using-different-themes

You need to add CSS to have it loaded.
If you used data-bryntum-theme attribute on the link tag, you will be able to apply that theme using https://bryntum.com/docs/scheduler/api/Core/helper/DomHelper#function-setTheme-static

If you have problems with that, please attach your application here and we will have a look what's wrong.

All the best,
Alex


Post by mirkor89 »

Hi Alex,

I found the problem. In the end I used the import

import '@bryntum/scheduler/scheduler.classic-dark.css'

. Probably it was overwrote the local theme.
Thank you for the support.

Thank you for your help,
Mirko


Post Reply