In this video, I am introducing a Calendar View PCF control for Power Apps Canvas applications.
This control can be added to a Canvas app and connected with data to show a calendar view of events, tasks, or any date-based records. Users can also edit data directly using the control.
🔹 What this video covers:
- Downloading the PCF solution from GitHub
- Importing the solution into Power Apps
- Enabling environment-level settings for code components
- Adding the Calendar View control to a Canvas app
- Connecting data and configuring the control
🧩 Power Fx Code Samples
Page OnStart / OnVisible
ClearCollect(
varCalendarItems,
[
{
uuid: "1",
start: Year(Today()) & "-" & Month(Today()) & "-05",
end: Year(Today()) & "-" & Month(Today()) & "-05",
title: "Project Deadline",
details: "This is the final deadline for the project submission.",
location: "Online",
color: "#FF5733"
},
{
uuid: "2",
start: Year(Today()) & "-" & Month(Today()) & "-" & Month(Today()) & "",
end: Year(Today()) & "-" & Month(Today()) & "-" & Month(Today()) & "",
title: "Team Retreat",
details: "3-day retreat at the mountains for team bonding and fun activities.",
location: "Mountain Resort",
color: "#337BFF"
},
{
uuid: "3",
start: Year(Today()) & "-" & Month(Today()) & "-15",
end: Year(Today()) & "-" & Month(Today()) & "-16",
title: "Client Presentation",
details: "Important presentation for the new client project.",
location: "Office Meeting Room",
color: "#28A745"
},
{
uuid: "4",
start: Year(Today()) & "-" & Month(Today()) & "-25",
end: Year(Today()) & "-" & Month(Today()) & "-27",
title: "Conference",
details: "Attending industry conference on new technology trends.",
location: "Tech Expo Center",
color: "#FFD700"
},
{
uuid: "5",
start: Year(Today()) & "-" & Month(Today()) & "-25",
end: Year(Today()) & "-" & Month(Today()) & "-26",
title: "Workshop",
details: "Workshop on Power Platform tools and techniques.",
location: "Online Webinar",
color: "#8b5cf6"
}
]
);
Set(
varUpdatedRec,
Blank()
);
Component OnChange
UpdateContext({patchingCalendar: true});
Set(
varUpdatedRec,
{
UUID: Text(ParseJSON(Self.updatedData).uuid),
StartDate: DateValue(ParseJSON(Self.updatedData).start),
EndDate: DateValue(ParseJSON(Self.updatedData).end),
Title: Text(ParseJSON(Self.updatedData).title),
Details: Text(ParseJSON(Self.updatedData).details),
Location: Text(ParseJSON(Self.updatedData).location),
Color: Text(ParseJSON(Self.updatedData).color)
}
);
UpdateIf(
varCalendarItems,
uuid = varUpdatedRec.UUID,
{
start: Text(ParseJSON(Self.updatedData).start),
end: Text(ParseJSON(Self.updatedData).end),
title: Text(ParseJSON(Self.updatedData).title),
details: Text(ParseJSON(Self.updatedData).details),
location: Text(ParseJSON(Self.updatedData).location),
color: Text(ParseJSON(Self.updatedData).color)
}
);
UpdateContext({patchingCalendar: false});
Calendar Data
{
rows: ForAll(
Filter(
varCalendarItems,
!patchingCalendar
) As _item,
{
uuid: _item.uuid,
start: Text(
DateValue(_item.start),
"yyyy-mm-dd"
),
end: Text(
DateValue( _item.end),
"yyyy-mm-dd"
),
title: _item.title,
details: _item.details,
location: _item.location,
color: _item.color
}
)
}
Calendar Date
Text(
Coalesce(
varUpdatedRec.StartDate,
Today()
),
"yyyy-mm-dd"
)
Date Text Color
"#353535"
Date Background Color
"white"
If you found this video helpful, don’t forget to like, share, and subscribe for more Power Platform and PCF content.
Comments
Post a Comment