Skip to content

Commit c009fbf

Browse files
LaskewitzLaskewitz
authored
yaml calendar (#46)
simple yaml calendar.
2 parents e70d602 + 22d0961 commit c009fbf

File tree

3 files changed

+315
-0
lines changed

3 files changed

+315
-0
lines changed

‎power-apps/calendar/README.md

+28
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
# Calendar
2+
3+
This is a snippet that can help you get started with creating a calendar in canvas app. It uses containers and galleries, to create a functional calendar.
4+
5+
## Authors
6+
7+
Snippet|Author(s)
8+
--------|---------
9+
Marcel Ferreira | [GitHub](https://github.com/marcelbf)
10+
11+
## Code
12+
13+
**[YAML-file](./source/calendar.pa.yaml)**
14+
15+
## Minimal path to awesome
16+
17+
1. Open your canvas app in **Power Apps**
18+
1. Copy the contents of the **[YAML-file](./source/calendar.pa.yaml)** or copy the code from above.
19+
1. Right click on the screen where you want to add the snippet and select "Paste Code"
20+
1. Customize the values to your need. Use the variable **_selectedDate** to get or set the selected date.
21+
22+
![View of the paste code button](./assets/calendar.png)
23+
24+
## Disclaimer
25+
26+
**THIS CODE IS PROVIDED *AS IS* WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.**
27+
28+
<img src="https://m365-visitor-stats.azurewebsites.net/powerplatform-snippets/power-apps/layout-pyramid" aria-hidden="true" />

‎power-apps/calendar/assets/calendar.png

19.1 KB
Loading

‎power-apps/calendar/source/calendar.pa.yaml

+287
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,287 @@
1+
- conCalendar:
2+
Control: GroupContainer
3+
Variant: horizontalAutoLayoutContainer
4+
Properties:
5+
DropShadow: =DropShadow.Semibold
6+
Height: =382
7+
LayoutAlignItems: =LayoutAlignItems.Stretch
8+
LayoutDirection: =LayoutDirection.Vertical
9+
LayoutGap: =10
10+
LayoutJustifyContent: =LayoutJustifyContent.Center
11+
LayoutMode: =LayoutMode.Auto
12+
PaddingBottom: =10
13+
PaddingLeft: =10
14+
PaddingRight: =10
15+
PaddingTop: =10
16+
RadiusBottomLeft: =20
17+
RadiusBottomRight: =20
18+
RadiusTopLeft: =20
19+
RadiusTopRight: =20
20+
Width: =504
21+
X: =40
22+
Y: =40
23+
Children:
24+
- conHeader:
25+
Control: GroupContainer
26+
Variant: horizontalAutoLayoutContainer
27+
Properties:
28+
DropShadow: =DropShadow.None
29+
FillPortions: =0
30+
Height: =50
31+
LayoutAlignItems: =LayoutAlignItems.Center
32+
LayoutMinHeight: =77
33+
LayoutMode: =LayoutMode.Auto
34+
PaddingBottom: =10
35+
PaddingLeft: =10
36+
PaddingRight: =10
37+
PaddingTop: =10
38+
Children:
39+
- lblMonthYear:
40+
Control: Label
41+
Properties:
42+
Text: =If(IsBlank(_firstDayOfMonth), Text(Today(),"[$-en-US]mmmm yyyy"),Text(_firstDayOfMonth,"[$-en-US]mmmm") & " " & Text(_firstDayOfMonth,"[$-en-US]yyyy"))
43+
Align: =LayoutAlignItems.Center
44+
AutoHeight: =true
45+
BorderColor: =RGBA(0, 18, 107, 1)
46+
Color: =
47+
FillPortions: =3
48+
FocusedBorderColor: =lblMonthYear.BorderColor
49+
FocusedBorderThickness: =5
50+
Font: =Font.'Open Sans'
51+
Height: =72
52+
HoverBorderColor: =lblMonthYear.BorderColor
53+
HoverColor: =lblMonthYear.Color
54+
HoverFill: =lblMonthYear.Fill
55+
PressedBorderColor: =lblMonthYear.BorderColor
56+
PressedColor: =lblMonthYear.Color
57+
PressedFill: =lblMonthYear.Fill
58+
Size: =20
59+
TabIndex: =3
60+
Width: =Parent.Width
61+
Y: =40
62+
- btnPrevMonth:
63+
Control: Classic/Icon
64+
Properties:
65+
OnSelect: |
66+
=If(IsBlank(_firstDayOfMonth),
67+
Set(_firstDayOfMonth, DateAdd(Today(), 1 - Day(Today()), TimeUnit.Days));
68+
Set(_lastDayOfMonth, DateAdd(DateAdd(_firstDayOfMonth, 1, TimeUnit.Months), -1, TimeUnit.Days))
69+
);
70+
/*changes month view to previous month*/
71+
Set(_firstDayOfMonth, DateAdd(_firstDayOfMonth, -1, TimeUnit.Months));
72+
Set(_firstDayInView, DateAdd(_firstDayOfMonth, -(Weekday(_firstDayOfMonth) - 2 + 1), TimeUnit.Days));
73+
Set(_lastDayOfMonth, DateAdd(DateAdd(_firstDayOfMonth, 1, TimeUnit.Months), -1, TimeUnit.Days));
74+
AccessibleLabel: ="Go Back"
75+
BorderColor: =RGBA(166, 166, 166, 1)
76+
Color: =Color.Black
77+
DisabledBorderColor: =RGBA(0, 0, 0, 0)
78+
DisabledColor: =RGBA(220, 220, 220, 1)
79+
DisabledFill: =RGBA(0, 0, 0, 0)
80+
FocusedBorderColor: =btnPrevMonth.BorderColor
81+
FocusedBorderThickness: =4
82+
Height: |
83+
=Parent.Height - 10
84+
HoverBorderColor: =RGBA(0, 0, 0, 0)
85+
HoverColor: =ColorFade(RGBA(0, 120, 212, 1), -30%)
86+
HoverFill: =RGBA(0, 0, 0, 0)
87+
Icon: =Icon.ArrowUp
88+
LayoutMinWidth: =10
89+
PaddingBottom: |
90+
=7
91+
PaddingTop: '=7 '
92+
PressedBorderColor: =RGBA(0, 0, 0, 0)
93+
PressedColor: =ColorFade(RGBA(0, 120, 212, 1), -30%)
94+
PressedFill: =RGBA(0, 0, 0, 0)
95+
TabIndex: =1
96+
Width: "=\r\n50 "
97+
X: =40
98+
Y: =40
99+
- btnNextMonth:
100+
Control: Classic/Icon
101+
Properties:
102+
OnSelect: |-
103+
=If(IsBlank(_firstDayOfMonth),
104+
Set(_firstDayOfMonth, DateAdd(Today(), 1 - Day(Today()), TimeUnit.Days));
105+
Set(_lastDayOfMonth, DateAdd(DateAdd(_firstDayOfMonth, 1, TimeUnit.Months), -1, TimeUnit.Days))
106+
);
107+
/*changes month view to next month*/
108+
Set(_firstDayOfMonth, DateAdd(_firstDayOfMonth, 1, TimeUnit.Months));
109+
Set(_firstDayInView, DateAdd(_firstDayOfMonth, -(Weekday(_firstDayOfMonth) - 2 + 1), TimeUnit.Days));
110+
AccessibleLabel: ="Next Month"
111+
BorderColor: =RGBA(166, 166, 166, 1)
112+
Color: =Color.Black
113+
DisabledBorderColor: =RGBA(0, 0, 0, 0)
114+
DisabledColor: =RGBA(220, 220, 220, 1)
115+
DisabledFill: =RGBA(0, 0, 0, 0)
116+
FocusedBorderColor: =btnNextMonth.BorderColor
117+
FocusedBorderThickness: =4
118+
Height: =btnPrevMonth.Height
119+
HoverBorderColor: =RGBA(0, 0, 0, 0)
120+
HoverColor: =ColorFade(RGBA(0, 120, 212, 1), -30%)
121+
HoverFill: =RGBA(0, 0, 0, 0)
122+
PaddingBottom: |
123+
=7
124+
PaddingTop: =7
125+
PressedBorderColor: =RGBA(0, 0, 0, 0)
126+
PressedColor: =ColorFade(RGBA(0, 120, 212, 1), -30%)
127+
PressedFill: =RGBA(0, 0, 0, 0)
128+
TabIndex: =2
129+
Width: '=50 '
130+
X: =Parent.Width-btnNextMonth.Width
131+
Y: =40
132+
- conDates:
133+
Control: GroupContainer
134+
Variant: horizontalAutoLayoutContainer
135+
Properties:
136+
DropShadow: =DropShadow.None
137+
Height: =75
138+
LayoutAlignItems: =LayoutAlignItems.Stretch
139+
LayoutDirection: =LayoutDirection.Vertical
140+
LayoutMode: =LayoutMode.Auto
141+
PaddingBottom: =10
142+
PaddingLeft: =10
143+
PaddingRight: =10
144+
PaddingTop: =10
145+
Children:
146+
- conWeekDays:
147+
Control: GroupContainer
148+
Variant: horizontalAutoLayoutContainer
149+
Properties:
150+
AlignInContainer: =AlignInContainer.SetByContainer
151+
DropShadow: =DropShadow.None
152+
FillPortions: =0
153+
Height: =40
154+
LayoutAlignItems: =LayoutAlignItems.Center
155+
LayoutGap: =10
156+
LayoutJustifyContent: =LayoutJustifyContent.Center
157+
LayoutMode: =LayoutMode.Auto
158+
Children:
159+
- galWeekDays:
160+
Control: Gallery
161+
Variant: BrowseLayout_Horizontal_TwoTextOneImageVariant_ver5.0
162+
Properties:
163+
Items: |-
164+
=[DateAdd(Today(),
165+
-(Weekday(Today(),StartOfWeek.Monday)),
166+
TimeUnit.Days
167+
),DateAdd(Today(),
168+
-(Weekday(Today(),StartOfWeek.Monday)) + 1,
169+
TimeUnit.Days
170+
),DateAdd(Today(),
171+
-(Weekday(Today(),StartOfWeek.Monday)) + 2,
172+
TimeUnit.Days
173+
),DateAdd(Today(),
174+
-(Weekday(Today(),StartOfWeek.Monday)) + 3,
175+
TimeUnit.Days
176+
),DateAdd(Today(),
177+
-(Weekday(Today(),StartOfWeek.Monday)) + 4,
178+
TimeUnit.Days
179+
),DateAdd(Today(),
180+
-(Weekday(Today(),StartOfWeek.Monday)) + 5,
181+
TimeUnit.Days
182+
),DateAdd(Today(),
183+
-(Weekday(Today(),StartOfWeek.Monday)) + 6,
184+
TimeUnit.Days
185+
)]
186+
AlignInContainer: =AlignInContainer.Center
187+
DelayItemLoading: =true
188+
DisplayMode: =DisplayMode.View
189+
Height: =23
190+
LayoutMinHeight: =23
191+
LoadingSpinner: =LoadingSpinner.Data
192+
ShowScrollbar: =false
193+
TemplatePadding: =0
194+
TemplateSize: =Parent.Width /7
195+
Width: =242
196+
Children:
197+
- txtWeekDays:
198+
Control: Text
199+
Properties:
200+
Align: ='TextCanvas.Align'.End
201+
AutoHeight: =true
202+
Text: =Text(ThisItem.Value,"ddd")
203+
VerticalAlign: =VerticalAlign.Middle
204+
Weight: ='TextCanvas.Weight'.Semibold
205+
Height: =23
206+
Width: '=40 '
207+
- conMonthDays:
208+
Control: GroupContainer
209+
Variant: horizontalAutoLayoutContainer
210+
Properties:
211+
AlignInContainer: =AlignInContainer.SetByContainer
212+
DropShadow: =DropShadow.None
213+
Height: =40
214+
LayoutAlignItems: =LayoutAlignItems.Center
215+
LayoutGap: =10
216+
LayoutJustifyContent: =LayoutJustifyContent.Center
217+
LayoutMode: =LayoutMode.Auto
218+
LayoutOverflowX: =LayoutOverflow.Scroll
219+
LayoutOverflowY: =LayoutOverflow.Scroll
220+
Children:
221+
- galDays:
222+
Control: Gallery
223+
Variant: galleryVertical
224+
Properties:
225+
Items: =[0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19, 20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41]
226+
WrapCount: =7
227+
AlignInContainer: =AlignInContainer.Center
228+
DelayItemLoading: =true
229+
Height: '=Parent.Height-10 '
230+
Layout: =Layout.Vertical
231+
LayoutMinHeight: =10
232+
LoadingSpinner: =LoadingSpinner.Data
233+
ShowScrollbar: =false
234+
TemplatePadding: =0
235+
TemplateSize: =Parent.Height / 7
236+
Width: =50
237+
Children:
238+
- lblDay:
239+
Control: Label
240+
Properties:
241+
OnSelect: |-
242+
=Set(_selectedDate, DateAdd(
243+
If(IsBlank(_firstDayInView),
244+
DateAdd(Today(), 1 - Day(Today()), TimeUnit.Days),
245+
_firstDayInView
246+
),
247+
ThisItem.Value, TimeUnit.Days));
248+
Text: |-
249+
=If(IsBlank(_firstDayInView),
250+
With(
251+
{
252+
loc_firstDayOfMonth: DateAdd(Today(), 1 - Day(Today()), TimeUnit.Days)
253+
},
254+
Day(DateAdd(DateAdd(loc_firstDayOfMonth,-(Weekday(loc_firstDayOfMonth)-2+1),TimeUnit.Days),ThisItem.Value,TimeUnit.Days))),
255+
Day(DateAdd(_firstDayInView,ThisItem.Value,TimeUnit.Days)))
256+
Align: =Align.Center
257+
Color: |-
258+
=If(
259+
DateAdd(If(IsBlank(_firstDayInView),
260+
DateAdd(Today(), 1 - Day(Today()), TimeUnit.Days),
261+
_firstDayInView
262+
), ThisItem.Value
263+
) = _selectedDate
264+
,Color.Red
265+
, Color.Black)
266+
Fill: |-
267+
=/*Fill value changes if the gallery item day = today, or if it lies outside of the current month*/
268+
If(
269+
/*Date selected is today*/
270+
DateAdd(_firstDayInView, ThisItem.Value) = Today() && DateAdd(_firstDayInView, ThisItem.Value) = _selectedDate, RGBA(0,0,0,0),
271+
/*The day is outside the range of the currently selected month*/
272+
Abs(Self.Text - ThisItem.Value) > 10,RGBA(200, 200, 200, 0.3), RGBA(0, 0, 0, 0))
273+
FontWeight: |-
274+
=If(
275+
DateAdd(If(IsBlank(_firstDayInView),
276+
DateAdd(Today(), 1 - Day(Today()), TimeUnit.Days),
277+
_firstDayInView
278+
), ThisItem.Value
279+
) = _selectedDate
280+
,FontWeight.Bold
281+
, FontWeight.Normal
282+
)
283+
Height: =Parent.Height/6 -10
284+
Size: =15
285+
VerticalAlign: =VerticalAlign.Top
286+
Width: '=Parent.Width / 7 '
287+
Wrap: =false

0 commit comments

Comments
 (0)