Introducing WebScheduler Modern Theme
In the past versions, WebScheduler control is typically styled by specifying the style definition explicitly in the control markup. However, this approach apply their own styles individually and did not support reusing a common style definition. Consequently, you can't easily leverage modern CSS frameworks such as Bootstrap to create a consistent theming around your application.
To address these challenges, WebScheduler 5 introduces a brand-new modern theme which was built upon unified theming framework. It's now possible to streamline the WebScheduler styles in a unified theme,enabling a consistent look-and-feel across the application.
The new WebScheduler theme was designed to work well with responsive design in mind which has been widely adopted in today's modern web applications. To achieve this, WebScheduler has been thoroughly redesigned in both architectural and interface level.
Building on unified theming and Bootstrap framework, the new WebScheduler theme now introduces several user interface to support multiple responsive design scenario.
This section describes the features related to the unified modern theme applicable in WebScheduler component.
Frame Style Variants
The modern theme sports three frame variants such as shown in the illustration below. By default, the frame with border and drop shadow will be applied.
The frameless variant is suitable in scenario when WebScheduler is placed in a container which already has border or decorators such as in panels.
To apply a specific frame variant, i.e., scheduler-frameless, simply add the style to the FrameStyle's CssClass property, see the example below.
Building on unified theming concept, the WebScheduler modern theme is designed as part of the WebUI modern theme. This means that once you applied the WebUI modern theme, it will automatically theme the WebScheduler control without additional code. To learn more how to apply the WebUI modern theme, please see Applying Unified Modern Theme in WebUI Application and Creating a New WebUI Application with Unified Modern Theme.
If you're applying the modern theme to an existing web projects, please review your existing code to comply with the following best practices:
- Remove appearance settings that are defined explicitly in the control. For instances, UseDefaultStyle, AllDayEventAreaHeight, AllDayEventHeight, MaxAllDayEventAreaHeight and RowHeight are examples of settings that might affect appearance.
- Remove style settings that are defined explicitly in the control. Most style settings have Style suffix and are type of either WebStyle or DynamicStyle, such as SchedulerFramestyle, WorkHourStyle, AllDayEventStyle, and so on.
- If you applied a WebScheduler layout file (.isl) from code behind, the code should be no longer necessary and can be safely removed.
With unified theming concept, you no longer specify any style settings explicitly in the control markup. Written completely in developer-friendly SCSS language, all WebScheduler styles are now streamlined in CSS classes contained in the theme source. This makes it easier for you to review the overall style definitions and make necessary changes to the styles.
WebScheduler SCSS Variables
For easy customization, the WebScheduler modern theme has provided a number of variables relating to common appearance settings. The following list shows the available SCSS variables for WebScheduler.
The complete SCSS variables can be found in _variables.scss, while the WebScheduler theme source can be found in the _webscheduler.scss file located in the theme source folder.
WebScheduler Layout Definition
In addition to the styles defined in the SCSS, one of the main component in a theme source is the component layout definition. The layout definition contains the contracts between the control and the CSS classes. The connection between the layout definition and the corresponding controls are automatically taken care by the WebUI Theme Framework at runtime.
To get a better understanding of the WebScheduler styles, see its layout definition below.