Skip to content
DayPilot

Clean solution to import custom scheduler theme with prefix CSS in Angular project

Asked by FM
4 years ago.

We've made a theme at this page https://themes.daypilot.org/scheduler/create, with a prefix name included and downloaded the zip.

We do find out how to implement a standard theme step by step, but not how to build in a custom theme with prefix. Can you please tell us what the best way is to import a custom scheduler theme in a Angular project?

Thank you!

how-tojavascriptangularcustomcssprefix
Answer posted by Dan Letecky [DayPilot]
4 years ago.

Two steps are required:

1. Include the theme in the global CSS (styles.css): 

@import url('themes/your_theme.css');

2. Activate it using the "theme" config property: 

config: DayPilot.SchedulerConfig = {
  theme: "your_theme",
  // ...
}

See also the following tutorial:
https://code.daypilot.org/81784/angular-scheduler-css-themes

Comment posted by SB
4 years ago.

Thank you for the quick reply.

During build the terminal indicates that the folder demo/themes cannot be found. What could go wrong here?

Comment posted by Dan Letecky [DayPilot]
4 years ago.

You need to copy the theme CSS file to your Angular project and use a relative path in the @import clause. You might have a typo in the path or you forgot to copy the CSS file to the project.

Comment posted by SB
4 years ago.

thank you! it works :)

This question is more than 1 month old and has been closed. Please create a new question if you have anything to add.