FVS表格實現日曆翻頁效果

適用場景：安裝了「FVS大屏編輯模式」插件的使用者，可參考本文了解 FVS 範本製作。

注：不支援行動端。

1.1 版本

1.2 預期效果

本文將介紹 FVS 範本中使用 表格組件 和 日期時間元件 實現日曆翻頁效果。預覽效果如下圖所示：

1.3 實現思路

在表格中使用公式表現日期，設定參數和相應的日期時間元件，透過超連結點選事件改變元件值並查詢來實現翻頁效果。

2.1 新建範本

點選設計器左上角「檔案>新建大屏報表」，建立一張空白大屏，可自訂名稱和尺寸。如下圖所示：

2.2 設計日期時間元件

新增一個日期時間元件到畫布中，設定名稱為 date ，即表示參數為 date ；

設定字號為 16px ，格式下拉選擇「年-月」和「yyyy-MM」，預設值設定為公式：=TODAY() 。

如下圖所示：

2.3 設計表格

2.3.1 新增表格

新增一個表格，點選「編輯組件」進入表格編輯介面。如下圖所示：

2.3.2 日曆樣式設計

這裏主要說明日曆實現方式，具體樣式設計不做贅述。

1）當前日期

在儲存格中插入公式 =FORMAT(TODAY(),"yyyy年MM月dd日  EEEEE") ，獲取當前日期並轉換格式，公式說明可參考 日期的特殊格式轉換 。

2）輔助資料

為了實現日曆效果，需要藉助輔助資料。

• B3 儲存格插入公式為 =$date，獲取參數 date 的值，在「儲存格元素」中設定其格式為「日期型」，手動輸入 yyyy年MM月。

• B4 儲存格插入公式為 =WEEKDAY(DATEINMONTH($date,1))，獲取參數 date 日期所在月的第一天並傳回其星期數，傳回值為介於0到6之間的某一整數，分別代表星期中的某一天（從星期日到星期六）。

• C4 儲存格插入公式為 =DAYSOFMONTH($date)，獲取參數 date 日期所在月包含的天數。

注：設定完成後將第 4 行隱藏。

3）日期排列

• B5-H5 儲存格按星期日到星期六的順序進行排列。

• B6 儲存格插入公式為 =IF(B4 = 0,1,"")，表示若參數 date 日期所在月的第一天傳回的星期數是 0，則顯示數字為 1，表示這個月的第一天是星期日。

• C6 儲存格插入公式為 =IF(B4 <= 1,1 - B4 + 1,"")， 若 B4=0 ，則 C6=2，若 B4=1，則 C6=1 。D6-H6 儲存格與 C6 儲存格同理，依次類推即可。

• B7-H9 儲存格插入公式即簡單的累加，詳情請參見範本

• B10 儲存格插入公式為 =IF(H9 + 1 <= C4,H9 + 1,"") ，C10-C12 儲存格依次類推。其原理為：H9 儲存格最大可能為 28，最小可能為 22,；而 C4 儲存格最小為 28，最大為 31，故從 B10 儲存格開始，以 H9 為參照執行公式。

更多內容請參見範本，如下圖所示：

4）設定當天日期高亮

選中日曆主體所有的日期儲存格，增加條件屬性，選擇背景顏色，作用物件為「當前格子」。選擇「公式」，分別輸入並「新增」三個公式：$$$=day(now()) and month(B3)==month(B2) and year(B3)==year(B2) ，表示儲存格值為當日的日期時背景色變色。如下圖所示：

2.3.3 設定翻頁超連結

在 C13、D13、F13、G13 儲存格中分別寫入「上年、上月、下月、下年」。

選中 C13 儲存格，新增一個 JavaScript 腳本型別超連結，新增參數 a，參數值為公式 

=FORMAT(YEARDELTA(B3,-1),"yyyy-MM") 。

輸入 JavaScript 代碼：

duchamp.getWidgetByName("date").setValue(a); //給參數元件 date 指派

如下圖所示：

另外 3 個儲存格中 JS 代碼相同，參數 a 的值分別為：

上年：FORMAT(YEARDELTA(B3,-1),"yyyy-MM")

上月：FORMAT(MONTHDELTA(B3,-1),"yyyy-MM")

下月：FORMAT(MONTHDELTA(B3,1),"yyyy-MM")

下年：FORMAT(YEARDELTA(B3,1),"yyyy-MM")

注：首次設定超連結後儲存格樣式改變，可自行修改。

2.3.4 表格內容雙向鋪滿

設定完成後，點選左上角「傳回大屏範本」，設定表格內容適應方式為「雙向鋪滿」，點選設計器右上角「儲存」即可。如下圖所示：

2.4 效果預覽

點選右上角「預覽」，效果如 1.2 節預期效果所示。

點選下載範本：FVS表格實現日曆翻頁效果.fvs