Flexible Calendar Matrix Widget

repeater-widget

#1

Hi all,

I’m having trouble trying to figure out how to possibly use a repeater for a flexible calendar matrix like Google Flights uses for their flex calendar option.

I have attached a screenshot, but here is a link to a flight search: https://www.google.com/flights/?gl=us#search;f=DFW,DAL;t=LAX;d=2017-02-08;r=2017-02-12

Any idea how I could possibly show this in a mockup? Is there a widget out there for Axure that I can use? My main concern is hover effects.

Thank you!


#2

Hi katmobrien,

Welcome to the forum. :slight_smile:

Generally speaking, the way to create a highlighted row (or highlighted column) effect would be to use Interaction Styles or even to use a separate widget that moves and hovers over the content where it underlies the cursor directly.

For the most part, many of the examples posted on the forum show ways to highlight rows but not columns, which is probably influenced by the fact that rows, specifically, can be manipulated through Actions (e.g. Update Row, Add Row, Mark Rows). However, here was an idea for a way to simulate column highlighting:

https://www.axure.com/c/forum/repeater-widget/8173-referring-whole-column-repeater.html#post25600

And I’ve attached an example that takes the same column highlight strategy and combined it with the usual row highlight approach, via the Selected Style. The second page of the attached RP includes the same widgets, but the widgets inside the repeater item are wrapped in a DP. The DP has the setting “Trigger Interaction Styles” checked (https://www.screencast.com/t/EujJeTWYhly).

That being said, aside from creating highlighted interactions, creating a fully fleshed out dynamic calendar using the repeater can be a large task to begin with. And so using other shape widgets with stand-in shapes to simulate highlighting, in lieu of IX styles and repeaters, may also be a reasonable alternative as well–a prototype that demonstrates the general concept as opposed to something at 100% fidelity. Here’s an older post showing how you can overlay other shapes over the content you choose to create:

https://www.axure.com/c/forum/repeater-widget/9662-highlighting-selected-row-repeater-solution.html#post29610

Or setting different states (this example uses a Table widget):

https://www.axure.com/c/forum/6-x-archived-examples/7253-example-table-row-hover-select-effect.html

Hopefully that helps with some ideas!
HighlightColumnAndRow.rp (98.6 KB)


Hover state remain after "unhover"
closed #3

unlisted #4