Skip to content

Commit 1a9441a

Browse files
eksrhaeksrha
authored
feat: add theme switch module + docs (#96)
1 parent 8f410c3 commit 1a9441a

28 files changed

+763
-82
lines changed

‎.github/workflows/pull-request.yml‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,10 @@ on:
1111
- 'README.md'
1212
- 'LICENSE'
1313

14+
concurrency:
15+
group: 'pull-request-build-${{ github.event.pull_request.number }}'
16+
cancel-in-progress: true
17+
1418
jobs:
1519
generate_infos:
1620
uses: fullstack-devops/git-workflows/.github/workflows/generate-build-infos.yml@main

‎.github/workflows/release.yml‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,10 @@ on:
1313
- 'CHANGELOG.md'
1414
- 'LICENSE'
1515

16+
concurrency:
17+
group: 'release-build-${{ github.run_id }}'
18+
cancel-in-progress: false
19+
1620
jobs:
1721
create_release:
1822
uses: fullstack-devops/git-workflows/.github/workflows/create-release.yml@main

‎.vscode/extensions.json‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@
55
"dbaeumer.vscode-eslint",
66
"esbenp.prettier-vscode",
77
"PKief.material-icon-theme",
8-
"Mikael.Angular-BeastCode",
9-
"bradlc.vscode-tailwindcss"
8+
"Mikael.Angular-BeastCode"
109
]
1110
}

‎README.md‎

Lines changed: 4 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -37,28 +37,8 @@ add to your local `.npmrc` the following line to be able to use this package:
3737

3838
Live Demo with all current modules at https://fullstack-devops.github.io/ngx-mat-components
3939

40-
Api Documentation: https://fullstack-devops.github.io/libraries/ngx-mat-components.
40+
- [Navigation and Toolbar Frame](https://github.com/fullstack-devops/ngx-mat-components/blob/main/docs/fs-nav-frame.md)
41+
- [Theme Switcher](https://github.com/fullstack-devops/ngx-mat-components/blob/main/docs/fs-theme-switcher.md)
42+
- [Calendar](https://github.com/fullstack-devops/ngx-mat-components/blob/main/docs/fs-calendar.md)
4143

42-
## Development server
43-
44-
Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
45-
46-
## Code scaffolding
47-
48-
Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
49-
50-
## Build
51-
52-
Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory.
53-
54-
## Running unit tests
55-
56-
Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
57-
58-
## Running end-to-end tests
59-
60-
Run `ng e2e` to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.
61-
62-
## Further help
63-
64-
To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.
44+
> Note: Sometimes I cannot document everything in the `docs/`, so please check the `workspace application` and source code for more information. Or sumbit an [Issue](https://github.com/fullstack-devops/ngx-mat-components/issues)

‎docs/calendar.md‎

Lines changed: 173 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,173 @@
1+
# FsCalendarModule Documentation
2+
3+
The `FsCalendarModule` provides advanced, flexible calendar components for Angular Material applications. It includes both calendar panels and table views, supporting custom data, range selection, and Material 3 theming.
4+
5+
---
6+
7+
## Features
8+
9+
- **Calendar Panels** for monthly or annual views
10+
- **Calendar Table** for tabular, multi-entry calendar data
11+
- **Range and single date selection** support
12+
- **Custom day rendering** (colors, tooltips, badges, etc.)
13+
- **Material 3 theming** and accessibility
14+
- **Highly configurable** via inputs
15+
16+
---
17+
18+
## Module Import
19+
20+
```ts
21+
import { FsCalendarModule } from '@fullstack-devops/ngx-mat-components';
22+
```
23+
24+
---
25+
26+
## Main Components & Directives
27+
28+
- [`FsCalendarPanelsComponent`](../projects/ngx-mat-components/src/fs-calendar/calendar-panels/calendar-panels.component.ts)
29+
- [`FsCalendarTableComponent`](../projects/ngx-mat-components/src/fs-calendar/calendar-table/fs-calendar-table.component.ts)
30+
- [`FsCalendarTableNameDirective`](../projects/ngx-mat-components/src/fs-calendar/directives/fs-calendar-table-name.directive.ts)
31+
32+
---
33+
34+
## Usage Examples
35+
36+
### Calendar Panels
37+
38+
```html
39+
<fs-calendar-panels
40+
[dataSource]="calendarPanelsData"
41+
[year]="year"
42+
[month]="month"
43+
[monthsBefore]="monthsBefore"
44+
[monthsAfter]="monthsAfter"
45+
[placeholderDay]="placeholder"
46+
(selection)="onSelection($event)">
47+
</fs-calendar-panels>
48+
```
49+
50+
### Calendar Table
51+
52+
```html
53+
<fs-calendar-table [(month)]="month" [(year)]="year" [dataSource]="calendarTableData">
54+
<fs-calendar-table-name>Persons</fs-calendar-table-name>
55+
</fs-calendar-table>
56+
```
57+
58+
---
59+
60+
## Configuration
61+
62+
### Calendar Panels Data
63+
64+
[`CalendarPanels`](../projects/ngx-mat-components/src/fs-calendar/calendar.models.ts):
65+
66+
```ts
67+
export interface CalendarPanels<T = void> {
68+
config: CalendarPanelsConfig;
69+
data: CalendarExtendedDay<T>[];
70+
}
71+
```
72+
73+
#### Example Config
74+
75+
[`CalendarPanelsConfig`](../projects/ngx-mat-components/src/fs-calendar/calendar.models.ts):
76+
77+
```ts
78+
export interface CalendarPanelsConfig {
79+
renderMode: 'monthly' | 'annual';
80+
selectMode: 'click' | 'range';
81+
calendarWeek: boolean;
82+
displayYear?: boolean;
83+
switches?: boolean;
84+
bluredDays?: boolean;
85+
markWeekend?: boolean;
86+
firstDayOfWeekMonday?: boolean;
87+
panelWidth?: string;
88+
}
89+
```
90+
91+
#### Example Data
92+
93+
[`CalendarExtendedDay`](../projects/ngx-mat-components/src/fs-calendar/calendar.models.ts):
94+
95+
```ts
96+
export interface CalendarExtendedDay<T = void> {
97+
date: Date;
98+
char?: string;
99+
colors?: {
100+
backgroundColor: string;
101+
color?: string;
102+
};
103+
toolTip?: string;
104+
badge?: {
105+
badgeMode: 'int' | 'icon';
106+
badgeInt?: number;
107+
badgeIcon?: string;
108+
};
109+
_meta?: CalendarExtendedDayMeta;
110+
customData?: T;
111+
}
112+
```
113+
114+
### Calendar Table Data
115+
116+
[`CalendarTableEntry`](../projects/ngx-mat-components/src/fs-calendar/calendar.models.ts):
117+
118+
```ts
119+
export interface CalendarTableEntry {
120+
name: string;
121+
data: CalendarExtendedDay[];
122+
}
123+
```
124+
125+
---
126+
127+
## Selection Events
128+
129+
- The panels emit a `(selection)` event with a [`CalendarEvent`](../projects/ngx-mat-components/src/fs-calendar/calendar.models.ts):
130+
- Range selection: `{ type: 'range', start, end, affectedDays }`
131+
- Single date: `{ type: 'click', date }`
132+
133+
---
134+
135+
## Theming & Styling
136+
137+
- The module supports Material 3 theming.
138+
- SCSS mixin: `fs-calendar-theme` ([styles/fs-calendar/_theming.scss](../projects/ngx-mat-components/styles/fs-calendar/_theming.scss))
139+
- To use the theme in your styles:
140+
```scss
141+
@use '@fullstack-devops/ngx-mat-components' as fsc;
142+
@include fsc.core();
143+
```
144+
145+
---
146+
147+
## API Reference
148+
149+
- [`FsCalendarPanelsComponent`](../projects/ngx-mat-components/src/fs-calendar/calendar-panels/calendar-panels.component.ts)
150+
- [`FsCalendarTableComponent`](../projects/ngx-mat-components/src/fs-calendar/calendar-table/fs-calendar-table.component.ts)
151+
- [`FsCalendarTableNameDirective`](../projects/ngx-mat-components/src/fs-calendar/directives/fs-calendar-table-name.directive.ts)
152+
- [`CalendarPanels`](../projects/ngx-mat-components/src/fs-calendar/calendar.models.ts)
153+
- [`CalendarPanelsConfig`](../projects/ngx-mat-components/src/fs-calendar/calendar.models.ts)
154+
- [`CalendarExtendedDay`](../projects/ngx-mat-components/src/fs-calendar/calendar.models.ts)
155+
- [`CalendarTableEntry`](../projects/ngx-mat-components/src/fs-calendar/calendar.models.ts)
156+
- [`CalendarEvent`](../projects/ngx-mat-components/src/fs-calendar/calendar.models.ts)
157+
- [`FsCalendarService`](../projects/ngx-mat-components/src/fs-calendar/services/fs-calendar.service.ts)
158+
159+
---
160+
161+
## Example Screenshots
162+
163+
![Calendar Panels Example](../projects/lib-workspace/src/assets/calendar-panels-shot.png)
164+
![Calendar Table Example](../projects/lib-workspace/src/assets/calendar-table-shot.png)
165+
166+
---
167+
168+
## See Also
169+
170+
- [Live Demo](https://fullstack-devops.github.io/ngx-mat-components)
171+
- Workspace Examples:
172+
- [showcase-calendar-panels](https://github.com/fullstack-devops/ngx-mat-components/tree/main/projects/lib-workspace/src/app/content/showcase-calendar-panels)
173+
- [showcase-calendar-table](https://github.com/fullstack-devops/ngx-mat-components/tree/main/projects/lib-workspace/src/app/content/showcase-calendar-table)

0 commit comments

Comments
 (0)