CSS Styling

All colors, borders and fonts for your calendar are provided by CSS classes. The appearance properties from the MindFusion.Scheduling for JavaScript API customize the structure of the schedule in terms of design but do not offer direct setting of pens or brushes.

The CSS Classes topic covers in depth how you should use and reference a CSS style sheet from your calendar. In this tutorial we will show you how to customize one.

Each of the predefined themes that come with MindFusion.Scheduling for JavaScript contains the styling settings for all 6 views supported by the calendar. In our sample we use just the single month view and we will customize only the styles that are used by it.

I. Styling the Forms

We create a new styling sheet and we name it "first-theme.css". There we copy only the styles from the business.css file that start with  ".mfp-popup.business" - approximately the first 150 lines. The CSS theme provides universal styling only for the popup forms that are rendered by the calendar. The rest of the appearance is styled according to the chosen view.

After we copy the styles, we rename the "business" word with "first-theme".

Note
It is important that the extension word for your CSS styles matches exactly the name of the style as you would set it to the Calendar.theme property.

For example:
 

JavaScript

calendar.theme = "first-theme";

and

CSS

.mfp-popup.first-theme
{
    color: #404040;
    box-shadow: 4px 4px 4px rgba(0,0,0,0.35);
    font-family: Verdana, Arial, Sans-Serif;
    font-size: 8pt;
    background: #5a79a5;
    border: solid 1px #e0e9e9;
}

II. Styling the View

We use the SingleMonth view, we go to the place in the original business.css file where the css styles for single month are declared and copy them. We recognize them thanks to their name – it contains "month-view". We copy them all and rename them again. so ".mfp-month-view.fbusiness" becomes ".mfp-month-view.first-theme".

III. Adjusting the Colors

Now that we have completed constructing the CSS file, it is time to customize the style. We change the colors as we want – in pastel tones. You can use any CSS style look up tool or even your browser to identify the themes and the colors  associated with them. Here is our monthly calendar with the "first-theme" applied:

Interactive monthly schedule with custom styling.