Axure Tutorial: Making Mobile Calendar with Repeater
Introduction
Today, I'd like to share with you how to make a mobile calendar with repeater. The prototype is easy to use, can be used directly, and the interaction is complete and perfect, so it is recommended for everyone to use. There are a lot of functions in this tutorial. Some friends may not understand it. Those who like high-fidelity interactive prototypes or have questions can leave me a message in the comments below.
Features to be Realized
1. In the Select Month / Select Date interface, when sliding left and right, switch the year / month calendar.
2. In the Select Month interface, click the month to enter the Select Date interface of the corresponding month.
3. In the select date interface, select the current date by default. When you click the date, select the date.
4. In the Select Date interface, click Today to switch to the current date interface and select today.
5. In the Select Date interface, click Cancel button to return to the Select Month calendar interface.
How to Realize These Features
1. Make the calendar through the repeater. When sliding left and right, reduce or increase the added year or month.
2. In the select month interface, when you click the month, the Select Date interface will be shown, and the month will be set as the clicked month. set the added month and year.
3. Set the selection group to all dates widgets. When clicked, select the clicked widget. The current date is selected by default.
4. When you click the Today button, set the added month and year to 0, and select the current date.
5. In the select date interface. Based on the month and year before entry, Click Cancel button to subtract the added year and month of response.
Preview the completed prototype for this tutorial
1. Create the select date interface
First, we need to make this part of the page. Make it with a repeater. Only one column of Date is required in the repeater.
Adds 42 rows to repeater: 6 * 7 days = 42. This is because you want to accommodate all the dates of all situations in all months.
The repeater adopts grid distribution, and the number of items in each row is 7. The small rectangle in each row does not need text to be filled in, but is only used for logical processing.
Let's briefly talk about the logic. We need to find the day of the week on the first day of a certain month in a certain year, and then set the repeater to show 1, followed by 2, 3, 4... Here is a point to note. We should remember that there are 31 days in January, March, May, July, August, October and December, 30 days in April, June, September and November, and 28 or 29 days in February.
We drag in two tags, named Month and Year respectively, representing the added month and year compared with today.
Use the Now function to get the current date, and then use getDate function to get today's date, and then calculates the number of days between today and first day. For example, today is Feb 8, 2022, so it is - 7 days from Feb 1, 2022. Then use the Add function, [[now. addDays (days)]], (days) is the number of days between. The above case is - 7, and then use getDay function, you can get the day of the week. In the case, get The value of day is 6.
We set the event when the cell is loaded.
The whole formula is
[[Item.index-Now.addDays(1-Now.getDate()).addMonths(LVAR1).addYears(LVAR2).getDay()]]
Among them, LVAR1 represents the text of month and LVAR2 represents the text of year. 1-Now.getDate stands for the number of days between today and the 1st day of the month.
If the index of the repeater minus the value of getDay is less than 1, set the text to empty (that is, the first 6 row of the repeater are null); If the number is greater than 31, also sets the text to be empty. It needs to be divided here. If it is January, March, May, July, August, October and December, it is 31, which means it is the date of the next month. If April, June, September and November should be 30 days, and February should be 28 or 29 days, how to judge whether it is 28 or 29. Use the year / 4. If the result contains a decimal point, it is 28 days, and what is not included is 29 days. The formula is [[Now.addYears(LVAR1).getFullYear()/4-(Now.addYears(LVAR1).getFullYear()/4).toFixed(0)]].
In other cases, the text in the rectangle of repeater = Index - getDay.
The above is to calculate the of the current month. How to calculate the of other months? Use addMonth for the month. use addYear for the year.
We save its value to the Month and Year labels. When sliding left, the value of the label text + 1, and when sliding right, the value of the label text - 1.
Selected date
Set the text of Month and Year to 0 when you click the Today button. And trigger the loaded event of Cell, Month, Year label.
Default Selected Date
When the cell is loaded, when the text of Month and Year is 0 and the current text is equal to the current date, it is set to selected. Otherwise, set to unselected.
2. Create the select month interface
Next, we make the interface of Select Month. The basic principles are similar.
First, make the label of the month. The text is based on the current month of the current year, adding and reducing the response months. If it is February, January needs - 1, February remains unchanged, March + 1, and so on
The cell text is similar to the cell text setting in the Select Date selector, except that addMonth is different in different months. And the number of dates varies from month to month. Pay attention to these.
Make the calendar into a dynamic panel. When sliding left, Year + 1; when sliding right, Year-1 And trigger the loaded of all cells.
When the month of calendar is clicked, the Select Date panel is shown, and the text of month is changed to the month of the calendar when the month is clicked. Here we need to save the year when we click (Ori year). It has been used to calculate the year that needs to be changed in response to this number when the panel is hidden. This allows you to go back to the year when it was opened.
Return to the Select Date interface. Set the text of Month based on the month on the interface when you click Cancel. At the same time, change the text of year. Here, you need to use the text saved by the Ori Year label to calculate the year back to the original opening.
So that's the end of our sharing. If you have any questions, you can leave me a message.
If you like the article, please share it with others with page link, thanks for your supporting! ❤
Well Joe @AxureBoutique, a technical writer and teacher, focuses on Axure prototype design and product design.
Leave a comment