Hey Glide Community.
I was hoping to construct a horizontal slider calendar (similar to the image below). Has anyone achieved something similar?
The idea is when a date is selected an inline list will display items with matching dates.
2 Likes
There are two parts to this:
- the first part is to get the functionality that you’re looking for. I think that would be fairly straight forward. You could use two inline lists in a horizontal tiles layout. That would give you the ability to slide each list, so then it would be just a matter of building out the filtering logic. Filtering the second list to get the correct number of days according to the selected month would be a little tricky, but possible with some date math. Other than that, not too difficult.
- the second part is styling the lists to look something like your example. I think it would be possible, but will require some pretty funky CSS tricks. Beyond me I’d say, so I don’t think I could help you with that. But there are others around that might be able to help.
For the first part, this is the general approach that I would probably use:
- Start by creating a single row helper table to drive your screen
– this table will need two user specific columns, one each to hold your month and day selections - create another two tables to hold your list of month names and days of the month, respectively
– these tables will be the source of your two inline lists
– each of these tables will need a Single Value->First->Whole Row column that takes the first row from your helper table. You’ll use these columns to update the user specific values as selections are made
– you’ll probably need some extra logic in each of these tables to deal with changing the style of the “currently selected item” in each list
– and you’d also need to build logic to deal with filtering the day of month list according to the selected month - from there, it’s just a matter of building the filtering logic. There are multiple ways this could be done:
– you could combine selected month and day into a template, create a similar template in your data table, and create a multiple relation between the two templates
– or you could use single value columns in your data table to fetch each of the selected month and day of month, and then use one or more if-then-else columns to create a boolean filter
– there are other approaches, but the above are probably the most common, and either is okay. It often comes down to personal preference.
That covers the bulk of what you’d need to do. There are probably edge cases that would need extra logic that I haven’t covered, but you’d discover those as you started building it out and testing/experimenting with it.
oh, one thing I should add. Your example doesn’t have a Year selector. How would you propose to deal with that? Or is it to be assumed that year is irrelevant?
2 Likes
Would the user specific value you are referring to be a “set column value”?
Yes.
The action on each Inline List would be a Set Column Values via the below: