search envelope-o feed check
Home Unanswered Active Tags New Question
user comment-o

Where to put Custom CSS files

Asked by FM
3 years ago.

Hello there,

I would like to use a custom Class for the Navigator element. Where should the css file be located / stored ?

Thanks

Answer posted by Dan Letecky [DayPilot]
3 years ago.

When styling the Navigator (or any other component) there are two options:

1. Use a custom theme. You can create a theme using the online theme designer (https://themes.daypilot.org/) or you can build it manually.

When using a custom theme, all classes are prefixed with the theme name.

Make sure that the theme css is included in the page:

<html>
<head>
<link type="text/css" rel="stylesheet" href="my_theme.css" />   
</head>
...

and that the Navigator "theme" property loads the theme:

var nav = new DayPilot.Navigator("nav");
nav.theme = "my_theme.css";
// ...
nav.init()

2. You can also override styling for specific elements while using the default theme. In that case you need to include your CSS (using <style> or <link>).

In this case, you need to make sure that the custom styles are applied:

* use a more specific selector than the theme
* add "!important" to the style definition

Please let me know if it didn't help.

Answer posted by FM
3 years ago.

Great ! That did the trick.
Thanks.

I went through the docs as well to understand how to change the appearance of a specific date in the Navigator, but I could not find it.

Let's say I want to change color to red for date = 2019-06-24. How should I proceed ?

Thanks again.

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

Here you can find details about building a custom theme:

https://doc.daypilot.org/navigator/css/
https://kb.daypilot.org/35228/list-of-css-classes-used-in-cssonly-mode-navigator/

If you want to customize a specific day (set custom HTML/CSS) you can use onBeforeCellRender event:

https://doc.daypilot.org/navigator/cell-customization/
https://api.daypilot.org/daypilot-navigator-onbeforecellrender/

Comment posted by FM
3 years ago.

Perfect and beautiful !

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