Weekly Calendar To Display Classes Based On Date

Hi, does anyone knows how to create a horizontal week-to-week calendar, where users can select the day and the classes on that day will be displayed?

Sample of what we’re trying to achieve…

Video demonstration: https://drive.google.com/file/d/10uY7LdFyLQF_Z8wxZARNFrOs59jPmc8B/view?usp=sharing

What I’ve tried so far is create a horizontal container with 7 cells, each 14% width. Kinda similar to Mevi’s calendar component tutorial: https://www.youtube.com/watch?v=hAXHt8MuK4I

First cell retrieves the date now and displays the day, second cell retrieves the date tomorrow and displays the day, and so on.

When the user taps on any day, it’d set the page variable to that specific day. The page has a list below, repeated with the schedule database, which contains classes tied to dates. There’s a filter in the REST API call bound to the page variable, so tapping on the day will change the filter accordingly, and call the relevant classes based on what the user tapped on.

This is as far as I got: https://drive.google.com/file/d/1PnnhNuwxR07RFP_IZprMTCQ7LGpCthKe/view?usp=sharing

It works fine, but there’s a long latency to the loading time of the list, even if it’s just one single class. I’m not sure if it’s because I’d need to update my Backendless plan (using Backendless as the database currently) or it’s something configurable from within Appgyver to reduce the delay.

Thank you for any help :slight_smile:

1 Like

Hmm, I didn’t run into performance issues for showing data on a certain date, my performance issues were related to showing an indication in the calendar for whether or not that day had any data, so this can probably be fixed :thinking:

In general to avoid backend performance issues, I recommend using an app variable to store the data from your backend. By this I mean that for example on your global canvas you would fetch the data from your backend (with whatever interval you like) and set it to an app variable with the same schema (you have to configure the schema by hand which is annoying but the performance is worth it).

Then you always have the data available from the app variable and don’t have to fetch from the backend.

In this case it would also work just to have a data variable where you fetch all the data. Then either from the app variable or data variable you’d select whatever data you want to display by setting it to a page variable with the same schema (again configuring schema again by hand ugh) or maybe just a data variable where you remove the fetch logic from and rename.

So what I do in my app is:

  1. fetch data from backend into app variable
  2. when page variable selected_date changes, change also the page variable current_appointments or whatever your data is called, and here do the filtering based on date
  3. always display current_appointments in the repeating list
1 Like

Hey @Mevi, thanks for the help.

To clarify, I’ll have to create an app variable that corresponds to the data variable that references that data collection. When the page is mounted, bind the app variable to the data variable, so it can be called any time without waiting for the data refresh (which is set to 5 seconds by default, apparently).

Sounds like the app variable option is better than the page variable option, especially if there are several pages that need to reference the same data collection.

And I guess it makes sense that we’d have to do the app/page variable instead of always depending on fetching the data from the backend - it’s just not efficient and quite resource intensive.

Not sure why I can’t seem to set data from my backend to the new app variable with the same schema (I did it by hand).

That said, is there any way to change the data refresh rate? I can’t seem to find any documentation or settings for the data refresh rate. As said, it’s set to 5 seconds currently by default

Hi! You can change how often the data is refreshed by modifying the data variable logic canvas, more specifically the amount of delay between fetchings. You can find this also in the docs.

I prefer to set the app variable on the global canvas. And the page variable or page variables are meant for the filtering specific to that page, and you will also need a page variable on top of the app variable at least until our 2.X client is out, as there is a problem with data bindings refreshing if you filter them with formulas directly in the repeat-binding. (Which is why I repeat directly the page variable and just set it from the change of date/whatever using the full collection from the app variable)

Hey Mevi, will set up the app variables and page variables accordingly. But I’m facing an issue of not being able to bind the data.

They keep saying it’s “incompatible”. What could be possible reasons?

Hi! The schema is probably not exactly the same. Check that the fields are correct type (text, number, datetime etc). I tend to circumvent this by binding via formula, as the formula only warns that the schemas don’t look the same, but allows doing it anyway.

Thanks @Mevi, made sure everything matches and it works. I’ll update here when I manage to get the whole thing to work as intended. Maybe it would help others trying to build something similar.

Thanks again :slight_smile:

1 Like