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:
Step 2 - create header
Add a new Horizontal Container PCF object, call it "header_frame" with this "Gap" property:
Add a new Text Input object, call it "today_value" with this "Text" property:
Add a new Vertical Container PCF object, call it "right_date_frame" with this "AlignInContainer" property:
Add a new Text Input object under "right_date_frame", call it "day_value" with this "Text" property:
Add a new Text Input object under "right_date_frame", call it "month_value" with this "Text" property:
Step 3 - create content
Add a new Vertical Container PCF object, call it "dates_frame" with this "Gap" property:
Add a new Horizontal Container PCF object, call it "week_days_frame" with this "Gap" property:
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:
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
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
Used Colours
Frame Background - #FFFFFF Selected Date Colour - #FD382B Week Days Colour - #BEBDBE Work Days Colour - #000000