Skip to content

Commit 33f91b7

Browse files
chintan13chintan13
committed
closes #37, isSundayHighlighted v1.4.3
1 parent ba9d076 commit 33f91b7

File tree

9 files changed

+69
-26
lines changed

9 files changed

+69
-26
lines changed

‎projects/ionic4-datepicker/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@logisticinfotech/ionic4-datepicker",
3-
"version": "1.4.2",
3+
"version": "1.4.3",
44
"description": "ionic4-datepicker inspired by rajeshwar patlolla ionic1 datepicker",
55
"keywords": ["Ionic-datepicker", "ionic", "ionic datepicker", "datepicker", "datepicker ionic", "datepicker for ionic", "datepicker for ionic framework"],
66
"license": "SEE LICENSE IN LICENSE",

‎projects/ionic4-datepicker/src/lib/ionic4-datepicker-modal/ionic4-datepicker-modal.component.html

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -47,8 +47,14 @@ <h1 *ngIf="mainObj?.titleLabel">{{mainObj?.titleLabel}}</h1>
4747
<ion-col>
4848
<ion-grid class="dp-weeks-container" *ngIf="daysList" [ngClass]="isMonthYearSelectorOpen ? 'dp-virual-scroller-hide' : 'dp-virual-scroller-show'">
4949
<ion-row class=" dp-weeks-name">
50-
<ion-col *ngFor="let weekName of mainObj?.weeksList;">
51-
<div class="weeks">{{weekName}}</div>
50+
<ion-col *ngFor="let weekName of mainObj?.weeksList; let i = index">
51+
<!-- <div class="weeks">{{weekName}} {{i}}</div> -->
52+
<div class="weeks" *ngIf="mainObj?.mondayFirst"
53+
[style.color]="mainObj?.isSundayHighlighted && i === 6 ? mainObj?.isSundayHighlighted.fontColor : ''">
54+
{{weekName}}</div>
55+
<div class="weeks" *ngIf="!mainObj?.mondayFirst"
56+
[style.color]="mainObj?.isSundayHighlighted && i === 0 ? mainObj?.isSundayHighlighted.fontColor : ''">
57+
{{weekName}}</div>
5258
</ion-col>
5359
</ion-row>
5460
<ion-row *ngFor="let row of rows;" class="dp-days-list">
@@ -74,10 +80,6 @@ <h1 *ngIf="mainObj?.titleLabel">{{mainObj?.titleLabel}}</h1>
7480
</ion-list>
7581
</ion-content>
7682

77-
<!-- <ion-content scrollX="false" scrollY="false" no-padding class="ionic_datepicker_modal_content">
78-
79-
</ion-content> -->
80-
8183
<ion-footer>
8284
<ion-toolbar>
8385
<ion-grid no-padding>

‎projects/ionic4-datepicker/src/lib/ionic4-datepicker-modal/ionic4-datepicker-modal.component.ts

Lines changed: 17 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -304,6 +304,14 @@ export class Ionic4DatepickerModalComponent implements OnInit, OnDestroy {
304304

305305
const hightLightDate = this.highlightedDates[tempDate.getTime()];
306306

307+
let fontColor = null;
308+
309+
if (tempDate.getDay() === 0 && this.mainObj.isSundayHighlighted && this.mainObj.isSundayHighlighted.fontColor) {
310+
fontColor = this.mainObj.isSundayHighlighted.fontColor;
311+
} else if (hightLightDate && hightLightDate.fontColor) {
312+
fontColor = hightLightDate.fontColor;
313+
}
314+
307315
this.daysList.push({
308316
date: tempDate.getDate(),
309317
month: tempDate.getMonth(),
@@ -312,7 +320,8 @@ export class Ionic4DatepickerModalComponent implements OnInit, OnDestroy {
312320
epoch: tempDate.getTime(),
313321
disabled: disabled,
314322
color: hightLightDate && hightLightDate.color ? hightLightDate.color : null,
315-
fontColor: hightLightDate && hightLightDate.fontColor ? hightLightDate.fontColor : null
323+
fontColor: fontColor
324+
// fontColor: hightLightDate && hightLightDate.fontColor ? hightLightDate.fontColor : null
316325
});
317326
}
318327

@@ -482,6 +491,13 @@ export class Ionic4DatepickerModalComponent implements OnInit, OnDestroy {
482491

483492
this.setHightlightedDates(objConfig);
484493
}
494+
495+
objConfig.isSundayHighlighted = {};
496+
if (config.isSundayHighlighted) {
497+
const isSundayHighlighted = config.isSundayHighlighted;
498+
objConfig.isSundayHighlighted.fontColor = isSundayHighlighted.fontColor ? isSundayHighlighted.fontColor : null;
499+
}
500+
485501
// console.log('config =>', objConfig);
486502
return objConfig;
487503
}

‎src/app/datepicker-button/datepicker-button.page.ts

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -84,15 +84,18 @@ export class DatepickerButtonPage implements OnInit {
8484
// { date: new Date('2019-08-10'), color: '#ee17bf' },
8585
// { date: new Date('2019-08-12'), color: '#50f2b1' },
8686
// { date: new Date('2019-08-14'), color: '#f2ef50' },
87-
// ]
87+
// ],
88+
// isSundayHighlighted: {
89+
// fontColor: 'red'
90+
// }
8891
};
8992
}
9093

9194
async openDatePicker() {
9295
const datePickerModal = await this.modalCtrl.create({
9396
component: Ionic4DatepickerModalComponent,
9497
cssClass: 'li-ionic4-datePicker',
95-
componentProps: { 'objConfig': this.datePickerObj }
98+
componentProps: { 'objConfig': this.datePickerObj, 'selectedDate': this.selectedDate }
9699
});
97100
await datePickerModal.present();
98101

‎src/app/datepicker-component/datepicker-component.page.ts

Lines changed: 23 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -67,17 +67,29 @@ export class DatepickerComponentPage implements OnInit {
6767
// prevArrowSrc: 'assets/images/arrow_left.svg'
6868
}, // This object supports only SVG files.
6969

70-
// highlightedDates: [
71-
// { date: new Date('2019-07-10'), color: '#ee17bf' },
72-
// { date: new Date('2019-07-12'), color: '#50f2b1' },
73-
// { date: new Date('2019-07-14'), color: '#f2ef50' },
74-
// { date: new Date('2019-08-10'), color: '#ee17bf' },
75-
// { date: new Date('2019-08-12'), color: '#50f2b1' },
76-
// { date: new Date('2019-08-14'), color: '#f2ef50' },
77-
// ]
70+
highlightedDates: [
71+
{ date: new Date('2019-09-10'), color: '#ee88bf' },
72+
{ date: new Date('2019-09-12'), color: '#50f2b1' },
73+
{ date: new Date('2019-09-14'), color: '#f2ef50' },
74+
{ date: new Date('2019-09-16'), color: '#ee99bf' },
75+
{ date: new Date('2019-09-18'), color: '#5000b1' },
76+
{ date: new Date('2019-09-20'), color: '#f21250' },
77+
{ date: new Date('2019-08-10'), color: '#ee88bf' },
78+
{ date: new Date('2019-08-12'), color: '#50f2b1' },
79+
{ date: new Date('2019-08-14'), color: '#f2ef50' },
80+
{ date: new Date('2019-08-16'), color: '#ee99bf' },
81+
{ date: new Date('2019-08-18'), color: '#5000b1' },
82+
{ date: new Date('2019-08-20'), color: '#f21250' },
83+
{ date: new Date('2019-07-10'), color: '#ee88bf' },
84+
{ date: new Date('2019-07-12'), color: '#50f2b1' },
85+
{ date: new Date('2019-07-14'), color: '#f2ef50' },
86+
{ date: new Date('2019-07-16'), color: '#ee99bf' },
87+
{ date: new Date('2019-07-18'), color: '#5000b1' },
88+
{ date: new Date('2019-07-20'), color: '#f21250' },
89+
],
90+
// isSundayHighlighted: {
91+
// fontColor: 'red'
92+
// }
7893
};
7994
}
80-
81-
82-
8395
}

‎src/app/datepicker-directive/datepicker-directive.page.ts

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -86,8 +86,12 @@ export class DatepickerDirectivePage implements OnInit {
8686
// { date: new Date('2019-07-14'), color: '#f2ef50', fontColor: '#fff' },
8787
// { date: new Date('2019-07-16'), color: '#ee99bf', fontColor: '#fff' },
8888
// { date: new Date('2019-07-18'), color: '#5000b1', fontColor: '#fff' },
89-
// { date: new Date('2019-07-20'), color: '#f21250', fontColor: '#fff' },
90-
]
89+
// { date: new Date('2019-09-01'), color: '#5000b1', fontColor: '#fff' },
90+
],
91+
92+
isSundayHighlighted: {
93+
fontColor: 'grey'
94+
}
9195
};
9296
}
9397
}

‎src/app/reactive-form/reactive-form.page.ts

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -92,7 +92,10 @@ export class ReactiveFormPage implements OnInit {
9292
// { date: new Date('2019-08-10'), color: '#ee17bf' },
9393
// { date: new Date('2019-08-12'), color: '#50f2b1' },
9494
// { date: new Date('2019-08-14'), color: '#f2ef50' },
95-
// ]
95+
// ],
96+
// isSundayHighlighted: {
97+
// fontColor: 'red'
98+
// }
9699
};
97100
}
98101

‎src/app/template-driven-form/template-driven-form.page.ts

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -84,7 +84,10 @@ export class TemplateDrivenFormPage implements OnInit {
8484
// { date: new Date('2019-08-10'), color: '#ee17bf' },
8585
// { date: new Date('2019-08-12'), color: '#50f2b1' },
8686
// { date: new Date('2019-08-14'), color: '#f2ef50' },
87-
// ]
87+
// ],
88+
// isSundayHighlighted: {
89+
// fontColor: 'red'
90+
// }
8891
};
8992
}
9093

‎src/global.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212

1313
.li-ionic4-datePicker {
1414
.modal-wrapper {
15-
height: 460px;
15+
height: 470px;
1616
max-height: 100%;
1717
width: 312px;
1818
border-radius: 0px;

0 commit comments

Comments
 (0)