Can we show dynamic caledars under each other inside a canvas app, representing items inside a sharepoint list

[johnjohn123]

I have a SharePoint list named Calendars, which contain the CalendarID + CalendarTitle, as follow:-

Then i have another list which store the events of the calendars, as follow:-

now i want to do the following inside my canvas app screen:-

1) Show horizontal calendars based on the number of items inside the Calendars SharePoint list

2) Inside each horizontal calendar to show the items based on the items inside the CalendarEvents list.

something as follow:-

But i am not sure if i can or how i can achieve the following:-

1) Show dynamic calendar controls to be equal to the number of items inside the Calendars SharePoint list? the customer might add one calendar each 1-2 years, so i need this to be dynamic. let say next year they add a new calendar item inside the Calednars SharePoint list named Category-7 , then the canvas app screen should be as follow:-

So does Power Apps support this type of components? and what i need to do to achieve this? Thanks

[Kirkby]

Hello!

There could be various ways to implement your ideas. My approach is as follows. Of course, there might be several limitations or issues that I could not think.

There are two galleries that are different from each other. The galCalendar displays a dynamic calendar that reflects leap year, while the galScheduleBar displays category information in SharePoint list.

Due to the structural characteristics of the Gallery in Power Apps, it is not possible to dynamically create items like bars to display schedules. Therefore, I have created a large number of bars as much as space allows and handled them to only show the required number of schedules.

The following code may contain inefficient logic. I ask for your understanding

--------------------------------------------------------------------------------------------------------

UpdateContext({selectedYear:Text(cmbYears.Selected.Value)}); //A year that calendar should display (2023, 2024.....)

ClearCollect(
// Collect data set manually as follows for convenience. Actually, Data is collected from SharePoint by simple Fx
// Order does not matter. BGColor and Image are not important.
Events, Table(
{EventName:"Category-1",Group:1, Image:LisaSimpson, StartDate:"1/17/2023", EndDate:"1/22/2023", BGColor:RGBA(128, 36, 36, 0.44)},
{EventName:"Category-1",Group:1, Image:LisaSimpson, StartDate:"1/23/2023", EndDate:"1/24/2023", BGColor:RGBA(255, 149, 0, 0.67)},
{EventName:"Category-1",Group:1, Image:LisaSimpson, StartDate:"2/1/2023", EndDate:"3/8/2023", BGColor:RGBA(255, 149, 0, 0.44)},
{EventName:"Category-1",Group:1, Image:LisaSimpson, StartDate:"1/6/2023", EndDate:"2/13/2023", BGColor:RGBA(255, 149, 0, 0.75)},
{EventName:"Category-2",Group:2, Image:frog, StartDate:"1/12/2023", EndDate:"1/16/2023", BGColor: RGBA(0, 94, 146, 0.59)},
{EventName:"Category-2",Group:2, Image:frog, StartDate:"1/10/2023", EndDate:"1/18/2023", BGColor: RGBA(0, 94, 146, 0.59)},
{EventName:"Category-2",Group:2, Image:frog, StartDate:"1/23/2023", EndDate:"1/22/2023", BGColor: RGBA(0, 94, 146, 0.59)},
{EventName:"Category-3",Group:3, Image:Snoopy, StartDate:"1/8/2023", EndDate:"1/16/2023", BGColor:RGBA(4, 66, 22, 0.47)},
{EventName:"Category-3",Group:3, Image:Snoopy, StartDate:"2/1/2023", EndDate:"2/22/2023", BGColor:RGBA(6, 121, 125, 0.5)},
{EventName:"Category-4",Group:4, Image:her, StartDate:"1/2/2023", EndDate:"1/19/2023", BGColor:RGBA(128, 128, 128, 1)},
{EventName:"Category-5",Group:5, Image:olaf, StartDate:"1/30/2023", EndDate:"2/18/2023", BGColor: RGBA(6, 121, 125, 0.5)},
{EventName:"Category-5",Group:5, Image:olaf, StartDate:"1/31/2023", EndDate:"2/2/2023", BGColor: RGBA(6, 121, 125, 0.5)}
)
);

ClearCollect(EventsCopied, Events);
//Created collection by grouping the items in the "EventsCopied" collection based on the "EventName" field.
//Utilize the collection I have created in order to show categories without any duplicates.

ClearCollect(
DistinctEvents, //galScheduleBar uses this
GroupBy(EventsCopied, "EventName", "GroupedEvents")//,
);

//Check if year that calendar renders is leap year

//Checking if leap year is important because the starting and end points of the schedule could be wrong when rendering that on the galScheduleBar placed on the galCalendar depending on the length of February

If(
Mod(Value(selectedYear),4 )=0 && Mod(Value(selectedYear),100)<>0 || Mod(Value(selectedYear),400)=0
,Set(totalDays, 366), Set(totalDays, 365)
);

//Use to populate calendar
ClearCollect(
YearDaysCollection,  ////galCalendar uses this
ForAll(
Filter(
Sequence(totalDays ),
DateValue( selectedYear & "-01-01") + Value -1 <= DateValue( selectedYear & "-12-31")

),
{
Date: DateValue( selectedYear & "-01-01") + Value - 1,
DayOfMonth: Text(DateValue( selectedYear & "-01-01") + Value - 1, "d"),
DayOfWeek: Text(DateValue( selectedYear & "-01-01") + Value - 1, "ddd"),
Month: Text(DateValue( selectedYear & "-01-01") + Value - 1,"mmm"),
MonthAsDigit: Month(DateValue( selectedYear & "-01-01") + Value - 1),
Index:Value

}
)
);

[Check number of schedules in Category 1,2,3.... for debugging]

[Rendering a bar for each schedule. Will 10 bars within a one-month period be enough when considering the characteristics of the real schedule of your company If you limit the period the screen displays to 1-1.5 months?]

"25" is width of galCalendar.Template.

[Set width]

[Set visible]

Assuming that Category-6 is newly added to SPO List, the galScheduleBar will display the new data without requiring further handling by you

I hope this will help!

😀😀😀

[johnjohn123]

@Kirkby this is definitely something i will try at my end thanks a lot.