Show SharePoint list items inside a calender-like horizontal gallery

Steel Contributor

I have 3 SharePoint lists:-

 

1) Media. With those fields; ID + Title

2) Network. With those fields; ID + Title + MediumID

3) BookingCalendar. With those fields; ID + Title +  Brand + NetWorkID + StartDate + EndDate+ ColorCode

 

now I want to build screen as follow:-

 

image.png

 

So first i have a horizontal gallery to show the Media items on top, then under it i have a month and year to chose from, then i will show the list of Networks and their booking item based on the StartDate + EndDate + Color code (showing the Booking item Title+BrandName).

 

I did the following;-

 

1) I added a horizontal Gallery for the Media, as follow:-

 

image.png

 

2) then i added a vertical gallery showing the networks for the selected Media, as follow:-

 

image.png

 

3) and for the previous month arrow onselect property:-

/*changes month view to previous month*/
Set(_firstDayOfMonth, DateAdd(_firstDayOfMonth, -1, TimeUnit.Months));
Set(_firstDayInView, DateAdd(_firstDayOfMonth, -(Weekday(_firstDayOfMonth) - 2 + 1), TimeUnit.Days));
Set(_lastDayOfMonth, DateAdd(DateAdd(_firstDayOfMonth, 1, TimeUnit.Months), -1, TimeUnit.Days));

4) for the next month arrow onselect:-

/*changes month view to next month*/
Set(_firstDayOfMonth, DateAdd(_firstDayOfMonth, 1, TimeUnit.Months));
Set(_firstDayInView, DateAdd(_firstDayOfMonth, -(Weekday(_firstDayOfMonth) - 2 + 1), TimeUnit.Days));
/*collects calendar events for all days in current month view. Updates _maxDate to prevent duplicate data collection if user returns to this month view*/
Set(_lastDayOfMonth, DateAdd(DateAdd(_firstDayOfMonth, 1, TimeUnit.Months), -1, TimeUnit.Days));

5) for the month, year label Text property:-

Text(_firstDayOfMonth, "mmmm yyyy")

but not sure how i can show the following:-

1) center the calendar for each month on today date and show 3 weeks before and 3 weeks after? so each network calendar should show total of six weeks? then to show the related booking items inside the related Days? as shown in the above picture?

 

Thanks

0 Replies