Search results

Show other months dates in Angular Calendar component

14 Apr 2021 / 1 minute to read

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

The below styles changes the Calendar’s other month dates to visible state from its hidden state.

Copied to clipboard
.e-calendar .e-content tr.e-month-hide {
    display: table-row;
}

.e-calendar .e-content td.e-other-month>span.e-day {
    display: inline-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
app.component.ts
app.module.ts
main.ts
styles.css
Copied to clipboard
import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    template: `
        <!-- To show other months date refer the "styles.css". -->
        <ejs-calendar [value]='dateValue'></ejs-calendar>
        `
})
export class AppComponent {
    public dateValue: Date = new Date();
}
Copied to clipboard
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
//Syncfusion ej2-angular-calendars module
import { CalendarModule } from '@syncfusion/ej2-angular-calendars';
import { AppComponent } from './app.component';


/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule,
        CalendarModule //declaration of ej2-angular-calendars module into NgModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }
Copied to clipboard
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
Copied to clipboard
/* Example -styles */

#container {
    visibility: hidden;
}

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

#element {
    display: block;
    height: 350px;
}

#wrapper {
    width: 250px;
    margin: 0 auto;
}


/* Custom -styles */


.e-calendar .e-content tr.e-month-hide { /* csslint allow: adjoining-classes*/
    display: table-row;
}

/* csslint ignore:start */
.e-calendar .e-content td.e-other-month>span.e-day {
/* csslint ignore:end */
    display: inline-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;
}