Dynamic Data appearing on Calendar View

Trying to build an app where users can schedule things on a Calendar view. I know there is no component for this - wondering how I would build a work around?

1 Like

What sort of a calendar do you mean? Like a monthly calendar or a weekly calendar?

In either case, it’ll be fiddling with a lot of nested containers. If you give me a screenshot of something like what you would want, I can give you some direction?

I would be interested in this too… basically to be able to reproduce something like Google Cal. The best example I can think of would be to be able to have something like FullCalendar in AppGyver…

Day, week, month, resources view etc

https://fullcalendar.io

Any of the drag kind of features like in Google Calendar would not work until we have third party plugin support and you find a plugin that would do that for you (or make one yourself!)… But if you want to display a simple calendar, that is possible to implement. I’ll see if I have the chance to do a tutorial on something like that, but I’d need to figure out how exactly this would be good to do first :thinking:

The simplest structure I assume would be to have a page variable Array of Objects with all the dates you want to display and whatever data you want to have in them, and repeat that on the page in a grid (containers that take 1/7th of width and wrap onto rows). Then perhaps another repeat that fills in blanks so that the first item in the Array starts on the correct “spot” for the weekday.

1 Like

I am really curious if you will do a tutorial, either video or docu.
Thanks

I’ll look into making a video tutorial about this :slight_smile: It’ll take some experimenting first as I haven’t done this type of component before, but I’ll let you know how it goes!

2 Likes

Just to let you know, I filmed and edited a video of a simple calendar component tutorial and it will be published soon, hopefully this week already :slight_smile:

1 Like

Here we go!

I also had a stab at displaying data on the calendar, but it is very performance heavy to search a whole data set for dates that match…… I would recommend having a filter in your data where you could get only data records between certain dates. But I’ll poke around this a little to see what sort of a performance I could get without that and will post another tutorial once I get forward with that!

2 Likes

Great! Let me know when it is out. Thanks for your support

1 Like

@Mevi

Do you have anything that works for this right now? Even if it’s slow.

Right now I have the calendar you built. The Upcoming list is just a list of events sorted by date.

Then when you click a day that has an event a new list appears with the events of the selected day.

The issue is the user does not know what day has an event just by looking at the calendar. Any tips on showing a small icon under the number of days with events?

I have been playing around with different formulas in the visible variable of the icon, but no success.

1 Like

Hi! I do have a solution that works but is slow when switching months/years. I do want to make a video about this as well, but I’m still waiting for the performance issues to be looked at and hopefully fixed on 2.X before that. In the meanwhile, I’ll post a short explanation with formulas below later today.

1 Like

Alright so here’s the basic set up.

Appointments are repeated from page variable current_appointments which has the schema of the data I wish to display on the calendar. I use an app variable called appointments for the source of the data.

The icon in each current month days has the following bound into its visible property:
!IS_EMPTY(SELECT(appVars.appointments, DATETIME_IS_SAME(item.date,SET_DATETIME_COMPONENT(pageVars.current_date, current.id, “date”),“day”)))

Other than that, I just have an event on the page where when the selected_date changes, I set the current_appointments based on the new selected date. You can also just add this set page variable to happen after the selected date is changed. The formula is the following:
SELECT(appVars.appointments, DATETIME_IS_SAME(pageVars.selected_date, item.date,“day”))

2 Likes

Continuing the discussion from Dynamic Data appearing on Calendar View:

Hi Mevi. You are doing a fantastic job. thank you. However, I am new to app building, so I could not catch most of the things on your Youtube video. can the steps be described in more detail? especially, the set up - how did you get those Lines with month, date, name of task/appointment/etc. I want to construct a calendar of deadlines of statutory reports in Azerbaijan, where a user by ticking on a specific date will be able to see names of reports that are due to be filed

Hi! The data I used in the youtube video was just something I generated randomly to suit the purpose of the tutorial. What you’ll need is a data source. You can find more documentation on the topic here.

Hi, Mevi! Great job! I followed through both the “simple calendar” tutorial and everything in this discussion. I got most things work luckily.
Only problem I have right now is it shows 31 days every month in my app. Did I miss something along the way? What did I miss? Looking forward to your response.
best regards,
Jay

Hi! There’s a calendar component coming up soon that will be using this logic but this is covered here, the relevant formula is MAP(GENERATE_RANGE(1, DATETIME_DIFFERENCE(ADD_DURATION(pageVars.current_date, 1, "months"), pageVars.current_date, "days")),{id: item})

Wow! Looking forward for that component. I’ll try this formula right away. Pleasure to hear from you Mevi:)
Jay

1 Like

Hi Mevi! I just watched your youtube video and I am a bit confused on some of the details. Do you think you could create a video that goes a little bit more in detail about the process?

How did you create this, where when you click on a date a list pops up. I am new to appgyver so any help would be greatly appreciated!