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

Commit adddc3d

Browse files
author
eksrvb
committed
add docs take 1
1 parent e07ef16 commit adddc3d

File tree

8 files changed

+194
-120
lines changed

8 files changed

+194
-120
lines changed

‎.github/ISSUE_TEMPLATE/bug_report.md‎

Lines changed: 16 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,47 +1,36 @@
11
---
2-
name: Bug report
2+
name: Bug report 🐞
33
about: Create a report to help us improve
4-
title: 'Found a Bug: '
5-
labels: 'bug'
4+
title: ''
5+
labels: bug
66
assignees: ''
7-
87
---
98

109
**Describe the bug**
11-
A clear and concise description of what the bug is.
12-
13-
**Your environment/setup**
14-
In what tool is your pipeline running?
15-
16-
- Jenkins Pipeline
17-
- GitHub Actions
18-
- GitLab CI
19-
20-
How is this tool installed
21-
22-
- Container
23-
- Bare Metal
24-
- Virtual machine
2510

26-
Are alle environment variables set? See README.md
27-
28-
- yes
29-
- no
11+
A clear and concise description of what the bug is.
3012

3113
**To Reproduce**
32-
Paste your executed command here:
3314

34-
Paste your Pipeline log (this is optional, make shure no secrets are visable):
15+
Steps to reproduce the behavior:
3516

36-
```shell
37-
# pipeline log
38-
```
17+
1. Go to '...'
18+
2. Click on '....'
19+
3. Scroll down to '....'
20+
4. See error
3921

4022
**Expected behavior**
23+
4124
A clear and concise description of what you expected to happen.
4225

4326
**Screenshots**
27+
4428
If applicable, add screenshots to help explain your problem.
4529

30+
**Desktop (please complete the following information):**
31+
* Browser [e.g. chrome, safari]
32+
* Version [e.g. 22]
33+
4634
**Additional context**
35+
4736
Add any other context about the problem here.

‎LICENSE‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
MIT License
2+
3+
Copyright (c) 2021 eksrvb
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in all
13+
copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21+
SOFTWARE.

‎README.md‎

Lines changed: 9 additions & 93 deletions
Original file line numberDiff line numberDiff line change
@@ -2,105 +2,16 @@
22
Please read this **before** usage!
33
This material calendar is just beginning. As in the angular material components, a beautiful calendar is to be generated by simple integration. Cooperation is welcome.
44

