Show a dot under the day in calendar if there is a meeting

As you can see in the Picture there are always dots under the dates in the calendar.
I want that these are only shown if at this date there is a meeting. So you can see if there is a meeting at this date or not without selecting it. (The dot as indicator)
(I already got it working to only show meetings if the right date is selected in calendar.)

I hope you understand what i mean.

Hi!

How’s the data structure like, do you have a data resource of meetings and the meetings have a property of date and time?

If that’s the case, something like IS_IN_ARRAY_BY_KEY(data.Meetings, “dateOfMeeting”, date) should help in determining if a meeting is scheduled on a specific date and the date should therefore have a dot under it.

If the data structure is something else, please let me know about the details. Also, how were you able to show meetings if the right date is selected? Perhaps something similar could be used for the monthly view.

I don’t know what my data structure is like. I have some input fields and the input is stored to the appgyver hobby database.


Mostly Everything of the Calendar is same as in the video of Mevi. Maybe you know. (It’s to much to write all down.)

I got my Meetings to be shown at the selected date by setting the visibility of the repeated meeting list item to this formula: IF(DATETIME_IS_SAME(pageVars.selected_date, current.datum, "year"), IF(DATETIME_IS_SAME(pageVars.selected_date, current.datum, "month"), IF(DATETIME_IS_SAME(pageVars.selected_date, current.datum, "day"), true, false), false), false)
So it checks each point of the date in selected_date variable if it is the same date. And if it is, it is shown. And it worked :grinning:

If i want to create a meeting in my app/website i have to choose a date in calendar and then fill in my information and click on save. Then it will upload my data from the input fields and for the “datum” to record it chooses the selected date.
Opera Momentaufnahme_2020-11-24_160140_platform.appgyver.com

With this formula the date in calender is shown. (In calender it’s only a repeating with current.id of the calendar_days variable.
MAP(GENERATE_RANGE(1, DATETIME_DIFFERENCE(ADD_DURATION(pageVars.current_date, 1, "months"), pageVars.current_date, "days")),{id: item})




Maybe this helps to understand my structure

Alright, thanks for the details!

I think you should be able to use the same kind of formula as you do in the selected date check:

IF(DATETIME_IS_SAME(pageVars.selected_date, current.datum, "year"), IF(DATETIME_IS_SAME(pageVars.selected_date, current.datum, "month"), IF(DATETIME_IS_SAME(pageVars.selected_date, current.datum, "day"), true, false), false), false)

if you replace the pageVars.selected_date with the current.id datetime in the repeating calendar and add a dot according to that. Just convert the current.id to a datetime type similar to how Mevi does it in the video:

DATETIME(SET_DATETIME_COMPONENT(pageVars.current_date, current.id, "date")

Also, you might be able to make that formula a bit simpler with the DATETIME_DIFFERENCE() formula function, if you check that the day difference between the two dates is 0.

Let me know how this works out!

I think the problem is to use current.datum there. I can replace pageVars.selected_date with current.id of the pageVars calendar_days, but it says that number is not assignable to true/false. The next problem is that the calendar container is repeated by the pageVariable calendar_days and the meeting and it’s date is stored in data Variable. How can i get the right data from different resources?

So the formula could be like this?
IF(DATETIME_IS_SAME(current.id, current.datum, "year"), IF(DATETIME_IS_SAME(current.id, current.datum, "month"), IF(DATETIME_IS_SAME(current.id, current.datum, "day"), true, false), false), false)
But i don’t know where / how to use the last given formula.
DATETIME(SET_DATETIME_COMPONENT(pageVars.current_date, current.id, "date")

Ah yes, the current.datum is a bit tricky. Let’s try again, I have a lot longer solution in mind too :grin:

Use this solution in the repeating component, in Mevi’s video the “Current Month Days” component. This way we’ll go through each date and check if it should have a dot under it. The result will be just one formula to add, but I’ll go through it step by step.

In Mevi’s example, all the dates are displayed as calendar.id. As it is just a number 1-31, it is not that straightforward to turn each date into a datetime type that we can compare to the meetings’ datetimes. However, Mevi uses this formula (at around 8:44 in the video) to get the datetime of each current.id:

SET_DATETIME_COMPONENT(pageVars.current_date, current.id, "date")

Now this returns a string, so wrap it in DATETIME() to get datetime type:

DATETIME(SET_DATETIME_COMPONENT(pageVars.current_date, current.id, "date")

Now we have the datetime of each date in the repeating calendar. Next, we should check if this datetime is set as the date for any meeting in your meetings database. This is a bit tricky, since the datetimes won’t match completely because of the differing times, so we can’t directly use IS_IN_ARRAY_BY_KEY() or something similar.

SELECT(data.meetings, DATETIME_DIFFERENCE(item.datum, DATETIME(SET_DATETIME_COMPONENT(pageVars.current_date, current.id, "date"), "days") == 0)

Here we select the meetings that are on the same day as the current.id date, i.e. the day difference between the two datetimes is 0. Now we have a list of meetings set on the current.id day. If the list length is 0, then no meetings are scheduled on that day and there should be no dot, in other cases there should be a dot. So the final formula to add would be something like this:

IF(COUNT(SELECT(data.meetings, DATETIME_DIFFERENCE(item.datum, DATETIME(SET_DATETIME_COMPONENT(pageVars.current_date, current.id, "date")), "days") == 0)) > 0, add_dot, dont_add_dot)

Let me know if my explanation was unclear at any point!

A big thank’s for that answer. The most things are clear to me.
The only thing i don’t understand is where to set the last two formulas.
Could you please explain this? You only explained what they are doing.
Do i have to create two page variables? (add_dot and dont_add_dot)
I don’t know e.g. where i have to use the last formula, but isn’t it possible to add one to toggle the visibility of the dot paragraph?

There is only one formula to add to your solution, and that is the last one:

IF(COUNT(SELECT(data.meetings, DATETIME_DIFFERENCE(item.datum, DATETIME(SET_DATETIME_COMPONENT(pageVars.current_date, current.id, "date")), "days") == 0)) > 0, add_dot, dont_add_dot)

It’s just quite a long and complicated one so I explained it bit by bit, sorry for the confusion!

As for the add_dot and dont_add_dot those are not new variables, those should be replaced with the way you add the dot. If you add that big formula to the repeating calendar component (in Mevi’s example “Current Month Days”) then you can add the dot to each individual day, if they have a meeting scheduled.

I now used the formula at the visibility of the dot paragraph component in the repeated container. So at the dates with meetings now a dot under it is shown.
The problem is, that there are also dots under a few other dates, also if there is no meeting.
And for now it takes about 10-15 seconds to go through the next month, with the buttons at top.


As you can see there are 3 dots at the picture. (At mobile the 29th also has a dot)
But only the 27th and the 30th have a meeting. So there is one dot at dekstop and 2 at mobile to much.
Any ideas how to fix?
Edit: aufter reloading page, also at the desktop the 29th has a dot)

Hmm :thinking: We’ll need to troubleshoot if there’s something wrong with the whole formula or in the DATETIME_DIFFERENCE() calculation. So let me clarify: the dots now appear on every day from this day forward, or just on some random dates where they shouldn’t? What does the next month look like, do all dates have dots?

No, they are mostly random I think. The two dots that are to much, are between the two dates I created a meeting.
So at 27th and 30th is a meeting, but the 28th and 29th also has a dot.
I don’t tried at next month with two meetings yet. So there is not a dot under each date.

I tried with some more test meetings. And it randomly adds a dot the day before or after that meeting.

I think I know the issue! I did not think of this beforehand, my mistake.

DATETIME_DIFFERENCE measured in "days" checks if the two dates are within 24 hours of each other. So in case you have a meeting on a Monday at 3pm, and on Tuesday at 9am, those will be within 24 hours of each other and will be measured as the difference in 0 days. Do you think this is the case with your random dots?

If that’s the case, it would be better to change the formula from:

COUNT(SELECT(data.meetings, DATETIME_DIFFERENCE(item.datum, DATETIME(SET_DATETIME_COMPONENT(pageVars.current_date, current.id, "date")), "days") == 0)) > 0

to:

COUNT(SELECT(data.meetings, DATETIME_IS_SAME(item.datum, DATETIME(SET_DATETIME_COMPONENT(pageVars.current_date, current.id, "date")), "day"))) > 0

So instead of checking if the datetime difference in days is 0, we’ll just use DATETIME_IS_SAME to check if the dates match. This should solve the within 24 hours problem.

Let’s hope this works! :grin:

YES! This solved that. Now only one dot at the right date is shown. Big thanks.

Now i have one last question to this theme. :see_no_evil:
If i click on the arrow at the top to go a month forward or backward, it takes about 10-20 seconds to load. Any ideas on getting it a bit faster? It’s not that big problem, but it’s a bit annoying…
It takes so long since i use the dot and it’s formulas.

Great! Datetimes can be a hassle to work with :sweat_smile:

I think what’s slowing it down is that this formula goes through every meeting in your meeting database, especially if you have loads of meetings saved. And that’s repeated like 28-31 times, so it might take a while. But I think it’s the only way to do this, because at each date we have to check if any of the database meetings are scheduled on that date :confused:

Are you using a data variable for your meetings? Something similar to data.meetings I have been using in my examples. Perhaps one way to fasten it would be to only load the meetings of the current month to the data variable data.meetings, and when you change month you’d load a new set of meetings into the data variable. This can be done in the logic canvas for the meetings data variable, if you’re interested in trying that.

Yes, i’m using data variable.
That sounds interesting. How can i do this?

In the variables tab if you click on your meetings data variable and open the logic canvas, you should see this:

this fetches all your meetings and sets them into the data variable. By default all data is fetched when the app is opened, but we’ll need to change it so it gets fetched after the current_date had been defined, so we’ll know what month’s meetings to fetch.

So you’ll need to:

  1. Remove the record collection from the data variable logic canvas (all of those blue nodes in my picture above)
  2. Add the Get record collection and Set data variable logic nodes after the definition of the current_date and also after the event current_date changed (in the picture below) so that each time you change month the meetings for that month are fetched.

  1. In the set data variable node you’ll need to add the filtering to get only one months meetings. You can change its Record Collection property to this formula:

SELECT(outputs["Get record collection"].records, DATETIME_IS_SAME(item.date, pageVars.current_date, "month"))

After this the data variable should only include the displayed months meetings, hopefully this speeds up the dot process!

Thank’s for trying it. But it didn’t changed the speed. Only the web version it’s been a few faster…
i think my users have to live with that… They do not have to often change the month. :joy:

Oh man, maybe then the datetime calculations are making it slow instead :confused: but that’s a good point, users might not scroll that much between months :grin:

1 Like