Page turning function added to Calendar

The calendar can only display the date of the current month, but in practical application, it may need to have a page turning effect to realize the free choice of date.

Set a template parameter and the corresponding date widget, change the control value through the hyperlink click event and query directly to realize the page turning effect.

1. Component installation

Click to download dark calendar component: 

Dark Calendar.b04ea70e-4847-4d79-bb36-f80e281abd1a.reu.zip

The style of calendar component is shown in the following figure:

2. Parameter pane design

Create a new dashboard, drag in a parameter pane, and add a query widget and a date widget. The widget name is modified to date, and the format is set to yyyy-mm. Check the return date, as shown in the figure below:

3. Calendar style design

Drag the downloaded calendar component into the dashboard.

The modification formula of cell B2 is $date, that of cell B3 is weekday (todate (date (year ($date), month ($date), 1)), and that of cell C3 is daysofmonth ($date).

Select all the dates in the main body of the calendar, right-click to add conditional formatting, select blue background, and add $$$= day(now()) and month (B2) == month (B1) to the formula, indicating that the background color changes to blue when the date of the current day is selected.

Write last year, last month, next month and next year in B15, C15, F15 and G15 cells respectively.

Select cell B15, right-click to select the hyperlink, and the JavaScript script dialog box will pop up. Add parameter a and change the value type of parameter to formula: format (yeardelta (B2, - 1), "yyyy-mm"), as shown in the following figure:

JS code is as follows:

_g().parameterEl.getWidgetByName("date").setValue(a); _g().parameterCommit();

The JS code in the other three cells is the same, and the setting of parameter a is as follows:

Last year: format (yeardelta (B2, - 1), "yyyy-mm")

Last month: format (monthdelta (B2, - 1), "yyyy-mm")

Next month: format (monthdelta (b2,1), "yyyy mm")

Next year: format (yeardelta (b2,1), "yyyy mm")

Note: the parameterEI method is not supported at the moment, so it is invalid at the mobile end.

IV. Effect preview

After saving, click preview, and the effect is as follows:

For completed template, please refer to %fr_ HOME%\webroot\WEB-INF\reportlets\doc-EN\Dashboard\calendar.frm

Click to download the template: calendar.frm