Weekly calendar view

[Mihaly_Toth]

@Markus_R Hopefully I got your need right. Find below a screenvideo of the functioning solution and also a bunch of screenshots to help you get going. I am sure, that this solution still could be further improved and optimized, but as a start it can help. (oh, yeah, just ignore the other pages in the preview app, this is my tester app…)

As for the layout:
Container > Row > 1 Cell > Text, Text.

This 1 Cell is repeated with a page variable in my case named “weekdays”:

The variable “today” is there to be able to set different “reset points” but for this example it is just equal to NOW().

In order to populate the weekdays part on page mounted event we have the following logic:

The set vairable of weekdays part is the following:

Yes-yes, I manually added the weekday names and the index of theirs according to the FORMAT_DATETIME_LOCAL(date, “E”) formula.
The “day_date” property is created with the following formula:

ADD_DURATION(pageVars.today, (1-NUMBER(FORMAT_DATETIME_LOCAL(pageVars.today, "E"))), "days")

Where the number before the “-” sign is adjusted for each day. Just add 1 at each day… So Sunday should be 7-NUMBER…

Now at the bottom of the screen we have the previous week and the next week buttons and also the reset button. Logic for the “previous week” is a “component tap” > “set page variable”:

The mapping helps to keep the change simple. The “day_date” formula is the following:

SUBTRACT_DURATION(source.item.day_date, 1, "weeks") 

The “next week” button is the same, just change “SUBTRACT” to “ADD”

Finally the reset button. I just copy + pasted the logic flows after the “page mounted” event that have already been described above.

[Markus_R]

Thanks for your help @Mihaly_Toth! I got it working with a date picker too.

Now it’s matter of conditionally highlighting and showing:

1. Current date
2. Selected date
3. Calendar dot - if there are calendar events in the range of selected date
4. List calendar events in the range of selected date

[Markus_R]

@Mihaly_Toth It does make sense to add day_date_start and day_date_end fields too so that it is easier to do filtering etc…

day_date_start would be 0 hours, 0 minutes, 0 seconds, 0 milliseconds
day_date_end would be 23 hours, 59 minutes, 59 seconds, 999 milliseconds

but I couldn’t combine it to your formula:

[Mihaly_Toth]

I would suggest placing the “Set Datetime Component” part of your formula instead of the first appearance of the appvars.calselectedday and not to use “&&” operation.
Something like that:

ADD_DURATION(SET_DATETIME_COMPONENT(SET_DATETIME_COMPONENT(....)), 1-NUMBER(FORMAT_DATETIME_LOCAL(appVars.calSelectedDay, "E"), "weeks")

Sorry for not complete and correct formula, typing from phone. I’ll try to write it better later.

[Markus_R]

Got it working! Also added some IF conditions to show different colors on selected and current day.
Red dot doesn’t indicate that there is data yet. Next I need to integrate this with a Firestore… Should be easier when there are day_date_start & day_date_end binding available.

[Markus_R]

Now I have some have Firebase data available and I try to indicate with a red dot if there are any records on that day. @Mevi are there any recommendations how this should be done from the performance perspective?

Formula might not look like this but this is how I highlighted current and selected days.

[Mevi]

Ah sheesh I see my answer in the other thread has become not relevant

Well at least you can shorten the formula to just be IF(NOT(DATETIME_IS_SAME(…)), …) or IF(!DATETIME_IS_SAME(…), …).

I would recommend using SOME(). Try something like SOME(data.yourData, DATETIME_IS_SAME(repeated.current.day_date, item.date, "day"))?

[Markus_R]

Couldn’t really get it working like this…

I should probably get the fist item on the list if there are any or something like that. Also there is DATETIME_IS_BETWEEN(). I do have values for repeated day_date_start and day_date_end I could try to use.

Can’t wrap my head around this.

[Mihaly_Toth]

What are the errors that is shows? Also in this formula you only check the data from the data resource at index [0]. I guess you want to iterate through that, right? If yes, then this can also cause some problems.

Okay, rewind. I just looked up on the SOME() formula. It returns a boolean value, so “true” or “false”.
So if I get it right, you should have something like:

IF(SOME(data["Firebase - ClockCards1"][0].date, DATETIMEIS_SAME(repeated.current.day_date, item.date, "day")), "#FF6666", "rgba(0,0,0,0.0)")

Btw, is data[“Firebase - ClockCards1”][0].date is a list of items? I mean in Firebase is it an array?

[Markus_R]

Yeah if there is a lot of data it might be a problem but if data is limited to that week it might be ok. Iterating through all that data would be needed.

Firebase data is list of objects.

[Mihaly_Toth]

Ah, there was a typo in my formula above: DATETIMEIS_SAME → DATETIME_IS_SAME.
Also according to your firebase configuration it seems to be that as 1 data record is only 1 Date/time text.
So when you use data["Firebase - ClockCards1"][0].date that will not iterate through anything. It just checks that one single data record at the 0 index. So you need a list at the data["Firebase - ClockCards1"][0].date of the dates that are in the record collection of data["Firebase - ClockCards1"].

So there is another step that should be done before the abovementioned IF(SOME(...)) formula. That is to create a list of the dates from the record collection from Firebase. This needs another page variable or whatsoever, that is a “List of texts”, let’s call it recordsDateList. Assign its value with the following mapping:
MAP(data["Firebase - ClockCards1"], item.date)

I am not 100% sure about this formula, since I don’t know where it is located in your app’s logic. Please adjust accordingly.

So how it shall be set up:
Get record collection → set data variable → set page variable recordsDateList.
After this You can use the recordsDateList page variable in the SOME(…) formula:

IF(SOME(pageVars.recordsDateList, DATETIME_IS_SAME(repeated.current.day_date, item.date, "day")), "#FF6666", "rgba(0,0,0,0.0)")

Of course You should adjust it to Your variable names etc. But hope it helps.

[Markus_R]

I get what is happening here but I don’t know why it’s not showing correctly on 18th

[Mihaly_Toth]

First step is to maybe get rid of the warnings:
item.date → FORMAT_DATETIME_LOCAL(item.date)
I don’t really understand the other warning.

Now onto a question. With the formula you set an icon’s color. Where is that icon placed?
The thing is that I just noticed, that we use item.date in the DATETIME_IS_SAME() function. What date should that be?
I might have further ideas later, these came to mind as first thoughts…

[Mevi]

If item.date is a datetime, go and format your app variable recordsDateList so that the date field is of datetime type, not text type. That will fix that error.

I would recommend that instead of setting the color of the icon, you would set its visibility instead (under properties > advanced properties). In this case it’s a marginal difference, but it’s lighter on performance if you show and hide components instead of having them visible but just making them transparent. So put just the SOME(..., DATETIME_IS_SAME(...)) for visibility and set the icon to always be red and that will work.

Then the debugging. I would start with just setting the visibility to plain true and see that the icon appears under every date, and then start adding formulas, a piece at a time if possible.

[Bakary_Dembele]

Hey @Mihaly_Toth can you please tell me how you did the binding of the texts inside of the cell ? thank you

[Markus_R]

Finally got this working as expected!

SOME(appVars.recordsDateList, DATETIME_IS_SAME(item, repeated.current.day_date, "day"))

[Lucas_Bonsel]

Thanks to this thread I managed to add a calendar to my app. Still it was quite a puzzle. The little mark shows the selected date, the award when a user did a workout at that day. Hope there will be a default calendar component someday because it think that quite a lot of people are building this themselves.

[Markus_R]

It wasnt super easy and this was pretty much a first thing I wanted to do on this platform.

Not sure if 3rd party calendars will support custom icons and conditional formatting etc. For me it’s pretty important…

I have to say that I do want to swipe to the next week or day. Maybe we will continue this thread when swiping is available.

[mejoraminegocio]

@Mihaly_Toth Thanks for the guide! Im having truble finding Appgyver Date formats (“E”). Is there any documentation or some way for me to see the diferent formats available.

Thanks!!

[Mevi]

@mejoraminegocio Good point, we don’t have a link to what date formats are available anywhere The formats are Moment.js’ formats, see the list of available ones e.g. here