suggest

README.md

@@ -1,11 +1,14 @@
-# Angular Datepicker2 : v2.1.x
+# Angular Datepicker2 : v2.1.x 
+
+Add suggestions from v2.2.x
+Add events from v2.1.x
 
 ![Node.js CI](https://github.com/nsnayp13/angular-datepicker2/workflows/Node.js%20CI/badge.svg)
 
 
 `npm i angular-datepicker2`
 
-![angular datepicker2](https://s4.gifyu.com/images/Peek-2020-02-27-13-33.gif)
+![angular datepicker2](https://s5.gifyu.com/images/Peek-2020-03-04-12-33.gif)
 
 
 now @angular/core: ^8.2.14
@@ -33,6 +36,9 @@ Props of `AngularDatepicker2`:
 // Array custom definitions of days. Subscribable. See Day interface
 [days]: Day[]
 
+// Array custom definitions of suggestions. Suggestions for select dates
+[suggest]: Suggest[]
+
 // Date whould be render for default calendar .
 shownDate: Date
 

projects/angular-datepicker2/README.md

@@ -1,11 +1,14 @@
-# Angular Datepicker2 : v2.1.x
+# Angular Datepicker2 : v2.1.x 
+
+Add suggestions from v2.2.x
+Add events from v2.1.x
 
 ![Node.js CI](https://github.com/nsnayp13/angular-datepicker2/workflows/Node.js%20CI/badge.svg)
 
 
 `npm i angular-datepicker2`
 
-![angular datepicker2](https://s4.gifyu.com/images/Peek-2020-02-27-13-33.gif)
+![angular datepicker2](https://s5.gifyu.com/images/Peek-2020-03-04-12-33.gif)
 
 
 now @angular/core: ^8.2.14
@@ -33,6 +36,9 @@ Props of `AngularDatepicker2`:
 // Array custom definitions of days. Subscribable. See Day interface
 [days]: Day[]
 
+// Array custom definitions of suggestions. Suggestions for select dates
+[suggest]: Suggest[]
+
 // Date whould be render for default calendar .
 shownDate: Date
 

projects/angular-datepicker2/package.json

@@ -1,6 +1,6 @@
 {
   "name": "angular-datepicker2",
-  "version": "2.1.12",
+  "version": "2.2.0",
   "description": "Angular datepicker, best calendar. Select Period, single, or multiple dates. Template your own day in calendar. Two way databinding and others",
   "peerDependencies": {
     "@angular/common": "^8.2.14",

projects/angular-datepicker2/src/lib/calendar/angular-datepicker2.component.html

@@ -1,4 +1,21 @@
 <div class="calendarWrap">
+
+    <div class="headerCalendar">
+        <div *ngIf="suggest&&suggest.length>0" style="    padding:8px 8px 0 8px;
+        display: block;
+        float: left;
+        width: 100%;
+        box-sizing: border-box;
+        ">
+
+
+            <div *ngFor="let item of suggest ; let i = index" class="suggest" (click)="clickSuggest(item)">
+                {{item.title}}</div>
+
+        </div>
+
+    </div>
+
     <div class="dateSelector">
         <div (click)="goPrev()" class="nextPrevBtn" style="left:0;">{{'<'}}</div>
         <div class="wrapMonths" [ngStyle]="{width: width+'px'}">

projects/angular-datepicker2/src/lib/calendar/angular-datepicker2.component.scss

@@ -1,6 +1,32 @@
 
 $animSpeed: 0.2s;
 $cyan: #26b1b1;
+
+
+
+.suggest{
+
+  background: #e0f5f5;
+  width: auto;
+  display:block;
+  float: left;
+  color: #26b1b1;
+  border-radius: 2px;
+  padding: 4px 8px;
+  margin-right: 2px;
+  margin-bottom: 2px;
+  font-size: 13px;
+  transition: all 0.2s;
+  cursor: pointer;
+
+}
+
+
+.suggest:hover{
+  background: #82dcdc;
+  color: #148a8a;
+}
+
 app-calendar {
     display: block;
     float: left;
@@ -197,14 +223,14 @@ app-calendar {
 
   .calendarWrap {
     float: left;
-    width: auto;
     display: flex;
     background: #fff;
     margin: 10px 0;
     flex-direction: column;
     border-radius: 4px;
     box-shadow: 1px 1px 3px -3px #000;
     transition: all 0.2s;
+    width: min-content;
   }
 
   .dateSelector {

projects/angular-datepicker2/src/lib/calendar/angular-datepicker2.component.ts

@@ -11,7 +11,7 @@ import {
   ViewEncapsulation,
 } from "@angular/core";
 import { CalendarService } from "../_service/calendar.service";
-import { Day, SelectMode, ViewMode } from '../interfaces';
+import { Day, SelectMode, ViewMode, Suggest } from '../interfaces';
 
 
 
@@ -39,6 +39,14 @@ export class AngularDatepicker2 implements OnInit, OnChanges, AfterViewChecked {
   @Output() onDayClick = new EventEmitter<Day>()
 
 
+  /**
+   * @description
+   *  Array custom definitions of suggestions
+   * @see `Suggest`
+   * */
+  @Input() suggest: Suggest[];
+
+
   /**
    * @description
    *  Array custom definitions of days. Subscribable
@@ -114,6 +122,14 @@ export class AngularDatepicker2 implements OnInit, OnChanges, AfterViewChecked {
     //setTimeout(() => this.changeViewSelectorMode(), 1000);
   }
 
+
+  clickSuggest(suggest: Suggest) {
+    this.calendarService.selectMode = this.selectMode = suggest.selectMode;
+    this.calendarService.selectedDates.next(suggest.selectedDates);
+  }
+
+
+
   recountWidth() {
     let width = 0;
     this.columns
@@ -156,14 +172,10 @@ export class AngularDatepicker2 implements OnInit, OnChanges, AfterViewChecked {
     this.calendarService.viewSelectorMode = 'days';
     this.calendarService.selectMode = this.selectMode;
     this.calendarService.shownDate = this.shownDate;
-
     this.calendarService.setSelectedDates(this.selectedDates);
     this.calendarService.setDays(this.days);
-
     this.calendarService.getShownMonths(this.shownDate);
 
-
-
   }
 
 
@@ -180,20 +192,20 @@ export class AngularDatepicker2 implements OnInit, OnChanges, AfterViewChecked {
 
 
   calculate() {
+
     let date = this.shownDate
     let countMonths = 0;
     const months = [];
     let lastDate: Date;
-
     lastDate = date ? date : this.calendarService.getLastDate();
     countMonths = this.calendarService.getCountMonths();
     //this.countMonths = countMonths;
 
     for (let i = countMonths - 1; i >= 0; i--) {
       months.push(new Date(lastDate).adjustMonth(-i));
     }
-
     return months;
+
   }
 
   isEqual(array, array1) {

projects/angular-datepicker2/src/lib/interfaces.ts

@@ -45,6 +45,13 @@ template: {
 }*/
 
 
+export interface Suggest {
+    selectMode: SelectMode;
+    selectedDates: Date[];
+    title: string
+}
+
+
 
 export interface Week {
     id: number;
@@ -63,10 +70,7 @@ export interface Calendar {
 }
 
 
-export interface Suggest {
-    title: string;
-    dates: [];
-}
+
 
 
 /**

src/app/app.component.html

@@ -12,8 +12,8 @@
     justify-content: center;">
         <div style=" display:block; float:left;">
             <angular-datepicker2 [shownDate]="_shownDateVal" [days]="days" [(selectedDates)]="selectedDates"
-                [selectMode]="selectMode" [weekends]="[0,1]" [weekStart]="1" [viewMode]="viewMode" [vertical]="vertical"
-                (onDayClick)="onDayClick($event)">
+                [selectMode]="selectMode" [weekends]="[0,1]" [suggest]="suggest" [weekStart]="1" [viewMode]="viewMode"
+                [vertical]="vertical" (onDayClick)="onDayClick($event)">
             </angular-datepicker2>
         </div>
 

src/app/app.component.ts

@@ -1,6 +1,6 @@
 import { Component, OnInit, ChangeDetectionStrategy } from "@angular/core";
 import { TestDayComponent } from "./test-day/test-day.component";
-import { Calendar, Day, SelectMode, ViewMode } from 'projects/angular-datepicker2/src/public-api';
+import { Calendar, Day, SelectMode, ViewMode, Suggest } from 'projects/angular-datepicker2/src/public-api';
 //import {  } from 'projects/angular-datepicker2/src/lib/interfaces';
 
 
@@ -21,6 +21,35 @@ export class AppComponent implements OnInit {
   selectMode: SelectMode = SelectMode.Period
   viewMode: ViewMode | number = ViewMode.Quarter
 
+  suggest = [
+    {
+      title: 'Last two weeks',
+      selectMode: SelectMode.Period,
+      selectedDates: [
+        new Date(2020, 3, 1),
+        new Date(2020, 3, 12),
+      ]
+    },
+    {
+      title: 'Last month',
+      selectMode: SelectMode.Period,
+      selectedDates: [
+        new Date(2020, 3, 1),
+        new Date(2020, 3, 30),
+      ]
+    },
+    {
+      title: '1, 4 and 30',
+      selectMode: SelectMode.Multiple,
+      selectedDates: [
+        new Date(2020, 3, 1),
+        new Date(2020, 3, 4),
+        new Date(2020, 3, 30),
+      ]
+    }
+  ]
+
+
 
   _stackOnDayClick = [];