release: 2.1.7

demo/package.json

@@ -32,7 +32,7 @@
     "cordova-plugin-splashscreen": "^4.0.3",
     "cordova-plugin-statusbar": "^2.2.2",
     "cordova-plugin-whitelist": "^1.3.1",
-    "ion2-calendar": "^2.1.6-beta.2",
+    "ion2-calendar": "^2.1.7",
     "ionic-angular": "3.9.2",
     "ionic-plugin-keyboard": "^2.2.1",
     "ionicons": "3.0.0",
@@ -43,7 +43,10 @@
   },
   "devDependencies": {
     "@ionic/app-scripts": "3.1.0",
-    "typescript": "2.4.2"
+    "i": "0.3.6",
+    "npm": "5.7.1",
+    "typescript": "2.4.2",
+    "ws": "3.3.2"
   },
   "description": "An Ionic project",
   "cordova": {
@@ -61,4 +64,4 @@
       "ionic-plugin-keyboard": {}
     }
   }
-}
+}

demo/src/theme/variables.scss

@@ -87,3 +87,5 @@ $colors: (
 
 @import "roboto";
 @import "noto-sans";
+
+@import "../../ion2-calendar/dist/index";

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ion2-calendar",
-  "version": "2.1.6-beta.2",
+  "version": "2.1.7",
   "description": "A date picker component for ionic2 ",
   "main": "./dist/index.js",
   "typings": "./dist/index.d.ts",
@@ -13,16 +13,17 @@
     "build:ts": "tsc && ngc",
     "build:copy-sources": "gulp copy-sources",
     "test": "echo \"Error: no test specified\"",
-    "lint": "tslint -c tslint.json 'src/**/*.ts'"
+    "lint": "tslint -c tslint.json 'src/**/*.ts'",
+    "packagr": "ng-packagr -p package.json"
   },
   "repository": {
     "type": "git",
     "url": "https://github.com/HsuanXyz/ion2-calendar.git"
   },
   "devDependencies": {
     "@angular/common": "4.4.6",
-    "@angular/compiler": "4.4.6",
-    "@angular/compiler-cli": "4.4.6",
+    "@angular/compiler": "^5.0.0",
+    "@angular/compiler-cli": "^5.0.0",
     "@angular/core": "4.4.6",
     "@angular/forms": "4.4.6",
     "@angular/http": "4.4.6",
@@ -33,8 +34,10 @@
     "ionic-angular": "3.7.1",
     "ionicons": "~3.0.0",
     "moment": "^2.19.1",
+    "ng-packagr": "^2.0.0",
     "npm-run-all": "^4.1.2",
     "rxjs": "5.5.2",
+    "tsickle": "^0.27.2",
     "tslint": "~5.7.0",
     "tslint-eslint-rules": "^4.1.1",
     "typescript": "^2.5.3",
@@ -50,5 +53,15 @@
   "license": "MIT",
   "dependencies": {
     "moment": "^2.19.3"
+  },
+  "$schema": "./node_modules/ng-packagr/package.schema.json",
+  "ngPackage": {
+    "lib": {
+      "entryFile": "src/index.ts",
+      "styleIncludePaths": [""],
+      "umdModuleIds": {
+        "moment": "moment"
+      }
+    }
   }
 }

src/calendar.model.ts

@@ -22,6 +22,8 @@ export interface CalendarDay {
     title?: string;
     subTitle?: string;
   };
+  isFirst?: boolean;
+  isLast?: boolean;
 }
 
 export class CalendarMonth {

src/components/calendar.component.scss

@@ -51,6 +51,26 @@ ion-calendar {
     }
   }
 
+  .days.between {
+    .days-btn.is-last, .days-btn.is-first {
+      border-radius: 0;
+    }
+  }
+
+  .component-mode {
+    .days.startSelection.is-last-wrap {
+      &::after {
+        border-radius: 0;
+      }
+    }
+
+    .days.endSelection.is-first-wrap {
+      &::after {
+        border-radius: 0;
+      }
+    }
+  }
+
 }
 
 

