Skip to end of metadata
Go to start of metadata

WebScheduler 5 presents you with more elegant look than ever before through full support for the new WebUI Unified Theming. It is designed for ease-of-use and out-of-the-box Scheduling experience, yet providing advanced level of customization and innovative features. WebScheduler allows you to build professional calendaring and scheduling application with very minimal efforts and time. The calendar and scheduler view is naturally integrated and automatically synchronized as you navigate on. The result is obvious: hassles-free Scheduling development, significantly reduced complexity with out-of-the-box integration and advanced feature-sets.

If you're not familiar with WebUI unified theming, please refer to Unified Theming and WebUI Modern Theme.

On this page:

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.

Responsive Design

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.

Features

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.

Applying Theme

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 new to the unified theming concept or unfamiliar with WebUI modern theme, please visit Unified Theming and New WebUI Modern Theme respectively. These two pages provide comprehensive details you need to know to understand how WebUI modern theme works.

Best Practices

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, UseDefaultStyleAllDayEventAreaHeight, 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.

In conclusion, you should avoid defining settings that might affect appearance such as explicit styles, since all styles are defined externally and streamlined in the CSS stylesheets. Defining appearance-related settings might introduce conflict with the theme definition and produce unexpected results.
As the result, your WebScheduler control definition should look much cleaner and simpler. The following example shows a simple WebScheduler control that should be themed perfectly.

Customizing Theme

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.

Customizing the WebScheduler theme source requires you to copy the source to your projects and configure a SCSS compiler. For more information how to customize WebUI theme source, please see Customizing WebUI Modern Theme.

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.

For more information how to customize SCSS variables and ensure the output is properly generated, see Customizing SCSS Variables.

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.

webscheduler.isl

For complete visualization details of WebScheduler modern theme, please refer to WebScheduler Modern Theme Style Reference.