refactor compactMode to calendarSize

PawanKolhe · Aug 26, 2020 · 6b52f7b · 6b52f7b
1 parent 2334269
commit 6b52f7b
Show file tree

Hide file tree

Showing 5 changed files with 16 additions and 12 deletions.
diff --git a/README.md b/README.md
@@ -107,7 +107,7 @@ Or you can pass in **options**.
 ```javascript
 new Calendar({
     id: '#color-calendar',
-    compactMode: true
+    calendarSize: 'small'
 })
 ```
 
@@ -125,11 +125,12 @@ Default: `#color-calendar`
 
 Selector referencing HTMLElement where the calendar instance will bind to.
 
-### `compactMode`
-Type: `Boolean`  
-Default: `false`  
+### `calendarSize`
+Type: `String`  
+Default: `large`  
+Options: `small` | `large`  
 
-Make calendar UI smaller.
+Size of calendar UI.
 
 ### `eventsData`
 Type: [`EventData`](#type-event-data)[]  
@@ -187,7 +188,7 @@ Color of weekdays text.  *Only works on some themes.*
 ### `weekdayType`
 Type: `String`  
 Default: `long-lower`  
-Options: [WeekdayType](#type-weekday-type) (`'short'` | `'long-lower'` | `'long-upper'`)  
+Options: [WeekdayType](#type-weekday-type) (`short` | `long-lower` | `long-upper`)  
 
 Select how weekdays will be displayed. E.g. M, Mon, or MON.
 

diff --git a/src/index.ts b/src/index.ts
@@ -1,4 +1,5 @@
 import {
+  CalendarSize,
   CalendarOptions,
   EventData,
   Day,
@@ -15,7 +16,7 @@ export default class Calendar {
 
   // Options
   id: string;
-  compactMode: boolean;
+  calendarSize: CalendarSize;
   eventsData: EventData[];
   theme: string;
   primaryColor?: string;
@@ -79,7 +80,7 @@ export default class Calendar {
   constructor(options: CalendarOptions = {}) {
     // Initialize Options
     this.id = options.id ?? "#calendar";
-    this.compactMode = options.compactMode ?? false;
+    this.calendarSize = (options.calendarSize ?? "large") as CalendarSize;
     this.eventsData = options.eventsData ?? [];
     this.monthDisplayType = (options.monthDisplayType ?? "long") as MonthDisplayType;
     this.startWeekday = options.startWeekday ?? 0; // 0 (Sun), 1 (Mon), 2 (Tues), 3 (Wed), 4 (Thurs), 5 (Fri), 6 (Sat)
@@ -128,7 +129,7 @@ export default class Calendar {
 
     // Initialize initial HTML layout
     this.calendar.innerHTML = `
-      <div class="${this.CAL_NAME} ${this.theme} ${this.compactMode ? 'color-calendar--compact' : ''}">
+      <div class="${this.CAL_NAME} ${this.theme} color-calendar--${this.calendarSize}">
         <div class="calendar__header">
           <div class="calendar__arrow calendar__arrow-prev"><div class="calendar__arrow-inner"></div></div>
           <div class="calendar__monthyear">

diff --git a/src/sass/theme-basic.scss b/src/sass/theme-basic.scss
@@ -183,7 +183,7 @@ $theme: ".basic";
 }
 
 // COMPACT MODE
-#{$calName}#{$theme}.color-calendar--compact {
+#{$calName}#{$theme}.color-calendar--small {
   font-size: 0.8rem;
 
   .calendar__header {

diff --git a/src/sass/theme-glass.scss b/src/sass/theme-glass.scss
@@ -184,7 +184,7 @@ $theme: ".glass";
 }
 
 // COMPACT MODE
-#{$calName}#{$theme}.color-calendar--compact {
+#{$calName}#{$theme}.color-calendar--small {
   font-size: 0.8rem;
 
   .calendar__header {

diff --git a/src/types.d.ts b/src/types.d.ts
@@ -1,6 +1,6 @@
 export interface CalendarOptions {
   id?: string;
-  compactMode?: boolean;
+  calendarSize?: CalendarSize;
   eventsData?: EventData[];
   theme?: string;
   primaryColor?: string;
@@ -32,6 +32,8 @@ export interface Day {
   selected?: boolean,
 }
 
+export type CalendarSize = "small" | "large";
+
 export type MonthDisplayType = "short" | "long";
 
 export  type WeekdayType = "short" | "long-lower" | "long-upper";