src/components/calendar.component.ts

@@ -60,7 +60,8 @@ export const ION_CAL_VALUE_ACCESSOR: Provider = {
                          [weekStart]="_d.weekStart">
       </ion-calendar-week>
 
-      <ion-calendar-month [(ngModel)]="_calendarMonthValue"
+      <ion-calendar-month class="component-mode"
+                          [(ngModel)]="_calendarMonthValue"
                           [month]="monthOpt"
                           [readonly]="readonly"
                           (onChange)="onChanged($event)"

src/components/month.component.scss

@@ -94,10 +94,44 @@
             color: $color;
         }
     }
-    .days.between {
-        background-color: lighten(bindColors($background-color), 12%);
+
+  .days.startSelection:nth-child(7n):after,
+  .days.between:nth-child(7n) button.days-btn,
+  button.days-btn.is-last {
+    border-radius: 0 36px 36px 0;
+    &.on-selected {
+      border-radius: 50%
+    }
+  }
+
+  .days.endSelection:nth-child(7n+1):after,
+  .days.between:nth-child(7n+1) button.days-btn,
+  button.days-btn.is-first {
+    border-radius: 36px 0 0 36px;
+  }
+
+  .startSelection button.days-btn.is-first,
+  .endSelection button.days-btn.is-first,
+  button.days-btn.is-first.on-selected,
+  button.days-btn.is-last.on-selected,
+  .startSelection button.days-btn.is-last,
+  .endSelection button.days-btn.is-last {
+    border-radius: 50%
+  }
+
+  .startSelection.is-last-wrap {
+    &::after {
+      border-radius: 0 36px 36px 0;
     }
-    .days .on-selected p {
+  }
+
+  .endSelection.is-first-wrap {
+    &::after {
+      border-radius: 36px 0 0 36px;
+    }
+  }
+
+  .days .on-selected p {
         color: $color;
     }
     .startSelection,
@@ -189,4 +223,4 @@ ion-calendar-month {
     .cal-color {
         @include month-color(cal-color);
     }
-}
+}

src/components/month.component.ts

@@ -43,6 +43,8 @@ export const MONTH_VALUE_ACCESSOR: any = {
             <div class="days"
                  [class.startSelection]="isStartSelection(day)"
                  [class.endSelection]="isEndSelection(day)"
+                 [class.is-first-wrap]="day?.isFirst"
+                 [class.is-last-wrap]="day?.isLast"
                  [class.between]="isBetween(day)">
               <ng-container *ngIf="day">
                 <button type='button'
@@ -52,6 +54,8 @@ export const MONTH_VALUE_ACCESSOR: any = {
                         [class.marked]="day.marked"
                         [class.last-month-day]="day.isLastMonth"
                         [class.next-month-day]="day.isNextMonth"
+                        [class.is-first]="day.isFirst"
+                        [class.is-last]="day.isLast"
                         [class.on-selected]="isSelected(day.time)"
                         [disabled]="day.disable">
                   <p>{{day.title}}</p>
@@ -96,7 +100,6 @@ export class MonthComponent implements ControlValueAccessor, AfterViewInit {
   }
 
   writeValue(obj: any): void {
-    console.log(obj);
     if (Array.isArray(obj)) {
       this._date = obj;
     }

src/index.scss

@@ -0,0 +1,6 @@
+@import "components/month.component";
+@import "components/month-picker.component";
+@import "components/calendar-week.component";
+@import "components/calendar.modal";
+@import "components/calendar.component";
+@import "functions";

src/services/calendar.service.ts

@@ -158,7 +158,9 @@ export class CalendarService {
       isNextMonth: date.month() > month,
       marked: dayConfig ? dayConfig.marked || false : false,
       cssClass: dayConfig ? dayConfig.cssClass || '' : '',
-      disable: _disable
+      disable: _disable,
+      isFirst: date.date() === 1,
+      isLast: date.date() === date.daysInMonth()
     }
   }