Skip to content

usage of markDates option

Keke edited this page May 27, 2020 · 4 revisions
<input angular-mydatepicker [(ngModel)]="model" [options]="myDatePickerOptions" 
    #dp="angular-mydatepicker">
import {IAngularMyDpOptions} from 'angular-mydatepicker';

export class MyApp {

    myDatePickerOptions: IAngularMyDpOptions = {
        stylesData: {
            styles: `
                .yogaDates {
                    background-color: yellow;
                }
                .karateDates {
                    background-color: lightgreen;
                } 
                .yogaAndKarateDates {
                    background: repeating-linear-gradient(-45deg, #ccc 7px, 
                                  #ccc 8px, transparent 7px, transparent 14px);
                    color: red;
                    font-weight: bold;  
                } 
            `
        },
        markDates: [
        {
            // yoga dates - set background color of td element
            dates: [{day: 1, month: 1, year: 2020}, {day: 5, month: 1, year: 2020}],
            styleClass: 'yogaDates'
        },
        {
            // karate dates - set background color of td element
            dates: [{day: 2, month: 1, year: 2020}, {day: 4, month: 1, year: 2020}],
            styleClass: 'karateDates'
        },
        {
            // yoga and karate dates - show red triangle and set background...
            color: 'red',
            dates: [{day: 3, month: 1, year: 2020}],
            styleClass: 'yogaAndKarateDates'
        }]
        // other options here
    }

    constructor() {}
}

Above options on calendar

Clone this wiki locally