Skip to main content
Solved

Interactive Calendar with *Prices*

Andrew20

Hello everyone!

I’ve been bashing my student head against this for few days now.

I am creating a prototype for a hotel booking system. I want to make the calendar which displays prices for each individual day, and once the user selects >2 days, it shows the total price for the stay.

I’ve googled and I cannot find any tutorial that involves prices. I couldn’t find any template either. I’ve posted on Reddit and was told Variables is the answer. I’ve done tutorials for Variables but I don’t quite understand how can I rig them up for that.

Here is a screen to illustrate my point: https://i.imgur.com/VvHV9tw.png. Please see the price in the bottom right corner which changes depending on which days I have selected.

Is this possible in Figma, or is this more of a coding aspect?

I would appreciate any help. I am about to give up on this feature and just write “€(sum of selected days) NEXT” on the CTA xD

Thank you.

Best answer by Nate_G

@Andrew20 This example gets you close to what you were looking for.

It uses variables and different interactions to add/subtract to the number of nights and total price when a date is clicked.

→ Get Example File
→ View Prototype

View original
This topic has been closed for comments

7 replies

Gayani_S
Figmate
  • Gayani_S
  • Community Support
  • 1968 replies
  • March 18, 2024

Hey @Andrew20, thank you for reaching out!

This is very interesting task. I am pretty sure this is possible with variables and conditionals. However, I am stuck on this. I’ve reached out internally to the teams ask asked them for help. I’ll give you an update once I’ve figured this out. Meanwhile, community members can jump in as well. Appreciate your patience!

Andrew20
  • Andrew20
  • Author
  • 3 replies
  • March 21, 2024

Thank you very much!

Gayani_S
Figmate
  • Gayani_S
  • Community Support
  • 1968 replies
  • March 21, 2024

Hey! So I’ve asked internally and I got the confirmation that this might be possible with variables and conditionals. However, I wasn’t able to find out how to create it.

Apologies, that I wasn’t able to provide a design solution, but I found these Youtube videos which might be helpful:

This is a video on how to create a calculator, I think this is very similar how it works with the prices.

Building a Real Calculator in Figma | Variables and Conditional prototyping|Building a Real Calculator in Figma | Variables and Conditional prototyping

I’ve also found a resizable calendar template with prices in the community: https://www.figma.com/community/file/1238686882894764424.

Again apologies I wasn’t able to help out with your initial question, so I hope community members can jump in and suggest some ideas.

Thank you,
Gayani

Nate_G
  • Nate_G
  • Power Member
  • 180 replies
  • Answer
  • March 21, 2024

@Andrew20 This example gets you close to what you were looking for.

It uses variables and different interactions to add/subtract to the number of nights and total price when a date is clicked.

→ Get Example File
→ View Prototype

1 Attachments
Nate G
Gayani_S
1 person likes this
  • Gayani_S
    Gayani_S
Andrew20
  • Andrew20
  • Author
  • 3 replies
  • March 22, 2024

Both of those look like valuable source. Thank you very much for sharing those!

Gayani_S
1 person likes this
  • Gayani_S
    Gayani_S
Andrew20
  • Andrew20
  • Author
  • 3 replies
  • March 22, 2024

Amazing! Exactly what I needed 🙂 Thank you very much!

Nate_G
1 person likes this
  • Nate_G
    Nate_G
Gayani_S
Figmate
  • Gayani_S
  • Community Support
  • 1968 replies
  • March 22, 2024

How did I miss this file in the community, this is perfect! Thank you for sharing @Nate_G. I am going to take a look at it as well.

Nate_G
1 person likes this
  • Nate_G
    Nate_G
Terms & ConditionsCookie settings

Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings