Skip to content
Gallery
Power Apps UI Cooker
Introduction
About Author
Release Notes
Custom Functions
Custom Components
Share
Explore
Custom Components

icon picker
Short Calendar

MyCondy
Last edited 32 days ago by MyCondy

How to design it in Power Apps

Preview

⁠
Screenshot 2024-11-09 at 16.47.56.png
⁠
⁠

What does it consist of?

6x Containers
5x Label
2x Gallery

Procedure

Step 1 - create cover container
Add a new Vertical Container PCF object, call it "week_cal_frame" with this "DropShadow" property:
DropShadow.Semibold
Step 2 - create header
Add a new Horizontal Container PCF object, call it "header_frame" with this "Gap" property:
10
Add a new Text Input object, call it "today_value" with this "Text" property:
Text(Today(),"dd")
Add a new Vertical Container PCF object, call it "right_date_frame" with this "AlignInContainer" property:
AlignInContainer.Center
Add a new Text Input object under "right_date_frame", call it "day_value" with this "Text" property:
Text(Today(),"dddd")
Add a new Text Input object under "right_date_frame", call it "month_value" with this "Text" property:
Text(Today(),"mmmm")
Step 3 - create content
Add a new Vertical Container PCF object, call it "dates_frame" with this "Gap" property:
10
Add a new Horizontal Container PCF object, call it "week_days_frame" with this "Gap" property:
10
Add a new Horizontal Gallery object under "week_days_frame", call it "gallery_days" with this "Items" property:
[DateAdd(Today(),
-(Weekday(Today(),StartOfWeek.MondayZero)),
TimeUnit.Days
),DateAdd(Today(),
-(Weekday(Today(),StartOfWeek.MondayZero)) + 1,
TimeUnit.Days
),DateAdd(Today(),
-(Weekday(Today(),StartOfWeek.MondayZero)) + 2,
TimeUnit.Days
),DateAdd(Today(),
-(Weekday(Today(),StartOfWeek.MondayZero)) + 3,
TimeUnit.Days
),DateAdd(Today(),
-(Weekday(Today(),StartOfWeek.MondayZero)) + 4,
TimeUnit.Days
),DateAdd(Today(),
-(Weekday(Today(),StartOfWeek.MondayZero)) + 5,
TimeUnit.Days
),DateAdd(Today(),
-(Weekday(Today(),StartOfWeek.MondayZero)) + 6,
TimeUnit.Days
)]
Add a new Text Input object under "gallery_days", call it "day_item_value" with this "Text" property:
Text(ThisItem.Value,"dd")
And Color property:
If(Text(Today(),"dd") = Text(ThisItem.Value,"dd"),RGBA(253, 56, 43, 1),Weekday(ThisItem.Value) = 1 || Weekday(ThisItem.Value) = 7, RGBA(190, 189, 190, 1))
Add a new Horizontal Container PCF object, call it "day_names_frame" with this "Gap" property:
10
Add a new Horizontal Gallery object under "day_names_frame", call it "gallery_week" with this "Items" property:
[DateAdd(Today(),
-(Weekday(Today(),StartOfWeek.MondayZero)),
TimeUnit.Days
),DateAdd(Today(),
-(Weekday(Today(),StartOfWeek.MondayZero)) + 1,
TimeUnit.Days
),DateAdd(Today(),
-(Weekday(Today(),StartOfWeek.MondayZero)) + 2,
TimeUnit.Days
),DateAdd(Today(),
-(Weekday(Today(),StartOfWeek.MondayZero)) + 3,
TimeUnit.Days
),DateAdd(Today(),
-(Weekday(Today(),StartOfWeek.MondayZero)) + 4,
TimeUnit.Days
),DateAdd(Today(),
-(Weekday(Today(),StartOfWeek.MondayZero)) + 5,
TimeUnit.Days
),DateAdd(Today(),
-(Weekday(Today(),StartOfWeek.MondayZero)) + 6,
TimeUnit.Days
)]
Add a new Text Input object under "gallery_week", call it "week_name_value" with this "Text" property:
Text(ThisItem.Value,"ddd")
This is an output:
⁠
Screenshot 2024-11-09 at 16.47.47.png
⁠
⁠

