1. 概述
1.1 版本
| 報表伺服器版本 | APP版本 | HTML5 行動端展現插件版本 | 功能變動 |
|---|---|---|---|
| 11.0 | V11.0 | V11.0 | - |
| 11.0 | V11.0.891 | V11.0.891 | 簡約日曆 支援自訂「年、年月」格式的日期元件 |
1.2 應用場景
行動端透過日曆的方式篩選日期，之前只能透過報表塊、條件屬性、聯動等實現，範本製作程式非常麻煩，且樣式單一。
1.3 功能簡介
行動端可實現透過日曆的方式篩選日期，比如日報、行程等場景，易用性及體驗更強，能夠明顯看出日期所處月份，週號等。並支援為日期元件設定元件背景、邊框顏色、字元字體、圖示等。
2. 功能入口
1）點選下載範本：行程管理主頁-phone.frm，在 FineReport 設計器中開啟該範本。
2）選中右側屬性面板中的「組件設定>day」。
3）點選「行動端」，點選「樣式範本」旁的「...」按鈕，可以看到 樣式範本 有四種樣式：「預設」、「導航日曆」、「簡約日曆」、「簡約日期樣式」，如下圖所示：
3. 預設
3.1 設定
「預設」樣式範本只可設定「通用屬性」，詳情參見：預設樣式範本 。
3.2 範例
1）樣式範本選擇「預設」。
2）「通用屬性> 屬性設定」 選擇「自訂」。
3）配置具體設定項，點選「確定」，如下圖所示：
4）App 及 HTML5 端效果預覽如下圖所示：
注：可點選日期或圖示開啟日曆面板選擇具體日期。
4. 簡約日曆
4.1 設定
「簡約日曆」樣式範本可設定「通用屬性」和「設定」。
4.1.1 通用屬性
「通用屬性」的設定與「預設」樣式範本相同，詳情參見：預設樣式範本 。
4.1.2 設定
「設定」的「按鈕樣式」分為「標準」和「自訂」。
1）「按鈕樣式」為「標準」時，不可自訂設定 按鈕樣式 。
2）「按鈕樣式」為「自訂」時，可自訂設定 按鈕樣式 。
具體設定項說明如下表所示：
| 設定項 | 說明 | |
|---|---|---|
| 預設狀態 |
| |
| 標題列 | 分割線顏色 | 支援自訂分割線顏色 |
| 按鈕 | 顏色 | 支援自訂按鈕顏色 |
| 字元 | 主字元 | 支援自訂主字元顏色 |
| 特殊字元 | 支援自訂特殊字元顏色 | |
| 字號 | 支援自訂字號，範圍為12-18之間的整數，預設為14 | |
| 箭頭 | 顏色 | 支援自訂箭頭顏色 |
4.2 範例
1）樣式範本選擇「簡約日曆」。
2）「通用屬性>屬性設定」選擇「預設」。
3）「設定」的「按鈕樣式」選擇「自訂」，配置具體設定項，點選「確定」，如下圖所示：
4）App 及 HTML5 端效果預覽如下圖所示：
注：可點選上方的日期或下方的箭頭收起日曆面板。
4.3 年月、年
App 版本及 HTML5 行動端展現插件版本 V11.0.891 版本及之後，行動端支援自訂日期元件「年月、年」格式的「簡約日曆」樣式範本，效果如下圖所示：
5. 導航日曆
5.1 設定
5.1.1 通用屬性
「通用屬性」的設定與「預設」樣式範本相同，詳情參見：預設樣式範本 。
5.1.2 設定
「設定」的「按鈕樣式」分為「標準」和「自訂」。
1）「按鈕樣式」為「標準」時，不可自訂設定 按鈕樣式 。
2）「按鈕樣式」為「自訂」時，可自訂設定 按鈕樣式 。
具體設定項說明如下表所示：
| 設定項 | 說明 | |
|---|---|---|
| 預設狀態 |
| |
| 標題列 | 標題列 | 支援設定是否顯示標題列 |
| 分割線顏色 | 支援自訂分割線顏色 | |
| 按鈕 | 顏色 | 支援自訂按鈕顏色 |
| 字元 | 主字元 | 支援自訂主字元顏色 |
| 特殊字元 | 支援自訂特殊字元顏色 | |
| 字號 | 支援自訂字號，範圍為12-18之間的整數，預設為14 | |
| 箭頭 | 顏色 | 支援自訂箭頭顏色 |
5.2 範例
1）樣式範本選擇「導航日曆」。
2）「通用屬性>屬性設定」選擇「預設」。
3）「設定」的「按鈕樣式」選擇「自訂」，配置具體設定項，點選「確定」，如下圖所示：
4）App 及 HTML5 端效果預覽如下圖所示：
注1：「收起狀態」下，上下週切換可透過上方的「上一週」、「下一週」按鈕實現，也可左右滑動下方日期來實現。
注2：可透過點選上方的日期或下方的箭頭展開日曆面板。
6. 簡約日期樣式
6.1 設定
6.1.1 通用屬性
「通用屬性」的設定與「預設」樣式範本相同，詳情參見：預設樣式範本 。
6.1.2 設定
「設定」的「按鈕樣式」分為「標準」和「自訂」。
1）「按鈕樣式」為「標準」時，不可自訂設定 按鈕樣式 。
2）「按鈕樣式」為「自訂」時，可自訂設定 按鈕樣式 。
具體設定項說明如下表所示：
| 設定項 | 說明 | |
|---|---|---|
| 標籤名稱 | 字元 | 支援設定字體樣式、字號（範圍為1-99之間的整數，預設為15）、字體顏色、粗體、傾斜 |
| 元件名稱 | 字元 | 支援設定字體樣式、字號（範圍為1-99之間的整數，預設為15）、字體顏色、粗體、傾斜 |
| 圖示 | 支援自訂圖示 | |
元件區域 注：「元件區域」設定的元件樣式生效優先高於「通用屬性」 | 元件背景 | 支援自訂元件背景的顏色 |
| 元件邊框 | 支援自訂元件邊框的類型 | |
| 邊框顏色 | 支援自訂邊框顏色 | |
| 圓角 | 支援自訂邊框的圓角 | |
| 寬度 |
| |
6.2 範例
1）選中右側屬性面板中的「組件設定>day」。
2）選擇「屬性」Tab 面板，設定「標籤名稱」為「帆軟」，如下圖所示：
3）選擇「行動端」Tab 面板，點選「樣式範本」旁的「...」按鈕。
4）樣式範本選擇「簡約日期樣式」。
5）「通用屬性>屬性設定」選擇「預設」。
6）「設定」的「按鈕樣式」選擇「自訂」，配置具體設定項，點選「確定」，如下圖所示：
7）App 及 HTML5 端效果預覽如下圖所示：