5-
> Warning: during the migration to github parts of the project were mixed up !!
6-
All features can be lost after an update from 2.1.2 to> 2.1.2.
7-
This will be solved in version 3.0.0, which will come as soon as I can.
8-
From version 3.0.0 onwards there will be a stable API with extensive features and its own documentation
5+
> Warning: all version before 3.0.0 are deprecated, please update to any version higher than 3.0.0!
96
107
### Working demo
118
[demo github project](https://github.com/eksrvb/material-calendar-demo)
129

1310
If you want to give me feedback and don't want to open an issue on github, please fill out the [form](https://forms.gle/W9TygXf65Yru3VHi7)
1411

15-
![material-calendar-single-month](https://github.com/eksrvb/material-calendar/raw/main/docs/material-calendar-single-month.png)
16-
![material-calendar-three-months](https://github.com/eksrvb/material-calendar/raw/main/docs/material-calendar-three-months.png)
17-
![material-calendar-two-months-with-placeholder](https://github.com/eksrvb/material-calendar/raw/main/docs/material-calendar-two-months-with-placeholder.png)
18-
19-
## Installing
20-
`npm i material-calendar`
21-
22-
## Usage
23-
app.module.ts
24-
``` typescript
25-
import { BrowserModule } from '@angular/platform-browser';
26-
import { NgModule, LOCALE_ID } from '@angular/core';
27-
28-
import { AppComponent } from './app.component';
29-
import { MaterialCalendarModule } from 'material-calendar';
30-
31-
@NgModule({
32-
declarations: [
33-
AppComponent
34-
],
35-
imports: [
36-
BrowserModule,
37-
MaterialCalendarModule
38-
],
39-
providers: [
40-
{provide: LOCALE_ID, useValue: 'de-DE' }
41-
],
42-
bootstrap: [AppComponent]
43-
})
44-
export class AppModule { }
45-
```
46-
import the `MaterialCalendarModule` and optional provide your location.
47-
In my case: `{provide: LOCALE_ID, useValue: 'de-DE' }`
48-
49-
In your html:
50-
``` html
51-
<calendar-panel
52-
placeholderDay="true"
53-
year="2020"
54-
month="10"
55-
monthsBefore="1"
56-
monthsAfter="2"
57-
[dataSource]="dataSource"
58-
[config]="calendarConfig"
59-
(clickDate)="testMethod($event)">
60-
</calendar-panel>
61-
<!--
62-
default placeholderDay = false override: boolean
63-
default year = current year override: year to start (number)
64-
default month = current month override: month to start (number)
65-
default monthsBefore = 0
66-
default monthsAfter = 0
67-
dataSource your custom dataSource
68-
config insert your configuration
69-
clickDate recive an click event from the component
70-
-->
71-
```
72-
73-
``` typescript
74-
import { CalendarConfig, DayC } from 'material-calendar';
75-
76-
placeholder = false // boolean
77-
78-
calendarConfig: CalendarConfig = {
79-
calendarConfig: CalendarConfig = {
80-
renderMode: 'monthly', // 'annual' | 'monthly'
81-
selectMode: 'range', // 'click' | 'range'
82-
displayYear: false,
83-
firstDayOfWeekMonday: true,
84-
calendarWeek: true,
85-
switches: true,
86-
}
87-
}
88-
89-
dataSource: DayC[] = [
90-
{
91-
date: 1604185200000,
92-
backgroundColor: 'rgba(0, 0, 255, 0.5)',
93-
toolTip: 'Test ToolTip',
94-
badgeMode: 'Icon',
95-
badgeInt: 5,
96-
badgeIcon: 'edit'
97-
},
98-
{
99-
date: 1604199900000,
100-
backgroundColor: 'blue'
101-
}
102-
]
103-
```
12+
### Documentation
13+
14+
[See the manual](https://eksrvb.github.io/material-calendar/) for setup, usage instructions and a lot more. (the documentation is still rising)
10415

10516

10617
## Features
@@ -109,6 +20,11 @@ dataSource: DayC[] = [
10920
- get a date back with the annotation "clickDate" (see example)
11021
- insert your own calendar data and render the new template
11122
- multiselect days optional (returns the daily span)
23+
more in the docs... ;)
24+
25+
## Getting help
26+
27+
If you have questions, concerns, bug reports, etc, please file an issue in this repository's Issue Tracker.
11228

11329
## Code scaffolding
11430

‎docs/_config.yml‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
remote_theme: pmarsceill/just-the-docs

‎docs/configuration/annual.md‎

Whitespace-only changes.

‎docs/configuration/index.md‎

Lines changed: 102 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,102 @@
1+
---
2+
layout: default
3+
title: Configuration
4+
nav_order: 2
5+
has_children: true
6+
permalink: /docs/configuration
7+
---
8+
9+
# Configuration
10+
11+
12+
You can operate the material calendar in two different modes.
13+
14+
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.
15+
16+
In addition to this modes, there is also a basic configuration, as shown below.
17+
18+
## Bacis Installation of material-calendar
19+
20+
app.module.ts
21+
``` typescript
22+
import { BrowserModule } from '@angular/platform-browser';
23+
import { NgModule, LOCALE_ID } from '@angular/core';
24+
25+
import { AppComponent } from './app.component';
26+
import { MaterialCalendarModule } from 'material-calendar';
27+
28+
@NgModule({
29+
declarations: [
30+
AppComponent
31+
],
32+
imports: [
33+
BrowserModule,
34+
MaterialCalendarModule
35+
],
36+
providers: [
37+
{provide: LOCALE_ID, useValue: 'de-DE' }
38+
],
39+
bootstrap: [AppComponent]
40+
})
41+
export class AppModule { }
42+
```
43+
import the `MaterialCalendarModule` and optional provide your location.
44+
In my case: `{provide: LOCALE_ID, useValue: 'de-DE' }`
45+
46+
In your html:
47+
``` html
48+
<calendar-panels></calendar-panels>
49+
```
50+
and you are good to go ;)
51+
52+
All options are shown here:
53+
54+
``` html
55+
<calendar-panels
56+
[mode]="mode"
57+
[placeholderDay]="placeholder"
58+
year="2020"
59+
month="3"
60+
monthsBefore="1"
61+
monthsAfter="1"
62+
[config]="calendarConfig"
63+
(clickDate)="yourMethod($event)">
64+
</calendar-panels>
65+
<!--
66+
default mode = monthly
67+
default placeholderDay = false
68+
default year = current year
69+
default month = current month
70+
default monthsBefore = 1
71+
default monthsAfter = 1
72+
-->
73+
```
74+
``` typescript
75+
import { CalendarConfig } from 'material-calendar';
76+
77+
placeholder = false // boolean ...can be hardcoded in html
78+
mode = 'monthly' // 'annual' | 'monthly' ...can be hardcoded in html
79+
80+
calendarConfig: CalendarConfig = {
81+
panelBgColor: '#00677f', // use only hex or rbg colors
82+
autoTextColor: true,
83+
textColor: '#fff', // use only hex or rbg colors
84+
displayYear: true,
85+
firstDayOfWeekMonday: true,
86+
todayColor: '#fff',
87+
panelWidth: '100%', // can also be fix values such as 350px
88+
calendarWeek: true,
89+
switches: false,
90+
}
91+
```
92+
``` javascript
93+
/**
94+
* @param {boolean} autoTextColor Sets the text color automatically, based on the backgroud colors
95+
* @param {boolean} calendarWeek display the calendar week
96+
* @param {boolean} displayYear displays the year next to the Month name
97+
* @param {boolean} switches display switches in calendar component or not
98+
* @param {string} panelBgColor sets the background color of the panel
99+
* @param {string} textColor if autoTextColor false this must be set to a custom color
100+
*
101+
*/
102+
```

‎docs/configuration/monthly.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
---
2+
layout: default
3+
title: Material Calendar monthly mode
4+
parent: Configuration
5+
nav_order: 1
6+
---

‎docs/index.md‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
---
2+
layout: default
3+
title: Home
4+
nav_order: 1
5+
---
6+
7+
## Welcome to the Material Calendar documentation!
8+
9+
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.
10+
11+
There are also several examples in the examples section of the documentation. If an example is not included, please feel free to inquire about a related issue.
12+
13+
If more functionality is needed you can just open a issue in this project and of course bugs can be fixed in the same way by filing a bug report.
14+
15+
If you have any questions, you can find a form on the issue board. First, make sure your question is already in the Questions and Answers section before asking a question. You can find frequently asked questions directly in the "Questions and Answers" section.
16+
17+
### Notice:
18+
19+
Every command that you can use is in the sidebar under commands. All options are listed there.
20+
21+
If you need an example for your pipeline you can find it in the sidebar under the tab examples.
22+
23+
24+
## Installing
25+
`npm i material-calendar`
26+
27+
> Please use every version above 3.0.0
28+
29+
## Usage and configuration
30+
31+
go to the [configuration](https://eksrvb.github.io/material-calendar/configuration) section to learn more
32+
33+
## A couple of impressions
34+
35+
![material-calendar-single-month](https://github.com/eksrvb/material-calendar/raw/main/docs/material-calendar-single-month.png)
36+
37+
![material-calendar-three-months](https://github.com/eksrvb/material-calendar/raw/main/docs/material-calendar-three-months.png)
38+
39+
![material-calendar-two-months-with-placeholder](https://github.com/eksrvb/material-calendar/raw/main/docs/material-calendar-two-months-with-placeholder.png)

0 commit comments

Comments
 (0)