-
Notifications
You must be signed in to change notification settings - Fork 13
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() {}
}