Mid-fidelity calendar prototype in Axure RP 10.

The Repeater Goes On

How to create monthly, weekly and daily calendars in Axure RP 10.

Civic Suds blends the local laundromat with the community center. It offers its customers vetted programming around literacy, financial inclusion and health all while they do their laundry. It has a 24/7 workspace with computer/internet access, plus conference rooms and classrooms.

As part of a two-week Agile sprint, I worked with two UX designers to design a mid-fidelity prototype in Axure based on the seven user stories we were given for Civic Suds. I designated the interaction lead for this sprint, and participated in all aspects of the research and design process.

The seven user stories we were provided in the Civic Suds brief.

After a week of user research, interviews, and competitive analysis we started a design studio to solve our users’ problems and test our hypothesis.

The hypothesis that we were designing for.

As part of our hypothesis, we knew that we had to include an interactive calendar in our mid-fidelity prototype that all three of our user types could utilize to accomplish their goals. We also decided to include a location page and a standard form that could be used across the site.

By this point we had one week left in our sprint, and to continue making progress I assigned us each a template to create in Axure RP 10.

I was responsible for building the template for the calendar feature. Now, Axure doesn’t have a pre-built calendar in its component library (yet) so I had to quickly figure out how to build a daily, weekly and monthly calendar in just a few hours.

I ventured out into the world of Google and YouTube to see if I could find a tutorial on how to build one from scratch. I stumbled upon a tutorial created by vaexperience, who explained how to use repeaters to create a calendar, and a whole lot more that was above mid-fidelity. I also discovered Axure Docs, which was a huge lifesaver.

I decided to start with the monthly calendar because I knew once that was done I could use that format to shape the other two calendars.

How to Create a Monthly Calendar

Screenshot of Axure detailing steps 1, 2 and 4.

Screenshot of Axure detailing step 5.

1. Add a repeater table to your page and delete all but one column.
2. Name the column date, and enter in 1–31 (or 30 depending on the month) down the column, one number per cell.
3. You can adjust the repeater size to be whatever you want and format the location of the date, font, size, weight, etc.
4. Update the layout of the repeater table, on the right side of the window, to be Horizontal, a Wrap (Grid) and 7 items per row.
5. Add a new repeater table with one column for the days of the week, and for this one you do not need to wrap the repeater table.
6. Create a dynamic panel around the entire calendar that you have created. You can check to make sure everything is included in the dynamic panel by reviewing the outline section. If items are missing, you can select them in the Outline and drag them to the dynamic panel.

Pro Tip: Label and annotate elements as you go. This will save you so much time in the long run, and you will be able to easily find items in the Outline section if needed.

Next up was the weekly calendar. I duplicated the monthly calendar I had just completed and started updating it to be weekly.

How to Create a Weekly Calendar

Screenshot of Axure depicting the Layout and Pagination in steps 2 and 3.

Screenshot of Axure depicting the Pagination in step 6.

1. Update the size of the repeater table box to now be a column.
2. In the layout section, remove the Wrap (Grid).
3. At the bottom in the Pagination section, select multiple pages and enter in 7 items per page, and starting with page 1.
4. Create a dynamic panel around the date repeater table. Double check it in Outline to make sure it is correct.
5. Label the first one, and then duplicate the dynamic panel.
6. Rename the second one and in the Pagination section, change the starting with page 2. You will continue to duplicate dynamic panels and update the starting page number until all of the weeks are accounted for.
7. After you have finished duplicating the dynamic panels, you can add the interaction for moving from week to week by setting the panel state. I used Click or Tap the Left/Right arrows to designate how to scroll to the Next or Previous week (aka State in Axure).

Screenshot of the interactions used to progress to the next week.

Pro Tip: Clearly label your dynamic panels so that you can easily differentiate them.

Feeling accomplished after I finished both the monthly and weekly calendars, I jumped into creating the daily calendar. I’m not going to lie, this one was tough. I duplicated the weekly calendar and started updating it for the daily version.

How to Create a Daily Calendar

Screenshot of Axure depicting the Pagination in step 2.

Screenshot of Axure depicting the Layout and Pagination in steps 4–6.

1. Update the size of the repeater table box to now be the entire section.
2. Rename and update the first dynamic panel and in the pagination section, select multiple pages and enter in 1 item per page, and starting with page 1.
3. Continue to update the previous dynamic panels and then duplicate them until you have a dynamic panel for all 31 days (or 30).
4. Next create a dynamic panel around the days of the week repeater table.
5. You’ll need to copy/paste the days of the week so that you have 31 to match the number of days.
6. Once you have 31 days of the week, you can start creating a dynamic panel for each of them similar to what was done for the days in steps 2 and 3.
7. Update the interaction for moving from day to day. When editing this interaction, you will need to set the panel state for both the day of the week and the date all under the same interaction; otherwise, they won’t scroll together.

Screenshot of Axure depicting the interaction of the Date and Days of the Week dynamic panels mentioned in step 7.

Here is a demo of the calendar that was included in our final mid-fidelity prototype at the conclusion of our two-week sprint.

Reflection: After building these calendars my eyes were tired, but I felt accomplished because I had created three versions of the interactive calendar within a few hours. As I continue to learn Axure, I plan to explore adding conditions to the calendar and incorporating pop-ups for certain elements that were mentioned during our usability tests. This was also the first team project for class, and it reinforced the importance of clear communication and well-defined expectations, both of which are key to a successful sprint. I welcome any feedback on my calendar prototype or if you have any Axure expertise you would like to share. Thank you for taking the time to read my post!