Show dates of other months

19 Dec 20221 minute to read

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

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

.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;
}

CSHTML

@Html.EJS().Calendar("element").Render()

<style>

    .e-calendar .e-content tr.e-month-hide, /* csslint allow: adjoining-classes*/
    .e-calendar .e-content td.e-other-month > span.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;
    }
</style>

NOTE

View Sample in GitHub.