How to design it in Figma

Preview

⁠
Screenshot 2024-11-09 at 16.50.35.png
⁠
⁠

What does it consist of?

8x Frame
17x Text

Procedure

Step 1 - create vertical frame
Add a new Frame (F command) with vertical auto layout (SHIFT + A command) object, call it "vercont_week_cal_frame" with these properties:
⁠
Screenshot 2024-11-09 at 17.00.58.png
⁠
⁠
Step 2 - create header
Add a new Frame (F command) with horizontal auto layout (SHIFT + A command) object, call it "horcont_header_frame" with these properties:
⁠
Screenshot 2024-11-09 at 17.02.21.png
⁠
⁠
Add a new Text (T command) object under a "horcont_header_frame" frame, call it "lbl_today_value" with these properties:
⁠
Screenshot 2024-11-09 at 17.03.27.png
⁠
⁠
Add a new Frame (F command) with vertical auto layout (SHIFT + A command) object under a "horcont_header_frame" frame,, call it "vercont_right_date_frame" with these properties:
⁠
Screenshot 2024-11-09 at 17.20.02.png
⁠
⁠
Add a new Text (T command) object under a "vercont_right_date_frame" frame, call it "lbl_day_value" with these properties:
⁠
Screenshot 2024-11-09 at 17.21.05.png
⁠
⁠
Add a new Text (T command) object under a "vercont_right_date_frame" frame, call it "lbl_month_value" with these properties:
⁠
Screenshot 2024-11-09 at 17.54.33.png
⁠
⁠
Step 3 - create content
Add a new Frame (F command) with vertical auto layout (SHIFT + A command) object, call it "vercont_dates_frame" with these properties:
⁠
Screenshot 2024-11-09 at 17.57.39.png
⁠
⁠
Add a new Frame (F command) with horizontal auto layout (SHIFT + A command) object, call it "horcont_week_days_frame" with these properties:
⁠
Screenshot 2024-11-09 at 17.58.32.png
⁠
⁠
Add a new Frame (F command) with object under a "horcont_week_days_frame" frame, call it "horgall_days_gallery" with these properties:
⁠
Screenshot 2024-11-09 at 18.32.51.png
⁠
⁠
Add 7 Text (T command) object under a "horgall_days_gallery" frame, call it "lbl_day_item_value/11/12/13/14/15/16" with these properties:
⁠
Screenshot 2024-11-09 at 18.34.15.png
⁠
⁠

Add a new Frame (F command) with horizontal auto layout (SHIFT + A command) object, call it "horcont_day_names_frame" with these properties:
⁠
Screenshot 2024-11-09 at 19.04.58.png
⁠
⁠
Add a new Frame (F command) with object under a "horcont_day_names_frame" frame, call it "horgall_week_gallery" with these properties:
⁠
Screenshot 2024-11-09 at 19.06.28.png
⁠
⁠
Add 7 Text (T command) object under a "horgall_week_gallery" frame, call it "lbl_week_name_value/Mo/Tu/We/Th/Fr/Sa" with these properties:
⁠
Screenshot 2024-11-09 at 19.06.43.png
⁠
⁠
This is an output:
⁠
Screenshot 2024-11-09 at 16.51.15.png
⁠
⁠

How to use it via DesignKit

Prerequisites

the designed component according to the instructions from the previous section

Used Prefixes

vercont_week_cal_frame, vercont_dates_frame = Vertical Container
lbl_today_value, lbl_month_value = Label
horcont_header_frame =Horizontal Container
horgall_days_gallery = Horizontal Gallery

YAML Output

⁠
output.png
⁠
⁠

Used Colours

Frame Background - #FFFFFF
Selected Date Colour - #FD382B
Week Days Colour - #BEBDBE
Work Days Colour - #000000

⁠
← Search Box
⁠
⁠
⁠
Status Report →
⁠
⁠

Want to print your doc?
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.