Skip to content
This repository was archived by the owner on Mar 4, 2023. It is now read-only.

Commit 0784ef3

Browse files
author
eksrvb
committed
more docs
1 parent adddc3d commit 0784ef3

File tree

15 files changed

+257
-122
lines changed

15 files changed

+257
-122
lines changed

‎docs/api.md‎

Lines changed: 114 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,114 @@
1+
---
2+
layout: default
3+
title: API
4+
nav_order: 2
5+
---
6+
7+
# Configuration
8+
9+
{: .no_toc }
10+
11+
<details open markdown="block">
12+
<summary>
13+
14+
Table of contents
15+
16+
</summary>
17+
{: .text-delta }
18+
1. TOC
19+
{:toc}
20+
</details>
21+
22+
You can operate the material calendar in two different modes.
23+
24+
The first and most common is the [monthly](https://eksrvb.github.io/material-calendar/configuration/monthly) Mode. The second is an [annual](https://eksrvb.github.io/material-calendar/configuration/annual) mode that shows every 12 months of the year.
25+
26+
In addition to this modes, there is also a basic configuration, as shown below.
27+
28+
## Bacis Installation of material-calendar
29+
30+
import the `MaterialCalendarModule` and optional provide your location.<br>
31+
In my case: `{provide: LOCALE_ID, useValue: 'de-DE' }`
32+
33+
File: app.module.ts
34+
35+
```typescript
36+
import { BrowserModule } from '@angular/platform-browser';
37+
import { NgModule, LOCALE_ID } from '@angular/core';
38+
39+
import { AppComponent } from './app.component';
40+
import { MaterialCalendarModule } from 'material-calendar'; // <-- add this line
41+
42+
@NgModule({
43+
declarations: [
44+
AppComponent
45+
],
46+
imports: [
47+
BrowserModule,
48+
MaterialCalendarModule // <-- add this line
49+
],
50+
providers: [
51+
{provide: LOCALE_ID, useValue: 'de-DE' } // <-- add this line (depending on your location)
52+
],
53+
bootstrap: [AppComponent]
54+
})
55+
export class AppModule { }
56+
```
57+
58+
In your html:
59+
60+
```html
61+
<calendar-panel></calendar-panel>
62+
```
63+
64+
and you are good to go ; )
65+
66+
All options are shown here:
67+
68+
```html
69+
<calendar-panel [placeholderDay]="placeholder" [dataSource]="dataSource" year="2021" month="5" [monthsBefore]="monthsBefore" [monthsAfter]="monthsAfter" [config]="calendarConfig" (clickDate)="testMethod($event)">
70+
</calendar-panel>
71+
<!--
72+
default placeholderDay = false
73+
default year = current year
74+
default month = current month
75+
default monthsBefore = 1
76+
default monthsAfter = 1
77+
-->
78+
```
79+
80+
> Note: the values entered here are default values
81+
82+
```typescript
83+
import { CalendarConfig } from 'material-calendar';
84+
85+
placeholder = false // boolean ...can be hardcoded in html
86+
87+
calendarConfig: CalendarConfig = {
88+
renderMode: 'monthly', // 'annual' | 'monthly'
89+
selectMode: 'click', // 'click' | 'range'
90+
displayYear: true,
91+
firstDayOfWeekMonday: true,
92+
calendarWeek: false,
93+
switches: true,
94+
bluredDays: false,
95+
markWeekend: true,
96+
panelWidth: '350px'
97+
};
98+
```
99+
100+
The interface for CalendarConfig:
101+
102+
```typescript
103+
/**
104+
* @param {string} renderMode choose render mode ('annual' or 'monthly')
105+
* @param {string} selectMode choose select mode ('click' or 'range')
106+
* @param {boolean} calendarWeek display the calendar week
107+
* @param {boolean} displayYear displays the year next to the Month name
108+
* @param {boolean} switches show arrows to navigate an month forward or backwards
109+
* @param {boolean} bluredDays make an circle around the number of the day
110+
* @param {boolean} markWeekend highlight weekends
111+
* @param {boolean} firstDayOfWeekMonday set first day of week (monday or sunday)
112+
* @param {string} panelWidth set a with for an single panel
113+
*/
114+
```

‎docs/configuration/annual.md‎

Whitespace-only changes.

‎docs/configuration/index.md‎

Lines changed: 0 additions & 102 deletions
This file was deleted.

‎docs/configuration/monthly.md‎

Lines changed: 0 additions & 6 deletions
This file was deleted.

‎docs/examples.md‎

