Search results

Show Dates of Other Months in JavaScript (ES5) Calendar control

22 Jul 2021 / 1 minute to read

The following example demonstrates how to show dates of other months.

Using the styles below, you can bring the dates of other months to visibility from its hidden state.

Copied to clipboard
.e-calendar .e-content tr.e-month-hide,
.e-calendar .e-content td.e-other-month>span.e-day {
    display: block;
}

.e-calendar .e-content td.e-month-hide,
.e-calendar .e-content td.e-other-month {
    pointer-events: auto;
    touch-action: auto;
}
Source
Preview
index.js
index.html
styles.css
Copied to clipboard
ej.base.enableRipple(true);
   
   var calendar = new ej.calendars.Calendar({
    });
    calendar.appendTo('#element');
Copied to clipboard
<!DOCTYPE html><html lang="en"><head>
    <title>Essential JS 2 Calendar control</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Typescript UI Controls">
    <meta name="author" content="Syncfusion">
    <!--style reference from the Calendar component-->
    <link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-calendars/styles/material.css" rel="stylesheet">
    <!--style reference from app-->
    <link href="styles.css" rel="stylesheet">
    
    
<script src="https://cdn.syncfusion.com/ej2/dist/ej2.min.js" type="text/javascript"></script>
</head>

<body>
    
    <div id="container">
        <!--element which is going to render the Calendar-->
        <div id="element"></div>
    </div>
    <style>
        .e-calendar .e-content tr.e-month-hide,
        .e-calendar .e-content td.e-other-month>span.e-day {
            display: block;
        }

        .e-calendar .e-content td.e-month-hide,
        .e-calendar .e-content td.e-other-month {
            pointer-events: auto;
            touch-action: auto;
        }
    </style>


<script>
var ele = document.getElementById('container');
if(ele) {
    ele.style.visibility = "visible";
 }   
        </script>
<script src="index.js" type="text/javascript"></script>
</body></html>
Copied to clipboard
/* 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;
}


/* Custom styles */

.e-calendar .e-content tr.e-month-hide, /* csslint allow: adjoining-classes*/  
.e-calendar .e-content td.e-other-month > .e-day { /* csslint allow: adjoining-classes*/  
    display: block;
}

.e-calendar .e-content td.e-month-hide, /* csslint allow: adjoining-classes*/  
.e-calendar .e-content td.e-other-month { /* csslint allow: adjoining-classes*/  
    pointer-events: auto;
    touch-action: auto;
}