Calendar select items

Wappler General How To
#1

Hi, I have an upcoming project and one of the requirements is to show items on a calendar and allow the user to select them which will create a meal plan.

So in the below, you will see it’s planned to list available items on a calendar.

image
image1995×1181 475 KB

When the user clicks on an item we need to highlight that the item has been selected.
image

We then add the item to the transaction basket total.
image

Ideally, the user could then click on a review button which shows the calendar again with just the items they selected, removing the unselected items.

So I guess I have a few questions.

  1. Would it be possible to do the above with App-Connect Calendar that has been added to Wappler?

  2. Is there someone who could help guide me through this?

  3. I am willing to pay for some help on this.

In order for me to complete this project, I really need this and without the project is dead for me, so any help free or paid for would be helpful.

Thanks,
Ray.

#2

Yes, it can be done. We’d be happy to help. Have sent you a PM about it.

1 Like
#3

on looking at it again, it would be difficult to achieve this with the AC calendar.

but there is another Wappler native way to achieve this:

  1. create a custom calendar system using repeat. i see we have to show 5 weekdays only - so this would be rather simple.
  2. inside of the repeat date div, we have a nested repeat to bring the food items dynamically from DB.
  3. this nested repeat will have dynamic classes to handle selected/unselected items - and other params if required.
  4. click event of nested repeat will save data in an array or Data Store - which can be used for subsequent cart step and also managing conditional classes.

in our understanding, this way you can have control over click events and the UI structure - which seems more important from the screenshots at least!