Lines changed: 114 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,114 @@
1+
---
2+
layout: default
3+
title: EXAMPLES
4+
nav_order: 3
5+
---
6+
7+
# Configuration
8+
9+
{: .no_toc }
10+
11+
<details open markdown="block">
12+
<summary>
13+
14+
Table of contents
15+
16+
</summary>
17+
{: .text-delta }
18+
1. TOC
19+
{:toc}
20+
</details>
21+
22+
You can operate the material calendar in two different modes.
23+
24+
The first and most common is the [monthly](https://eksrvb.github.io/material-calendar/configuration/monthly) Mode. The second is an [annual](https://eksrvb.github.io/material-calendar/configuration/annual) mode that shows every 12 months of the year.
25+
26+
In addition to this modes, there is also a basic configuration, as shown below.
27+
28+
## Bacis Installation of material-calendar
29+
30+
import the `MaterialCalendarModule` and optional provide your location.<br>
31+
In my case: `{provide: LOCALE_ID, useValue: 'de-DE' }`
32+
33+
File: app.module.ts
34+
35+
```typescript
36+
import { BrowserModule } from '@angular/platform-browser';
37+
import { NgModule, LOCALE_ID } from '@angular/core';
38+
39+
import { AppComponent } from './app.component';
40+
import { MaterialCalendarModule } from 'material-calendar'; // <-- add this line
41+
42+
@NgModule({
43+
declarations: [
44+
AppComponent
45+
],
46+
imports: [
47+
BrowserModule,
48+
MaterialCalendarModule // <-- add this line
49+
],
50+
providers: [
51+
{provide: LOCALE_ID, useValue: 'de-DE' } // <-- add this line (depending on your location)
52+
],
53+
bootstrap: [AppComponent]
54+
})
55+
export class AppModule { }
56+
```
57+
58+
In your html:
59+
60+
```html
61+
<calendar-panel></calendar-panel>
62+
```
63+
64+
and you are good to go ; )
65+
66+
All options are shown here:
67+
68+
```html
69+
<calendar-panel [placeholderDay]="placeholder" [dataSource]="dataSource" year="2021" month="5" [monthsBefore]="monthsBefore" [monthsAfter]="monthsAfter" [config]="calendarConfig" (clickDate)="testMethod($event)">
70+
</calendar-panel>
71+
<!--
72+
default placeholderDay = false
73+
default year = current year
74+
default month = current month
75+
default monthsBefore = 1
76+
default monthsAfter = 1
77+
-->
78+
```
79+
80+
> Note: the values entered here are default values
81+
82+
```typescript
83+
import { CalendarConfig } from 'material-calendar';
84+
85+
placeholder = false // boolean ...can be hardcoded in html
86+
87+
calendarConfig: CalendarConfig = {
88+
renderMode: 'monthly', // 'annual' | 'monthly'
89+
selectMode: 'click', // 'click' | 'range'
90+
displayYear: true,
91+
firstDayOfWeekMonday: true,
92+
calendarWeek: false,
93+
switches: true,
94+
bluredDays: false,
95+
markWeekend: true,
96+
panelWidth: '350px'
97+
};
98+
```
99+
100+
The interface for CalendarConfig:
101+
102+
```typescript
103+
/**
104+
* @param {string} renderMode choose render mode ('annual' or 'monthly')
105+
* @param {string} selectMode choose select mode ('click' or 'range')
106+
* @param {boolean} calendarWeek display the calendar week
107+
* @param {boolean} displayYear displays the year next to the Month name
108+
* @param {boolean} switches show arrows to navigate an month forward or backwards
109+
* @param {boolean} bluredDays make an circle around the number of the day
110+
* @param {boolean} markWeekend highlight weekends
111+
* @param {boolean} firstDayOfWeekMonday set first day of week (monday or sunday)
112+
* @param {string} panelWidth set a with for an single panel
113+
*/
114+
```

‎docs/index.md‎

Lines changed: 17 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,20 @@
11
---
22
layout: default
3-
title: Home
3+
title: OVERVIEW
44
nav_order: 1
55
---
66

77
## Welcome to the Material Calendar documentation!
8+
{: .no_toc }
9+
10+
<details open markdown="block">
11+
<summary>
12+
Table of contents
13+
</summary>
14+
{: .text-delta }
15+
1. TOC
16+
{:toc}
17+
</details>
818

919
This project should fill the current gap for a simple material calendar which is not included in the material standard. This documentation is constantly being expanded.
1020

@@ -25,15 +35,17 @@ If you need an example for your pipeline you can find it in the sidebar under th
2535
`npm i material-calendar`
2636

2737
> Please use every version above 3.0.0
38+
> All available version are listed at [npmjs](https://www.npmjs.com/package/material-calendar)
2839
2940
## Usage and configuration
3041

31-
go to the [configuration](https://eksrvb.github.io/material-calendar/configuration) section to learn more
42+
go to the [configuration](https://eksrvb.github.io/material-calendar/docs/configuration) section to learn more
3243

3344
## A couple of impressions
3445

35-
![material-calendar-single-month](https://github.com/eksrvb/material-calendar/raw/main/docs/material-calendar-single-month.png)
46+
### One single panel without displaying calendar week
47+
![example-picture](https://github.com/eksrvb/material-calendar/raw/main/docs/monthly-onem-cdata.png)
3648

37-
![material-calendar-three-months](https://github.com/eksrvb/material-calendar/raw/main/docs/material-calendar-three-months.png)
49+
### One single panel with displaying calendar week
50+
![example-picture](https://github.com/eksrvb/material-calendar/raw/main/docs/monthly-onem-cdata-kw.png)
3851

39-
![material-calendar-two-months-with-placeholder](https://github.com/eksrvb/material-calendar/raw/main/docs/material-calendar-two-months-with-placeholder.png)

‎docs/material-calendar-single-month.png‎

-22.7 KB
Binary file not shown.

‎docs/material-calendar-three-months.png‎

-48.5 KB
Binary file not shown.

‎docs/material-calendar-two-months-with-placeholder.png‎

-41.3 KB
Binary file not shown.

‎docs/monthly-onem-cdata-kw.png‎

16.3 KB
Loading

0 commit comments

Comments
 (0)