Hi all,
I'm trying to create calendar like grid dynamically according to number of days in a month. The grids will be color coded based on types of shifts (morning/afternoon/evening and leaves).
The design will be something like below:The number of columns will increase/decrease according to months (eg. 30 or 31 days. and 28/29 for feb). The data will be stored in entity with attributes as dateRange and Shift.
My plan is to get start and end date from the date range selected, then check the shift entered and then change background color for the date range. Similarly same will be done for leaves as well. This will be applied for all for the team members and then I'll show a count for each shift and leaves for that month.
I couldn't get all the dates between selected range and assign color as per Shift. Is it possible in OutSystems?
Any suggestions or a start would be really helpful.
Thanks
Aman Devrath
Personally, taking a closer look at the design, it feels like a list of lists: a list of people nesting a list of days. The list of people could translate into an OutSystems list (having flex column) and the list of days I would go for a CSS grid (configurations tbd).
Then I'd probably use a SQL query to break down the date ranges into individual days according to the current month. At the end the output would be something like this:
This could solve (well.. theoretically) the HTML part. Then by knowing the relationship between day-shift you could come up with a CSS class/selector to style each grid child accordingly.
This could be a starting point - not an absolute solution. Fun challenge though.