Skip to content
How to design it in Power Apps
Preview
What does it consist of?
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:
How to design it in Figma
Preview
What does it consist of?
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:
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:
Add a new Text (T command) object under a "horcont_header_frame" frame, call it "lbl_today_value" with these properties:
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:
Add a new Text (T command) object under a "vercont_right_date_frame" frame, call it "lbl_day_value" with these properties:
Add a new Text (T command) object under a "vercont_right_date_frame" frame, call it "lbl_month_value" with these properties:
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:
Add a new Frame (F command) with horizontal auto layout (SHIFT + A command) object, call it "horcont_week_days_frame" with these properties:
Add a new Frame (F command) with object under a "horcont_week_days_frame" frame, call it "horgall_days_gallery" with these properties:
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:
Add a new Frame (F command) with horizontal auto layout (SHIFT + A command) object, call it "horcont_day_names_frame" with these properties:
Add a new Frame (F command) with object under a "horcont_day_names_frame" frame, call it "horgall_week_gallery" with these properties:
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:
This is an output:
How to use it via DesignKit
Prerequisites
Used Prefixes
YAML Output
Used Colours
Want to print your doc?
This is not the way.
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.