more docs

Author: eksrvb

docs/api.md

@@ -25,90 +25,65 @@ The first and most common is the [monthly](https://eksrvb.github.io/material-cal
 
 In addition to this modes, there is also a basic configuration, as shown below.
 
-## Bacis Installation of material-calendar
+## API reference for material-calendar
 
 import the `MaterialCalendarModule` and optional provide your location.<br>
 In my case: `{provide:  LOCALE_ID, useValue:  'de-DE' }`
 
 File: app.module.ts
 
 ```typescript
-import { BrowserModule } from  '@angular/platform-browser';
-import { NgModule, LOCALE_ID } from  '@angular/core';
-
-import { AppComponent } from  './app.component';
 import { MaterialCalendarModule } from  'material-calendar'; // <-- add this line
+```
 
-@NgModule({
-  declarations: [
-    AppComponent
-  ],
-  imports: [
-    BrowserModule,
-    MaterialCalendarModule // <-- add this line
-  ],
+Optionally provide your location:
+```typescript
+  [...]
   providers: [
     {provide: LOCALE_ID, useValue: 'de-DE' } // <-- add this line (depending on your location)
   ],
-  bootstrap: [AppComponent]
-})
-export class AppModule { }
+  [...]
 ```
 
-In your html:
-
-```html
-<calendar-panel></calendar-panel>
-```
-
-and you are good to go ; )
-
-All options are shown here:
-
-```html
-<calendar-panel [placeholderDay]="placeholder" [dataSource]="dataSource" year="2021" month="5" [monthsBefore]="monthsBefore" [monthsAfter]="monthsAfter" [config]="calendarConfig" (clickDate)="testMethod($event)">
-</calendar-panel>
-<!--
-	default placeholderDay = false
-	default year = current year
-	default month = current month
-	default monthsBefore = 0
-	default monthsAfter = 0
--->
-```
-
-> Note: the values entered here are default values
-
-```typescript
-import { CalendarConfig } from  'material-calendar';
-
-placeholder = false  // boolean ...can be hardcoded in html
-
-calendarConfig: CalendarConfig = {
-    renderMode: 'monthly', // 'annual' | 'monthly'
-    selectMode: 'click',  // 'click' | 'range'
-    displayYear: true,
-    firstDayOfWeekMonday: true,
-    calendarWeek: false,
-    switches: true,
-    bluredDays: false,
-    markWeekend: true,
-    panelWidth: '350px'
-};
-```
-
-The interface for CalendarConfig:
-
-```typescript
-/**
- * @param {string}    renderMode              choose render mode ('annual' or 'monthly')
- * @param {string}    selectMode              choose select mode ('click' or 'range')
- * @param {boolean}   calendarWeek            display the calendar week
- * @param {boolean}   displayYear             displays the year next to the Month name
- * @param {boolean}   switches                show arrows to navigate an month forward or backwards
- * @param {boolean}   bluredDays              make an circle around the number of the day
- * @param {boolean}   markWeekend             highlight weekends
- * @param {boolean}   firstDayOfWeekMonday    set first day of week (monday or sunday)
- * @param {string}    panelWidth              set a with for an single panel
- */
-```
+## selectors
+
+### calendar-panel
+
+| Name | Default | Description |
+| ---- | ------- | ----------- |
+| placeholderDay: boolean | false |  |
+| dataSource: DayC[]      | null |  |
+| year: number            | current year |  |
+| month: number           | current month |  |
+| monthsBefore: number    | 0 |  |
+| monthsAfter: number     | 0 |  |
+| config: CalendarConfig  | null |  |
+| (clickDate)             | - |  |
+
+## interfaces
+
+### CalendarConfig
+
+| Name | Default | Description |
+| ---- | ------- | ----------- |
+| {string}    renderMode           | monthly | choose render mode ('annual' or 'monthly') |
+| {string}    selectMode           | click | choose select mode ('click' or 'range') |
+| {boolean}   calendarWeek         | false | display the calendar week |
+| {boolean}   displayYear          | true | displays the year next to the Month name |
+| {boolean}   switches             | true | show arrows to navigate an month forward or backwards |
+| {boolean}   bluredDays           | false | make an circle around the number of the day |
+| {boolean}   markWeekend          | true | highlight weekends |
+| {boolean}   firstDayOfWeekMonday | true | set first day of week (monday or sunday) |
+| {string}    panelWidth           | 350px | set a with for an single panel |
+
+### DayC
+
+| Name | Default | Description |
+| ---- | ------- | ----------- |
+| {Date}     date            | null | Date to match |
+| {string}   color           | null | set a custom color (hex, string, or var) |
+| {string}   backgroundColor | null | set a custom Background Color (hex, string, or var) |
+| {string}   badgeMode       | null | badgeMode options: 'Int' or 'Icon' |
+| {number}   badgeInt        | null | if badgeMode == 'Int', set our Number here |
+| {string}   badgeIcon       | null | if badgeMode == 'Icon', set Icon (Matireal-Icons) |
+| {string}   toolTip         | null | if set, this displays a mat-tooltip |