Desktop Components ShowcaseMobile Components Showcase
ace:schedule - Custom Styling

In terms of styling, the <ace:schedule> component's CSS scheme is designed to be easy to customize. Individual events can have their own styling as well. In this demo, all "meeting" and "public" events are rendered with their own style classes and appear as yellow and green, respectively.

The <ace:schedule> component also uses an enhanced styling by default. This enhanced styling is only applied to the events grid to make the events easier to read, regardless of the theme being used. This is done by styling the events in additional ways not covered by Themeroller.

In this demo, the custom styling is based on the enhanced styling CSS classes. So, disabling the enhanced styling will also remove the custom styling, and thus it will be easier to appreciate the visual improvements of the enhanced and custom stylings. There are 8 predefined custom classes to choose from, which already include different shadings for overlapping events. It is also very easy to specify a custom style class defined on the page, as can be seen in this demo.

Select view mode

Select class for overlapping events

Select class for conference events

Source Code