Calendar element: fetch events that exists in current view to optimize performance

Ask us anything How do I?
1

Hi there,

Is it possible to “paginate” or filter events fetched from Xano based on the start/end of the current view. For example: When I have a month view of April 2024 I only want to fetch events that have a start/end between the 1st and 30th of April. Or, when I have a week view from Monday 1st of april 2024 until Sunday 7th of april

We have a lot of events, that would not be efficient/performant to fetch as a whole.

I can trigger a workflow on view change but I have no usable data to work with, like current view or first / last date in view? Any thoughts?

image

2

You have firstCellDate and lastCellDate in your screenshot, its not enough ? (the template is empty but the real event should be filled)

1 Like
3

@Alexis Thanks. But how to get it filled? When I change the view, the workdlow is triggered but the event {} object stays empty.

What do you mean with: template is empty but real event should be filled?

According to vuecal docs the following is stated:

The emitted events ready & view-change return an object:
{
  view: [String],
  startDate: [Date], // View start - JS native Date object.
  endDate: [Date], // View end - JS native Date object.
  firstCellDate: [Date], // Month view only, in case cell is out of current month - JS native Date object.
  lastCellDate: [Date], // Month view only, in case cell is out of current month - JS native Date object.
  outOfScopeEvents: [Array], // Month view only, all the events that are out of the current month.
  events: [Array], // All the events in the current view.
  week: [Integer] // Week number. Only returned if view is 'week'.
}
Note that on a month view, the events from the out of scope days (cells before and after the current month) are also returned in the array.

I checked if startDate/endDate/firstCellDate/ have a value after view change, when I change view (month/week/day) or viewed month/week/day. But it stays null.

I would expect first/last celldate should be filled, to be used in a Xano events collection. So that in Xano I only fetch events with a start_fate >= firstCellDate or startDate and end_date <= lastCellDate/endDate.

From the variables section I only have:

image
image894×366 17.9 KB

Furthermore I noticed that onEventClick does something with the event {} object. Here you can see that now I do have a specific view:

image
image862×404 18 KB

On CellClick I get a value in the dateISO

image
image934×476 26.5 KB

But current view is empty

It looks like something is nog constent in the object returned on the different emitted events. Is this something you can fix in te calendar component, on short notice? Because currently the calendar component lacks some features we need.

4

@Alexis
I tested again, updating a variable CAL EVENT with the contents of the {} Event templates. The result is below:

image
image435×641 31.3 KB

startDate, endDate, firstCellDate and lastCellDate is empty. Do I something wrong?

5

Ho @Alexis,

I tried a bit more, and it seems to work now. When I just extract the key/values of my CAL EVENT I do get values :slight_smile:

image
image886×1126 87 KB

6

Hi, we are wrongly displaying date object as empty in the explorer, there is a date in every variable here (like you figured out by binding the variables), I will open a bug ticket so we can eliminate this issue!

Date objects are stringified automatically when used in formula like you did but not in the explorer. There are still date objects so you have access to a bunch of methods Date - JavaScript | MDN

1 Like