CSS Classes

MindFusion.Scheduling for JavaScript is comprised of a hierarchy of dynamic HTML elements, which can be fully styled by CSS. The layout definition of the control is independent from its appearance to allow for greater flexibility in styling the calendar. The CSS classes, that define the structure of the control and are important for its proper functionality are built-in in order to prevent accidental changes, which could lead to undesirable behavior. Thus, the calendar control is able to function properly without any additional styling applied. The appearance of the control can be customized by using a predefined or a user-defined CSS theme.

To use a predefined theme set the calendar.theme property to the string identifier of the theme (e.g. "light") and make sure the corresponding CSS file is loaded by your application.

The following code references the standard.css stylesheets in the calendar web page:

HTML Copy Code
<head>
<title>MindFusion Scheduling for JavaScript</title>
<link rel="stylesheet" type="text/css" href="themes/standard.css" />
</head>

HTML Copy Code
<head> <title>MindFusion Scheduling for JavaScript</title> <link rel="stylesheet" type="text/css" href="themes/standard.css" /> </head>

Then it sets it to the calendar.theme property to be applied:

JavaScript Copy Code
var p = MindFusion.Scheduling;
// create a new instance of the calendar
this.calendar = new p.Calendar(document.getElementById("calendar"));
// set the view to Timetable
calendar.currentView = p.CalendarView.Timetable;
calendar.theme = "standard";

JavaScript Copy Code
var p = MindFusion.Scheduling; // create a new instance of the calendar this.calendar = new p.Calendar(document.getElementById("calendar")); // set the view to Timetable calendar.currentView = p.CalendarView.Timetable; calendar.theme = "standard";

The result:

A Timetable view with the standard theme.

The easiest way to create a user-defined theme is to copy one of the predefined ones, change its identifier and modify its contents as desired. User-defined styles can be applied to all elements of the calendar control.

Each CSS theme file first lists the themes that are general for the whole schedule. Those are the font, the styles for the selection and the cues, the buttons, the header and more. Each style has a name that explains its application. For example, the themes for the cues and the selection are .mfp-planner.name-of-theme .mfp-cue and .mfp-planner.first-theme .mfp-selection. You can always override some of the global settings in one of the view-specific styles.

The MindFusion.Scheduling for JavaScript library offers currently four predefined themes: light.css, standard.css, custom.css and business.css. You will find them all in the "themes" subfolder of your Samples folder. The "CSS Styling" topic provides you with a detailed tutorial on how to create a custom theme based on one of the existing themes.