Beautiful Design App

I think I’ve taken this about as far as I’m comfortable going. I may play with the events more and there is a small bug when flipping through months that I have to work out, but as far as the calendar layouts, I think I have it about as good as it’ll get. I’d rather wait for a Glide native version of a calendar. To be honest, the Month Layout tab required a lot more CSS manipulation and other various hacks to get it to look good. In the end, the top calendar is a calendar made with a card layout list that lets you tap on a day to see any events for that day. Days with events are marked with a dot (•). The current day is marked with brackets ([29]). I had to play with various widths, percentages, pixels just to get it to look good and scale across different screen sizes, but this also squeezed the cards really tight, so trying to add any settings to the card, other than the Title, really didn’t look good. When tapping on a date to look at the event cards for that day, somehow the CSS tricks really throw the regular event cards list for a loop and squeezes them temporarily, so all the tricks are causing issues elsewhere (I guess there’s a reason this stuff isn’t officially supported by Glide :wink: )

Below the first calendar is a second calendar that is build using dynamic DIV tags. Unfortunately, there is no way to click on a day and get some sort of action out of it, so it’s only just pretty to look at. The advantage though is that it’s way easier to manipulate and design to your liking. @Darren_Murphy, I think the original version we came up with is much better for your use case compared to the list version I created. With our version you can build the div tags however you want instead of trying to override div tags already created by glide.

@Uzo If you look at my copy, the main trick to get more tiles, or cards in my case, is to use the horizontal orientation. Then you set the number of items to view, to a large number to hide the ‘See All’ button. In the CSS, you need to then override the repeat attribute to a smaller number, which will be the number of items displayed width wise. It should auto wrap the rest of the cards so it will appear like a list with a vertical orientation. Again, you may have to play with other width and padding settings to get it to look right and scale correctly on multiple devices. It is not a simple solution where you plug in some CSS and it just works correctly the first time. It takes a lot of manipulation to get it to look right. To answer you question about making tiles seamless without gaps…yes, I think it’s possible but would take some playing around to get it right. I didn’t use images for anything, so I have no idea how much work it would be. For these reasons, I don’t think I’ll add any of the CSS for the calendar into your app. It’s just too volatile if you don’t know what you are doing with it. You’re welcome to add it yourself, but you’ll probably have weird results as I had set it up to be very specific to my calendar use case.

@Darren_Murphy I did manage to mess around with the CSS in my Swipe Layout tab to get the calendar a bit wider. The swipe layout squeeze everything, so my weekdays at the top of the calendar were wrapping as well. I had to put in some negative pixel positioning and a calc() formula in the CSS to add extra pixels plus 100% to get it to fit the full width of the swipe card. you could probably do the same to make the calendar a bit wider on a detail screen. Otherwise, you could always change your weekdays to single character S,M,T,W,T,F,S…but try the width settings to see if that helps you out.

9 Likes