@idea-ionic/agenda 6.8.0 → 6.9.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +2 -2
- package/css/global.scss +45 -57
- package/esm2020/src/agenda.component.mjs +138 -19
- package/esm2020/src/agenda.module.mjs +1 -1
- package/esm2020/src/dateFormatter.provider.mjs +13 -26
- package/fesm2015/idea-ionic-agenda.mjs +151 -44
- package/fesm2015/idea-ionic-agenda.mjs.map +1 -1
- package/fesm2020/idea-ionic-agenda.mjs +150 -44
- package/fesm2020/idea-ionic-agenda.mjs.map +1 -1
- package/package.json +1 -1
- package/src/agenda.component.d.ts +68 -21
- package/src/dateFormatter.provider.d.ts +7 -7
package/README.md
CHANGED
|
@@ -15,8 +15,8 @@ _Be sure to install all the requested peer dependencies._
|
|
|
15
15
|
Then, add this imports into the `global.scss` file, after the import on the top of the page:
|
|
16
16
|
|
|
17
17
|
```
|
|
18
|
-
@import '
|
|
19
|
-
@import '
|
|
18
|
+
@import '../node_modules/angular-calendar/css/angular-calendar.css';
|
|
19
|
+
@import '../node_modules/@idea-ionic/agenda/css/global.scss';
|
|
20
20
|
```
|
|
21
21
|
|
|
22
22
|
To make sure the translations are loaded into the project:
|
package/css/global.scss
CHANGED
|
@@ -2,19 +2,40 @@
|
|
|
2
2
|
// @import '../node_modules/@idea-ionic/agenda/css/global.scss';
|
|
3
3
|
|
|
4
4
|
idea-agenda .agenda {
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
5
|
+
--idea-agenda-marker-color: var(--ion-color-primary);
|
|
6
|
+
--idea-agenda-border-color: var(--ion-color-light);
|
|
7
|
+
--idea-agenda-header-background: var(--ion-color-white);
|
|
8
|
+
--idea-agenda-header-highlight: rgba(var(--ion-color-medium-rgb), 0.06);
|
|
9
|
+
--idea-agenda-today-highlight: rgba(var(--ion-color-medium-rgb), 0.2);
|
|
10
|
+
--idea-agenda-cell-background: var(--ion-color-white);
|
|
11
|
+
--idea-agenda-month-badge: var(--ion-color-primary);
|
|
12
|
+
--idea-agenda-event-background: var(--ion-color-primary-shade);
|
|
13
|
+
--idea-agenda-event-border-color: var(--ion-color-white);
|
|
14
|
+
--idea-agenda-month-detail-background: var(--ion-color-light);
|
|
15
|
+
--idea-agenda-month-detail-color: var(--ion-color-light-contrast);
|
|
16
|
+
--idea-agenda-month-detail-shadow-box: inset 0 0 6px 0 rgba(0, 0, 0, 0.5);
|
|
17
|
+
--idea-agenda-disabled-background: var(--ion-color-light);
|
|
18
|
+
--idea-agenda-disabled-opacity: 0.7;
|
|
19
|
+
--idea-agenda-external-event-border-color: var(--ion-color-medium-tint);
|
|
20
|
+
|
|
21
|
+
@media (prefers-color-scheme: dark) {
|
|
22
|
+
--idea-agenda-border-color: var(--ion-color-white);
|
|
23
|
+
--idea-agenda-header-background: var(--ion-color-white-shade);
|
|
24
|
+
--idea-agenda-header-highlight: var(--ion-color-light-shade);
|
|
25
|
+
--idea-agenda-today-highlight: rgba(var(--ion-color-light-rgb), 0.3);
|
|
26
|
+
--idea-agenda-cell-background: var(--ion-color-white-shade);
|
|
27
|
+
--idea-agenda-external-event-border-color: var(--ion-color-light-tint);
|
|
13
28
|
}
|
|
29
|
+
|
|
14
30
|
// remove focused effect on cells (it depends on the SO, so it's unpredictable)
|
|
15
31
|
*:focus {
|
|
16
32
|
outline-width: 0;
|
|
17
33
|
}
|
|
34
|
+
// "now" marker
|
|
35
|
+
.cal-current-time-marker {
|
|
36
|
+
height: 3px;
|
|
37
|
+
background-color: var(--idea-agenda-marker-color);
|
|
38
|
+
}
|
|
18
39
|
// general border color
|
|
19
40
|
.cal-day-headers,
|
|
20
41
|
.cal-header,
|
|
@@ -25,25 +46,9 @@ idea-agenda .agenda {
|
|
|
25
46
|
.cal-days,
|
|
26
47
|
.cal-day-cell,
|
|
27
48
|
.cal-cell-row,
|
|
28
|
-
.cal-all-day-events
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
border-color: var(--ion-color-white) !important;
|
|
32
|
-
}
|
|
33
|
-
}
|
|
34
|
-
// fixed border top header month view
|
|
35
|
-
.cal-month-view .cal-header {
|
|
36
|
-
border-top: 1px solid var(--ion-color-light-shade) !important;
|
|
37
|
-
@media (prefers-color-scheme: dark) {
|
|
38
|
-
border-top: 1px solid var(--ion-color-white) !important;
|
|
39
|
-
}
|
|
40
|
-
}
|
|
41
|
-
// add border bottom to the agenda block (day and week view)
|
|
42
|
-
.cal-week-view {
|
|
43
|
-
border-bottom: 1px solid var(--ion-color-light-shade) !important;
|
|
44
|
-
@media (prefers-color-scheme: dark) {
|
|
45
|
-
border-bottom: 1px solid var(--ion-color-white) !important;
|
|
46
|
-
}
|
|
49
|
+
.cal-all-day-events,
|
|
50
|
+
.cal-time-events {
|
|
51
|
+
border-color: var(--idea-agenda-border-color) !important;
|
|
47
52
|
}
|
|
48
53
|
// headers rows and cells
|
|
49
54
|
.cal-day-headers,
|
|
@@ -51,10 +56,7 @@ idea-agenda .agenda {
|
|
|
51
56
|
.cal-time-label-column .cal-hour,
|
|
52
57
|
.cal-time-label-column .cal-hour-segment,
|
|
53
58
|
.cal-month-view .cal-header {
|
|
54
|
-
background-color: var(--
|
|
55
|
-
@media (prefers-color-scheme: dark) {
|
|
56
|
-
background-color: var(--ion-color-white-shade);
|
|
57
|
-
}
|
|
59
|
+
background-color: var(--idea-agenda-header-background);
|
|
58
60
|
}
|
|
59
61
|
// text color for the weekends' detail label in the header (e.g. oct 17)
|
|
60
62
|
.cal-weekend span {
|
|
@@ -66,17 +68,11 @@ idea-agenda .agenda {
|
|
|
66
68
|
.cal-hour-segment:hover,
|
|
67
69
|
.cal-cell:hover,
|
|
68
70
|
.cal-open {
|
|
69
|
-
background-color:
|
|
70
|
-
@media (prefers-color-scheme: dark) {
|
|
71
|
-
background-color: var(--ion-color-light-shade) !important;
|
|
72
|
-
}
|
|
71
|
+
background-color: var(--idea-agenda-header-highlight) !important;
|
|
73
72
|
}
|
|
74
73
|
// highlight today's date
|
|
75
74
|
.cal-today {
|
|
76
|
-
background-color:
|
|
77
|
-
@media (prefers-color-scheme: dark) {
|
|
78
|
-
background-color: rgba(var(--ion-color-light-rgb), 0.3) !important;
|
|
79
|
-
}
|
|
75
|
+
background-color: var(--idea-agenda-header-highlight) !important;
|
|
80
76
|
}
|
|
81
77
|
// avoid highlighting entire rows in month view
|
|
82
78
|
.cal-month-view .cal-cell-row:hover {
|
|
@@ -86,33 +82,27 @@ idea-agenda .agenda {
|
|
|
86
82
|
.cal-month-view,
|
|
87
83
|
.cal-hour,
|
|
88
84
|
.cal-hour-odd {
|
|
89
|
-
background-color: var(--
|
|
90
|
-
@media (prefers-color-scheme: dark) {
|
|
91
|
-
background-color: var(--ion-color-white-shade);
|
|
92
|
-
}
|
|
85
|
+
background-color: var(--idea-agenda-cell-background);
|
|
93
86
|
}
|
|
94
87
|
// month view day's details row style
|
|
95
88
|
.cal-month-view .cal-open-day-events {
|
|
96
|
-
background-color: var(--
|
|
97
|
-
color: var(--
|
|
98
|
-
box-shadow:
|
|
89
|
+
background-color: var(--idea-agenda-month-detail-background);
|
|
90
|
+
color: var(--idea-agenda-month-detail-color);
|
|
91
|
+
box-shadow: var(--idea-agenda-month-detail-shadow-box);
|
|
99
92
|
}
|
|
100
93
|
// events style for week and day view
|
|
101
94
|
mwl-calendar-week-view-event .cal-event,
|
|
102
95
|
mwl-calendar-day-view .cal-event {
|
|
103
96
|
border: none;
|
|
104
97
|
border-radius: 3px;
|
|
105
|
-
border-left: 4px solid var(--
|
|
98
|
+
border-left: 4px solid var(--idea-agenda-event-border-color);
|
|
106
99
|
box-shadow: 0 1px 0 rgba(9, 30, 66, 0.25);
|
|
107
|
-
background: var(--
|
|
100
|
+
background: var(--idea-agenda-event-background);
|
|
108
101
|
}
|
|
109
102
|
// give less focus to external events
|
|
110
103
|
.cal-event.external {
|
|
111
104
|
opacity: 0.6;
|
|
112
|
-
border: 1px solid var(--
|
|
113
|
-
@media (prefers-color-scheme: dark) {
|
|
114
|
-
border: 1px solid var(--ion-color-light-tint) !important;
|
|
115
|
-
}
|
|
105
|
+
border: 1px solid var(--idea-agenda-external-event-border-color) !important;
|
|
116
106
|
.cal-event-title {
|
|
117
107
|
color: var(--ion-text-color) !important;
|
|
118
108
|
}
|
|
@@ -164,14 +154,12 @@ idea-agenda .agenda {
|
|
|
164
154
|
}
|
|
165
155
|
// month view events counter badge
|
|
166
156
|
.cal-day-badge {
|
|
167
|
-
background-color: var(--
|
|
157
|
+
background-color: var(--idea-agenda-month-badge);
|
|
168
158
|
}
|
|
169
159
|
// show as disabled the cells/days that aren't valid
|
|
170
160
|
.cal-disabled {
|
|
171
161
|
pointer-events: none;
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
.cal-disabled.cal-header {
|
|
175
|
-
opacity: 0.1;
|
|
162
|
+
opacity: var(--idea-agenda-disabled-opacity);
|
|
163
|
+
background-color: var(--idea-agenda-disabled-background);
|
|
176
164
|
}
|
|
177
165
|
}
|