Our pure JavaScript Scheduler component


Post by peterjc »

I am trying out the scheduler in an Ionic 4 / Angular application, so have the scss file linked in via angular.json file, as per the example Ionic example, ie
angular.json
....
 "styles": [
              {
                "input": "node_modules/bryntum-scheduler/scheduler.default.min.css"
              },  
Soon, I will be looking at configurable theming , where the user can choose either a light or dark theme.

Will I also be able to somehow swap to the Dark theme that is shipped with the scheduler?

Thanks in advance for any information.

Post by mats »

Yes - You can see how this is done in our examples, you can use the same approach in your application.

Post by mats »


Post by peterjc »

Hi thanks for that.

I really could not find an example that does this?

At any rate, what I have done (as in the attached) is linek in two of the themes...
angular.json

 "styles": [
              {
                "input": "node_modules/bryntum-scheduler/scheduler.default.css"
              },
              {
                "input": "node_modules/bryntum-scheduler/scheduler.dark.css"
              },
an dI have added this in scheduler.page.ts...
 public changeTheme(): void {
    this.isLight = !this.isLight;
    const theme = this.isLight ? 'scheduler.default' : 'scheduler.dark';
    DomHelper.setTheme(theme);    
  }
However, when I load, I just get the dark theme (which is actually what I thought would happen) , and the DomHelper.setTheme does not do the swapping, so how would I include (or load) 2 themes to I can swap at runtime?

Thanks in advance for any further help
Attachments
scheduler-ionic1(27-9-19).zip
(219.95 KiB) Downloaded 126 times

Post by peterjc »

Hi, was still chasing how I can swap these themes at runtime.

Do I link them both in via the Angular.json?

Also, if this is the case, I could not get the following working...
public changeTheme(): void {
    this.isLight = !this.isLight;
    const theme = this.isLight ? 'scheduler.default' : 'scheduler.dark';
    DomHelper.setTheme(theme);    
  }
Or if there is an example on how to do this (in an Angular environment), that would be great too.

Thanks in advance

Post by Maxim Gorkovsky »

Hello.
DomHelper.setTheme works like this:
1. it creates new <link> element which points to the new theme
2. appends it to the DOM, which makes browser to load new theme
3. on success, DomHelper removes old link element, leaving new one in place

Theme name should be just 'light', 'dark' etc, no prefix.

Try to debug this and see which theme.css gets loaded? Is new css loading when you change the theme?

Post by peterjc »

Hi,

if I debug and turn on the exception breakpoint, the code halts at the following...
screenshot30.png
screenshot30.png (111.91 KiB) Viewed 2082 times
So, it is looking in document.head for either
#bryntum-theme
or "
[href$=\"".concat(oldThemeName, ".css\"]
In the debugger, I've had a look at the innerHTML for the head element (where it is looking)

I have attached this in the file headtext.txt

If I look in here for say scheduler.default.css, the only reference I can find is
/*# sourceMappingURL=scheduler.default.css.map*/
Likewise with scheduler.dark.css

Infact these are the only text with .css.

I don't link these css in the hmtl file, I add them to angular.json, eg
"styles": [
              {
                "input": "node_modules/bryntum-scheduler/scheduler.default.css"
              },
              {
                "input": "node_modules/bryntum-scheduler/scheduler.dark.css"
              },
              {
                "input": "src/theme/variables.scss"
              },
              {
                "input": "src/global.scss"
              }
Perhaps this is the reason it is not working?
Attachments
headtext.txt
(3.67 MiB) Downloaded 147 times

Post by Maxim Gorkovsky »

It seems so. Theming relies on certain element to be in the head:
<link rel="stylesheet" href="scheduler.stockholm.css" id="bryntum-theme">
So in order to make embedded theming work, you need to have this element. But since theming is only loading proper styles on the page, you can implement this yourself. You just need a code which would remove old theme css and load new theme css (which is what our themes do).

Post by peterjc »

Hi thanks for that.

Is there any Angular examples to show how to do this?

I can see the styles are all added to styles.js, but really not sure where this is then "put", an how I can get to them to swap (if not in the head)?

Thanks in advance

Post by Maxim Gorkovsky »

Im afraid there is no such demo.
AFAIK build tools tend to put all css to one bundle, which is why adding all themes to build doesn't make sense.
I can suggest to try this approach:
1. exclude them from the build, copy to build folder manually (or with an extension of the build script)
2. when app starts add default theme stylesheet to the head element, pointing them to build folder styles. Affter this DomHelper.setTheme should just work

Post Reply