Search results

Customization

You can customize the entire appearance of the input element and Calendar by using custom cssClass property. and also you can use the calendar’s renderDayCell event to customize the appearance of the each day cell.

Below list of available classes are used to customize the entire DatePicker component.

Class Name Description
e-date-wrapper Applied to DatePicker wrapper
e-datepicker Applied to the DatePicker element.
e-float-text Applied to the floating label.
e-date-icon Applied to the DatePicker icon.
e-popup-wrapper Applied to DatePicker popup wrapper.
e-calendar Applied to Calendar element.
e-header Applied to Calendar header.
e-title Applied to Calendar title.
e-icon-container Applied to Calendar previous and next icon container.
e-prev Applied to Calendar previous icon.
e-next Applied to Calendar next icon.
e-weekend Applied to Calendar weekend dates.
e-other-month Applied to Calendar other month dates.
e-day Applied to each day cell of the Calendar.
e-selected Applied to Calendar selected dates.
e-disabled Applied to Calendar disabled dates.

The following example highlights the textbox and calendars’s weekend days by using custom CSS. Here we have used the e-custom-style class to highlight the textbox and disabled date and renderDayCell event to disable the weekends of every month.

Source
Preview
index.tsx
index.html
styles.css
import * as React from 'react';
import * as ReactDOM from 'react-dom';
// import the datepickercomponent
import { DatePickerComponent } from '@syncfusion/ej2-react-calendars';

export default class App extends React.Component<{}, {}> {

    public onRenderDayCell(args: RenderDayCellEventArgs): void {
        if (args.date.getDay() == 0 || args.date.getDay() == 6) {
            //sets isDisabled to true to disable the date.
            args.isDisabled = true;
            //To know about the disabled date customization, you can refer in "styles.css".
        }
    }

    render() {
        return (
            // specifies the tag for render the DatePicker component
            <DatePickerComponent id="datepicker" cssClass="e-custom-style" renderDayCell={this.onRenderDayCell} placeholder="Enter date"/>
        );
     }
 }

ReactDOM.render(<App />, document.getElementById('element'));
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React DatePicker</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-buttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-inputs/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-popups/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-calendars/styles/material.css" rel="stylesheet" />
    <link href="styles.css" rel="stylesheet" />
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
    <div id='element'>
        <div id='loader'>Loading....</div>
    </div>
</body>

</html>
#element {
    max-width: 250px;
    margin: 0 auto;
}

#loader {
    color: #008cff;
    height: 40px;
    left: 45%;
    position: absolute;
    top: 45%;
    width: 30%;
}


/*custom styles*/
/*Example styles*/

#container {
    visibility: hidden;
    max-width: 250px;
    margin: 0 auto;
}

#loader {
    color: #008cff;
    height: 40px;
    width: 30%;
    position: absolute;
    top: 45%;
    left: 45%;
}

#element {
    display: block;
}


.e-calendar .e-content td.e-disabled { /* csslint allow: adjoining-classes */
    background: blue;
}

.e-calendar .e-content td.e-disabled span { /* csslint allow: adjoining-classes */
    color: #fff;
}

/*customize the input element text color*/

.e-date-wrapper .e-input-group-icon.e-date-icon.e-icons { /* csslint allow: adjoining-classes*/
    color: blue;
}

.e-date-wrapper.e-custom-style.e-input-group::before, /* csslint allow: adjoining-classes*/
.e-date-wrapper.e-custom-style.e-input-group::after { /* csslint allow: adjoining-classes*/
    background: blue;
}

.e-date-wrapper.e-custom-style.e-input-group input.e-input::selection { /* csslint allow: adjoining-classes*/
    background: blue;
}

.e-date-wrapper.e-custom-style.e-input-group input.e-input::-moz-selection { /* csslint allow: adjoining-classes*/
    background: blue;
}

.e-date-wrapper.e-custom-style #element { /* csslint allow: adjoining-classes */
    color: blue;
}

/*customize the floating label and popup button text color*/
.e-date-wrapper.e-custom-style .e-input-group-icon.e-date-icon.e-icons, /* csslint allow: adjoining-classes */
.e-date-wrapper.e-custom-style .e-input-group-icon.e-date-icon.e-icons.e-active{ /* csslint allow: adjoining-classes */
    color: blue;
}