Merge pull request #5 from zigomir/improvements

Improvements
zigomir · Sep 12, 2020 · 14e9840 · 14e9840
2 parents 866d571 + 1307202
commit 14e9840
Show file tree

Hide file tree

Showing 9 changed files with 110 additions and 49 deletions.
diff --git a/src/components.d.ts b/src/components.d.ts
@@ -7,6 +7,10 @@
 import { HTMLStencilElement, JSXBase } from "@stencil/core/internal";
 export namespace Components {
     interface CalyCalendar {
+        /**
+          * (optional) Disabled days
+         */
+        "disableOnDay"?: (timestamp: number) => boolean;
         /**
           * (optional) Locale
          */
@@ -35,6 +39,10 @@ export namespace Components {
           * (optional) Selected day (dd-mm-yyyy)
          */
         "selected": string;
+        /**
+          * (optional) Show previous number of months
+         */
+        "showPreviousNumberOfMonths": boolean;
         /**
           * (optional) Start of the week. 0 for Sunday, 1 for Monday, etc.
          */
@@ -58,14 +66,18 @@ declare global {
 }
 declare namespace LocalJSX {
     interface CalyCalendar {
+        /**
+          * (optional) Disabled days
+         */
+        "disableOnDay"?: (timestamp: number) => boolean;
         /**
           * (optional) Locale
          */
         "locale"?: string;
         /**
           * (required) Month (1-12)
          */
-        "month": number;
+        "month"?: number;
         /**
           * (optional) Number of months rendered
          */
@@ -74,6 +86,10 @@ declare namespace LocalJSX {
           * (optional) Event to listen for when new day is selected.
          */
         "onDaySelected"?: (event: CustomEvent<any>) => void;
+        /**
+          * (optional) Event to listen for what day is currently hovered.
+         */
+        "onHoveredDay"?: (event: CustomEvent<any>) => void;
         /**
           * (optional) Event to listen for when range end day is selected.
          */
@@ -98,14 +114,18 @@ declare namespace LocalJSX {
           * (optional) Selected day (dd-mm-yyyy)
          */
         "selected"?: string;
+        /**
+          * (optional) Show previous number of months
+         */
+        "showPreviousNumberOfMonths"?: boolean;
         /**
           * (optional) Start of the week. 0 for Sunday, 1 for Monday, etc.
          */
         "startOfTheWeek"?: number;
         /**
           * (required) Year (YYYY)
          */
-        "year": number;
+        "year"?: number;
     }
     interface IntrinsicElements {
         "caly-calendar": CalyCalendar;

diff --git a/src/components/caly-calendar/__snapshots__/caly-calendar.spec.ts.snap b/src/components/caly-calendar/__snapshots__/caly-calendar.spec.ts.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`should render caly-calendar: render-01-01-2010 1`] = `
-<caly-calendar month="1" selected="01-01-2010" year="2010">
+exports[`should render caly-calendar: render-2010-01-01 1`] = `
+<caly-calendar month="1" selected="2010-01-01" year="2010">
   <mock:shadow-root>
     <div class="grid">
       <section class="navigation">

diff --git a/src/components/caly-calendar/caly-calendar.css b/src/components/caly-calendar/caly-calendar.css
@@ -1,17 +1,27 @@
 /**
  * @prop --grid: Specify grid template areas
  * @prop --grid-column-gap: Specify grid column gap
+ * @prop --out-of-range-color: Cell text color when day is out of range / disabled
  * @prop --navigation-height: Specify grid column gap
  * @prop --font: Pass the font family you want the text to be in
- * @prop --border-width: Width of the calendar cell border
- * @prop --border-color: Color of the calendar cell border
+ * @prop --cell-border-width: Width of the calendar cell border
+ * @prop --cell-border-style: Style of the calendar cell border
+ * @prop --cell-border-color: Color of the calendar cell border
  * @prop --cell-width: Width of the calendar cell
  * @prop --cell-height: Height of the calendar cell
+ * @prop --cell-text-align: Text alignment of the calendar cell
+ * @prop --cell-font-size: Font size of the calendar cell
+ * @prop --day-name-font-size: Font size of day name
+ * @prop --today-color: Font color of today's cell
  * @prop --selected-bg-color: Background color of selected day cell
+ * @prop --selected-color: Color of selected day cell
  * @prop --other-month-visibility: Hidden by default, can be set to visible
  * @prop --other-month-border: None by default
  * @prop --hover-bg-color: Cell background color on hover
  * @prop --hover-color: Cell text color on hover
+ * @prop --day-cursor: Cursor on cell hover
+ * @prop --in-range-bg-color: Background color of in-range cell
+ * @prop --in-range-color: Color of in-range cell
  */
 
 :host {
@@ -25,7 +35,12 @@
     "nav nav"
     "mn  mn"
   );
-  column-gap: var(--grid-column-gap, 12px);
+  column-gap: var(--grid-column-gap, 0px);
+}
+
+.disabled {
+  pointer-events: none;
+  color: var(--out-of-range-color, #d3d3d3);
 }
 
 .navigation {
@@ -60,33 +75,36 @@ table {
 }
 
 td {
-  border: var(--border-width, 1px) solid var(--border-color, #e4e7e7);
-  text-align: center;
-  width: var(--cell-width, 36px);
-  height: var(--cell-height, 36px);
+  border-width: var(--cell-border-width, 1px);
+  border-style: var(--cell-border-style, solid);
+  border-color: var(--cell-border-color, #e4e7e7);
+  width: var(--cell-width, 2.5rem);
+  height: var(--cell-height, 2.5rem);
+  text-align: var(--cell-text-align, center);
+  font-size: var(--cell-font-size, 1rem);
 }
 
 td.borderless {
   border: none;
 }
 
 td.day-name {
-  font-size: 12px;
+  font-size: var(--day-name-font-size, 1rem);
 }
 
 td.today {
-  color: #9e9c9c;
+  color: var(--today-color, #9e9c9c);
 }
 
 /* has to be after today to override it */
 td.selected {
   background-color: var(--selected-bg-color, #00a699);
-  color: white;
+  color: var(--selected-color, white);
 }
 
 td.in-range {
   background-color: var(--in-range-bg-color, #00a699);
-  color: white;
+  color: var(--in-range-color, white);
 }
 
 td.other-month {
@@ -95,7 +113,7 @@ td.other-month {
 }
 
 td.day:not(.other-month):hover {
-  cursor: pointer;
+  cursor: var(--day-cursor, pointer);
 }
 
 td.day:not(.other-month):not(.range-select-in-progress):hover {

diff --git a/src/components/caly-calendar/caly-calendar.e2e.ts b/src/components/caly-calendar/caly-calendar.e2e.ts
@@ -3,7 +3,7 @@ import { newE2EPage } from '@stencil/core/testing'
 describe('example', () => {
   it('should render and select new day on click', async () => {
     const page = await newE2EPage()
-    await page.setContent(`<caly-calendar year="2020" month="1" selected="01-01-2020" start-of-the-week="1"></caly-calendar>`)
+    await page.setContent(`<caly-calendar year="2020" month="1" selected="2020-01-01" start-of-the-week="1"></caly-calendar>`)
     const selectedEl = await page.find('caly-calendar >>> .selected')
     expect(selectedEl.textContent).toBe('1')
 

diff --git a/src/components/caly-calendar/caly-calendar.spec.ts b/src/components/caly-calendar/caly-calendar.spec.ts
@@ -4,8 +4,8 @@ import { CalyCalendar } from './caly-calendar'
 it('should render caly-calendar', async () => {
   const page = await newSpecPage({
     components: [CalyCalendar],
-    html: `<caly-calendar year="2010" month="1" selected="01-01-2010"></caly-calendar>`,
+    html: `<caly-calendar year="2010" month="1" selected="2010-01-01"></caly-calendar>`,
   })
 
-  expect(page.root).toMatchSnapshot('render-01-01-2010')
+  expect(page.root).toMatchSnapshot('render-2010-01-01')
 })
diff --git a/src/components/caly-calendar/caly-calendar.tsx b/src/components/caly-calendar/caly-calendar.tsx
@@ -33,9 +33,9 @@ export class CalyCalendar {
   @State() hoverDay: IDay
 
   /** (required) Year (YYYY) */
-  @Prop({ mutable: true, reflect: true }) year!: number
+  @Prop({ mutable: true, reflect: true }) year: number = new Date().getFullYear()
   /** (required) Month (1-12) */
-  @Prop({ mutable: true, reflect: true }) month!: number
+  @Prop({ mutable: true, reflect: true }) month: number = new Date().getMonth() + 1
   /** (optional) Selected day (dd-mm-yyyy) */
   @Prop({ mutable: true, reflect: true }) selected: string
   /** (optional) Locale */
@@ -44,6 +44,10 @@ export class CalyCalendar {
   @Prop() startOfTheWeek: number = 0
   /** (optional) Number of months rendered */
   @Prop() numberOfMonths: number = 1
+  /** (optional) Show previous number of months */
+  @Prop() showPreviousNumberOfMonths: boolean = false
+  /** (optional) Disabled days */
+  @Prop() disableOnDay?: (timestamp: number) => boolean
 
   /** (optional) Range */
   @Prop() range: boolean = false
@@ -58,11 +62,13 @@ export class CalyCalendar {
   @Event({ eventName: 'rangeStartSelected' }) rangeStartSelected: EventEmitter
   /** (optional) Event to listen for when range end day is selected. */
   @Event({ eventName: 'rangeEndSelected' }) rangeEndSelected: EventEmitter
+  /** (optional) Event to listen for what day is currently hovered. */
+  @Event({ eventName: 'hoveredDay' }) hoveredDay: EventEmitter
 
   private handleDayClick(day: IDay) {
     const dayInMonth = day.dayInMonth.toString().padStart(2, '0')
     const month = day.month.month.toString().padStart(2, '0')
-    const selectedDay = `${dayInMonth}-${month}-${day.month.year}`
+    const selectedDay = `${day.month.year}-${month}-${dayInMonth}`
 
     if (this.range) {
       if (!this.rangeStart) {
@@ -85,6 +91,7 @@ export class CalyCalendar {
   private handleMouseOver(day: IDay) {
     if (this.range) {
       this.hoverDay = day
+      this.hoveredDay.emit(day)
     }
   }
 
@@ -107,14 +114,19 @@ export class CalyCalendar {
     let months: IMonth[] = []
 
     for (let _i of range(this.numberOfMonths)) {
-      months.push(
-        {
-          year: month.year,
-          month: month.month,
-          weeks: calendarMonth(month.year, month.month, this.startOfTheWeek),
-        }
-      )
-      month = getNextMonth(month.year, month.month) // mutates month variable to progress it into next month
+      let otherMonth = {
+        year: month.year,
+        month: month.month,
+        weeks: calendarMonth(month.year, month.month, this.startOfTheWeek),
+      }
+
+      if (this.showPreviousNumberOfMonths) {
+        months.unshift(otherMonth)
+        month = getPreviousMonth(month.year, month.month) // going back
+      } else {
+        months.push(otherMonth)
+        month = getNextMonth(month.year, month.month) // mutates month variable to progress it into next month
+      }
     }
 
     return (
@@ -153,6 +165,7 @@ export class CalyCalendar {
                         rangeStart: selectedDayToCalendarDay(this.rangeStart),
                         rangeEnd: selectedDayToCalendarDay(this.rangeEnd),
                         hoverDay: this.hoverDay,
+                        disableOnDay: this.disableOnDay,
                       })}
                       onClick={() => this.handleDayClick(day)}
                       onMouseOver={() => this.handleMouseOver(day)}

diff --git a/src/components/caly-calendar/readme.md b/src/components/caly-calendar/readme.md
@@ -46,24 +46,27 @@ Caly, a 6k customizable calendar.
 
 ## Properties
 
-| Property             | Attribute           | Description                                                    | Type      | Default     |
-| -------------------- | ------------------- | -------------------------------------------------------------- | --------- | ----------- |
-| `locale`             | `locale`            | (optional) Locale                                              | `string`  | `'en-US'`   |
-| `month` _(required)_ | `month`             | (required) Month (1-12)                                        | `number`  | `undefined` |
-| `numberOfMonths`     | `number-of-months`  | (optional) Number of months rendered                           | `number`  | `1`         |
-| `range`              | `range`             | (optional) Range                                               | `boolean` | `false`     |
-| `rangeEnd`           | `range-end`         | (optional) Range end (dd-mm-yyyy)                              | `string`  | `undefined` |
-| `rangeStart`         | `range-start`       | (optional) Range start (dd-mm-yyyy)                            | `string`  | `undefined` |
-| `selected`           | `selected`          | (optional) Selected day (dd-mm-yyyy)                           | `string`  | `undefined` |
-| `startOfTheWeek`     | `start-of-the-week` | (optional) Start of the week. 0 for Sunday, 1 for Monday, etc. | `number`  | `0`         |
-| `year` _(required)_  | `year`              | (required) Year (YYYY)                                         | `number`  | `undefined` |
+| Property                     | Attribute                        | Description                                                    | Type                             | Default                     |
+| ---------------------------- | -------------------------------- | -------------------------------------------------------------- | -------------------------------- | --------------------------- |
+| `disableOnDay`               | --                               | (optional) Disabled days                                       | `(timestamp: number) => boolean` | `undefined`                 |
+| `locale`                     | `locale`                         | (optional) Locale                                              | `string`                         | `'en-US'`                   |
+| `month`                      | `month`                          | (required) Month (1-12)                                        | `number`                         | `new Date().getMonth() + 1` |
+| `numberOfMonths`             | `number-of-months`               | (optional) Number of months rendered                           | `number`                         | `1`                         |
+| `range`                      | `range`                          | (optional) Range                                               | `boolean`                        | `false`                     |
+| `rangeEnd`                   | `range-end`                      | (optional) Range end (dd-mm-yyyy)                              | `string`                         | `undefined`                 |
+| `rangeStart`                 | `range-start`                    | (optional) Range start (dd-mm-yyyy)                            | `string`                         | `undefined`                 |
+| `selected`                   | `selected`                       | (optional) Selected day (dd-mm-yyyy)                           | `string`                         | `undefined`                 |
+| `showPreviousNumberOfMonths` | `show-previous-number-of-months` | (optional) Show previous number of months                      | `boolean`                        | `false`                     |
+| `startOfTheWeek`             | `start-of-the-week`              | (optional) Start of the week. 0 for Sunday, 1 for Monday, etc. | `number`                         | `0`                         |
+| `year`                       | `year`                           | (required) Year (YYYY)                                         | `number`                         | `new Date().getFullYear()`  |
 
 
 ## Events
 
 | Event                | Description                                                      | Type               |
 | -------------------- | ---------------------------------------------------------------- | ------------------ |
 | `daySelected`        | (optional) Event to listen for when new day is selected.         | `CustomEvent<any>` |
+| `hoveredDay`         | (optional) Event to listen for what day is currently hovered.    | `CustomEvent<any>` |
 | `rangeEndSelected`   | (optional) Event to listen for when range end day is selected.   | `CustomEvent<any>` |
 | `rangeStartSelected` | (optional) Event to listen for when range start day is selected. | `CustomEvent<any>` |
 

diff --git a/src/utils/utils.spec.ts b/src/utils/utils.spec.ts
@@ -92,7 +92,7 @@ describe('monthName', () => {
 
 describe('selectedDayToCalendarDay', () => {
   it('parses dd-mm-yyyy', () => {
-    expect(selectedDayToCalendarDay('01-02-2020')).toEqual({
+    expect(selectedDayToCalendarDay('2020-02-01')).toEqual({
       day: 1,
       month: 2,
       year: 2020,

diff --git a/src/utils/utils.ts b/src/utils/utils.ts
@@ -24,7 +24,7 @@ const isSelected = (weekDay: IDay, { day, year, month }: CalendarDay) =>
 export const selectedDayToCalendarDay = (selectedDay?: string) => {
   if (!selectedDay) return
 
-  const [day, month, year] = selectedDay
+  const [year, month, day] = selectedDay
     .split('-')
     .map(piece => parseInt(piece, 10))
   return { day, month, year }
@@ -38,14 +38,16 @@ export const dayClass = ({
   rangeStart,
   rangeEnd,
   hoverDay,
+  disableOnDay,
 }: {
   weekDay: IDay
   month: MonthNumber
   year: number
   selectedDay?: CalendarDay
   rangeStart?: CalendarDay
   rangeEnd?: CalendarDay
-  hoverDay?: IDay
+  hoverDay?: IDay,
+  disableOnDay?: (timestamp: number) => boolean,
 }) => {
   const classes = ['day']
   if (isWeekend(weekDay)) {
@@ -61,12 +63,13 @@ export const dayClass = ({
     classes.push('selected')
   }
 
+  const thisDayTs = Date.UTC(
+    weekDay.month.year,
+    weekDay.month.month - 1,
+    weekDay.dayInMonth
+  )
+
   if (rangeStart && (hoverDay || rangeEnd)) {
-    const thisDayTs = Date.UTC(
-      weekDay.month.year,
-      weekDay.month.month - 1,
-      weekDay.dayInMonth
-    )
     const rangeStartTs = Date.UTC(
       rangeStart.year,
       rangeStart.month - 1,
@@ -96,6 +99,10 @@ export const dayClass = ({
     classes.push('range-select-in-progress')
   }
 
+  if (disableOnDay && disableOnDay(thisDayTs)) {
+    classes.push('disabled')
+  }
+
   return classes.join(' ')
 }