To achieve the multiple states in that AirBnB example, you’ll need more than just a hover and selected state because any date cell can have (at least) 6 states. You can do it in Axure, and there are (probably more than) a few ways to solve this. Yes, using a repeater will help with this, but it will be a bit of work to get it done.
Before we get into the repeater stuff, let’s address the multiple states that a date can have and how to handle displaying those. Here are the states I see in your linked example:
- Normal
- Disabled (prior to current date)
- Hovered (but not selected or “between”)
- Selected (start or end date after clicked)
- “Between” (after the start date and between the currently hovered date or end date)
- Hovered-Between (when end date selected and a “between” date is hovered)
The most common way to handle more than normal/hover/selected/disabled states is with a dynamic panel (dp): create duplicate states in your dp for each special widget state. In your case, you could have six dp states, each with a copy of a “date” rectangle widget, styled as needed. Or, you could have one rectangle widget with a transparent fill and a number (for the date), and a dynamic panel with a colored rectangle (but no number-text) for each of the states. This would reduce the need to assign each date-number 6 times. This will likely be important when you set up your repeater. The basic approach then, would be to have your date-number widget have a normal state with black text, disabled state with gray text, and selected state with white text. Its OnMouseOver code would need to control the state of your underlying dp, to set it to a “normal/disabled” or “normal hover” or “after-start/between” or “between-hover” state as appropriate.
If I get some time in the next day or so I could try to work up an example .rp if that would help.
Here are few threads from the forums that might help in the meantime: