【套件筆記 - JS】月曆 evocalendar.js

閱讀時間約 14 分鐘

分享這套功能齊全視覺超級可愛還有響應式變化教學文件又很容易閱讀的套件 Evo Calendar。

當初在製作 JS side project 時,想找一個與 VCalendar 視覺相近的套件,但多半都不合意。六角學院指派的 side project 教練也幫我找了另一個純 JS 的範例,也很接近 VCalendar,但我實在改不動它的 JS,專題完成時間有限,所以最後仍選擇使用套件製作專題。

evocalendar

evocalendar


一、官網資源

evocalendar 官網:https://edlynvillegas.github.io/evo-calendar/


二、CDN 安裝

需搭配 jQuery 使用

<!-- 月曆 evo-calendar -->
<script src="https://www.jsdelivr.com/package/npm/evo-calendar"></script>

<!-- Add jQuery library (required) -->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.4.1/dist/jquery.min.js"></script>

<!-- Add the evo-calendar.js for.. obviously, functionality! -->
<script src="https://cdn.jsdelivr.net/npm/evo-calendar@1.1.2/evo-calendar/js/evo-calendar.min.js"></script>


三、使用範例

https://codepen.io/annchou_illu/pen/MWLrNqw

3-1. 目標功能

  1. ​建立行事曆,可填寫事件標題
  2. 可填寫開始與結束時間
  3. 分類活動
  4. 登記是否為重複活動
  5. 寫點敘述文字

3-2. 示範步驟

  1. 規劃版位
  2. 準備事件來源資料

3-3. 實作

  1. 規劃版位
<div class="container">
<!-- 表格區 -->
<form class="form">
<div>
<label for="name">活動標題</label>
<input type="text" placeholder="活動標題" class="event-input">
</div>
<div>
<label for="startDate">開始時間</label>
<input type="date" class="event-input">
</div>
<div>
<label for="endDate">結束時間</label>
<input type="date" class="event-input">
</div>
<div>
<label for="type">活動類型</label>
<select name="type" id="type" class="event-input">
<option value="">--Please choose an option--</option>
<option value="event">event</option>
<option value="holiday">holiday</option>
</select>
</div>
<div>
<label for="everyYear">是否每年重覆</label>
<select name="everyYear" id="everyYear" class="event-input">
<option value="">--Please choose an option--</option>
<option value="yes">yes</option>
<option value="no">no</option>
</select>
</div>
<div>
<label for="describe">敘述</label>
<textarea name="describe" id="describe" cols="20" rows="10" class="event-input"></textarea>
</div>
<button type="button" class="addEvent">送出</button>
</form>

<!-- 月曆渲染區 -->
<div id="calendar" style="width:600px"></div>
</div>
  1. 觀察套件所需資料格式
    進入 evocalendar 的 GitHub 閱讀文件,在 event 處可以看到它接受的資料格式。所以我們可得知資料格式為:
    (1)外層陣列包裹多個物件資料
    (2)物件屬性務必要有 id、name、date、type
  1. 準備事件來源資料庫用於渲染月曆
const events = [
{
id: "E001",
name: "看牙醫",
description: "記得先刷牙",
date: "2023/12/05",
type: "event",
everyYear: false
},
...
];
  1. 初始化月曆
    官網已經都幫我們寫好了,直接 copy paste。別忘了注意剛才 HTML 的月曆渲染 element id 要和這裏設定的相同。
$('#calendar').evoCalendar({
settingName: settingValue
})
  1. 月曆設定
    填入自己想顯示的視覺元件和設定。其實能做的選擇不多,它的原始預設是月份選擇、月曆、事件列表都全部打開的,但我們可以在此根據能分配給月曆顯示的區域尺寸,選擇哪些元件預設為隱藏狀態。
$("#calendar")
.evoCalendar({
format: "yyyy/mm/dd", //時間格式
todayHighlight: true, //標註今天
sidebarDisplayDefault: false, //左側月份預設顯示狀態
eventDisplayDefault: false, //右側事件預設顯示狀態
calendarEvents: events //傳入套件的事件來源
})
  1. 完成以上動作,就可以呈現月曆資料了
Demo

Demo

  1. 綁定畫面左側,用來增加事件的 DOM 元素們
    這裡小偷懶一點,輸入格的 DOM 綁定在所有輸入格上,但實際上還是一格格使用唯一的 class 或 id 綁定比較好。
// 綁定送出按鈕
const btnAddEvent = document.querySelector(".addEvent");
// 綁定所有輸入格
const eventInput = document.querySelectorAll(".event-input");
// 綁定表單
const form = document.querySelector(".form");
// 當送出按鈕按下,觸發 addEvent 函式
btnAddEvent.addEventListener("click", addEvent);

function addEvent(){}
  1. 撰寫建立事件函式 function addEvent
    在這個函式中,我們需要
    (1)取得輸入格中填入的資料
    (2)在月曆上新增事件:在官網的 methods 中,可以找到 addCalendarEvent 方法
    (3)新增事件後要再次初始化月曆,更新渲染
    (4)新增成功後清除輸入格中的資料
function addEvent() {
// 取得輸入格資料
const data = {
id: new Date().getTime(), // 因為 id 是唯一值,直接用日期當作唯一值
name: eventInput[0].value,
description: eventInput[5].value,
date: [eventInput[1].value, eventInput[2].value],
type: eventInput[3].value,
everyYear: eventInput[4].value === "yes" ? true : false
};

// 測試印出要新增的資料,看是否符合格式
console.log(data);

// 在月曆上新增事件
$("#calendar").evoCalendar("addCalendarEvent", data);

// 執行月曆初始化
$("#calendar").evoCalendar();

// 清除表單,因為我的表格在 HTML 中最外層有使用 form 包裹,才能使用這個辦法
form.reset();
}
  1. 加入必填驗證
    所有輸入格必填,否則無法送出資料。
    新增一個函式 function checkFormError ,它的職責是驗證每個輸入格均有填寫,如果有內容為 "" 空字串,則變更變數 isFilledForm 的狀態,使用 alert 提醒,並返回結果給 function addEvent
    function addEvent 內部最前面則加入執行驗證的程式碼,如果有未填欄位則使用 return 中斷函式執行。
function addEvent() {
// 有未填欄位就跳出
if (!checkFormError()) {
return;
}

const data = ...
}

// 確認表格必填
function checkFormError() {
let isFilledForm = true;

eventInput.forEach((item) => {
if (item.value.trim() === "") {
isFilledForm = false;
}
});

alert("欄位均須填寫");
return isFilledForm;
}
  1. 延伸
$("#calendar")
.evoCalendar({
...
})
.on("selectEvent", function (event, activeEvent) {
// 點擊月曆右側的事件列才會觸發
console.log("你選擇的事件是", event);
})
.on("selectDate", function (event, activeDate) {
// 點擊月曆日期會觸發
console.log(
"你選擇的事件 id 是",
event.target.evoCalendar.$active.events[0].id
);
console.log(`你選擇的日期是:${activeDate}`);
})
.on("selectMonth", function (event, activeMonth) {
// 點擊月曆月份會觸發
console.log(`你選擇的月份是:${activeMonth}`);
});


四、心得

  1. 功能齊全,文件說明清楚,但比較適合顯示範圍整頁時使用。
    a. 顯示範圍過小時,RWD 會跑版,這可以靠客製化解決,但不容易魔改
    b. 因為左右按鈕是換年份,不是換月份,必須叫出左邊的月份側邊欄才能換月,這是他的 UX 比較不好的地方
  2. 視覺可愛,但 CSS 比較不好更動,覆蓋權重較難
  3. 雖然功能齊全又漂亮,但作者似乎沒有再繼續維護,真的很可惜
avatar-img
14會員
20內容數
從藝術領域轉職到前端工程師,喜歡書寫學習歷程和技術文件,掌握經驗與隨時提取的感覺很好。
留言0
查看全部
avatar-img
發表第一個留言支持創作者!
Ann Chou的沙龍 的其他內容
不喜歡 HTML 原生的時間選擇器外型嗎?試試看 flatpickr.js 吧! 以下是使用 flatpickr 做簡單的示例,以及 flatpickr 使用注意事項。
我依舊維持著修習 JS 的步伐,但我仍然覺得自己對 JS 的熟悉度不足。在 JS 班開課後,我藉由刷題庫和做 side project 專題,填補了課前的不自信感和知識焦慮。最終我們小組在 2.5 個月內開發了一個訂閱制電商網站的前後台,我也參加了 F2E week1 完賽,獲得銀級徽章
這是我參加為期三個月的六角學院 2023 網頁前端切版直播班中的學習和成長經驗。最初參加直播班時誤以為自己已經具備足夠的前端知識,但後來發現自己的程式碼還有改進的空間。我在參與直播班的過程中,不僅學到了更多切版技術,也在小組協作中體驗到了組織能力和團隊合作的重要性,並從做設計稿與切版中發現個人優勢。
軟工體驗營最後一周,短短一個月的前端程式體驗,真的是非常超值的課程。不論是檢視自己對寫程式的感受,或是透過社群認識自己的新面向、軟實力的培養都是。六角是非常新手友善的程式學校,推薦給每位想學習前端的初心者朋友。
遭受學習挫折的一周,開始發現社群的重要性,最終還是回歸於自己報名體驗營的目的。
軟體工程師體驗營的第三周,對於知識、學習、課程、社群的感想,持續內化中,我不想只有上課,也希望從學習過程獲得更多經驗,所以寫下了這篇記錄。我也意外發現剛學習的 JavaScript,說不定能讓我重拾學習程式互動藝術,這很令人開心,即使我正在考慮轉職,但創作是終生的,希望下次發作品能有些新展現。
不喜歡 HTML 原生的時間選擇器外型嗎?試試看 flatpickr.js 吧! 以下是使用 flatpickr 做簡單的示例,以及 flatpickr 使用注意事項。
我依舊維持著修習 JS 的步伐,但我仍然覺得自己對 JS 的熟悉度不足。在 JS 班開課後,我藉由刷題庫和做 side project 專題,填補了課前的不自信感和知識焦慮。最終我們小組在 2.5 個月內開發了一個訂閱制電商網站的前後台,我也參加了 F2E week1 完賽,獲得銀級徽章
這是我參加為期三個月的六角學院 2023 網頁前端切版直播班中的學習和成長經驗。最初參加直播班時誤以為自己已經具備足夠的前端知識,但後來發現自己的程式碼還有改進的空間。我在參與直播班的過程中,不僅學到了更多切版技術,也在小組協作中體驗到了組織能力和團隊合作的重要性,並從做設計稿與切版中發現個人優勢。
軟工體驗營最後一周,短短一個月的前端程式體驗,真的是非常超值的課程。不論是檢視自己對寫程式的感受,或是透過社群認識自己的新面向、軟實力的培養都是。六角是非常新手友善的程式學校,推薦給每位想學習前端的初心者朋友。
遭受學習挫折的一周,開始發現社群的重要性,最終還是回歸於自己報名體驗營的目的。
軟體工程師體驗營的第三周,對於知識、學習、課程、社群的感想,持續內化中,我不想只有上課,也希望從學習過程獲得更多經驗,所以寫下了這篇記錄。我也意外發現剛學習的 JavaScript,說不定能讓我重拾學習程式互動藝術,這很令人開心,即使我正在考慮轉職,但創作是終生的,希望下次發作品能有些新展現。
你可能也想看
Google News 追蹤
Thumbnail
這個秋,Chill 嗨嗨!穿搭美美去賞楓,裝備款款去露營⋯⋯你的秋天怎麼過?秋日 To Do List 等你分享! 秋季全站徵文,我們準備了五個創作主題,參賽還有機會獲得「火烤兩用鍋」,一起來看看如何參加吧~
Thumbnail
11/20日NVDA即將公布最新一期的財報, 今天Sell Side的分析師, 開始調高目標價, 市場的股價也開始反應, 未來一週NVDA將重新回到美股市場的焦點, 今天我們要分析NVDA Sell Side怎麼看待這次NVDA的財報預測, 以及實際上Buy Side的倉位及操作, 從
Thumbnail
Hi 大家好,我是Ethan😊 相近大家都知道保濕是皮膚保養中最基本,也是最重要的一步。無論是在畫室裡長時間對著畫布,還是在旅途中面對各種氣候變化,保持皮膚的水分平衡對我來說至關重要。保濕化妝水不僅能迅速為皮膚補水,還能提升後續保養品的吸收效率。 曾經,我的保養程序簡單到只包括清潔和隨意上乳液
Thumbnail
序列化(serialization)是將資料結構或對象轉換為一個格式,可以被儲存到文件或記憶體中,或者可以透過網路傳輸到另一個系統環境。這使得資料可以在不同的系統之間進行交換,並在需要時重新建構回原始的資料結構。本文將介紹兩個好用的Python套件-JSON與Pickle,並比較兩者的不同。
Thumbnail
最近遇到了一個思考有點久的問題,如何將數值不同的樣品進行分組,同時每組的總和不能超越固定的上限值,且某些樣品不能被分在同一組。雖然規則並不困難,但是人工進行分組卻頗花時間,是不是有可能自動化處理這個步驟?如果有可能的話想要產出多個不同的分組方法,最後由人工選擇最佳的分組方式。
Thumbnail
上一篇文章說明了Pillow套件的基礎操作,這篇文章則會透過四個範例來示範如何利用Pillow製作簡單的GIF動畫。
Thumbnail
一早看著IThome的新聞發現到這個標題「📢 PyPI新帳號現需要啟用雙因素驗證才能執行管理操作」, 而近期幾乎都在接觸Python語言, 在Python的生態圈裡相信對於「pip install…」應該相當熟悉了吧! 但對於背後的平台相信我們不曾仔細去了解一番, 這好藉著這次的觀點也順便來介紹一
Thumbnail
本篇適合: > 剛開始學習 HTML / CSS ,對基本語法有了解的人 > 想要快速建立一個一頁式網站,但對 CSS 仍無法很活用的人 初始設定與 Bootstrap 中文版網頁使用 在過去在大學期間擔任助教的過程,常常有人問「Bootstrap」是什麼?一來我也不是什麼前端工程師,我一時也不太知
如有需要可以不用浪費效能重新將整個頁面重新載入,可以使用非同步的JS,使用動態載入資料
Thumbnail
ANKH原意為生命之鑰,是古埃及藝術用來代表生命的符號。Ankh Numpad延續Aaru的浮雕風格,摘錄了羅塞塔石碑的聖碑體倒數4~5排的部份文字,讓原本單純的Numpad鍵盤賦予更深一層的意涵,若再搭配TKL的Aaru,能讓按鍵功能更加完整,自然不能錯過啦~
Thumbnail
MotoGP油箱上長出翅膀背後的意義是?這都跟最新的空氣動力學提供更多的抓地力有關。
Thumbnail
這個秋,Chill 嗨嗨!穿搭美美去賞楓,裝備款款去露營⋯⋯你的秋天怎麼過?秋日 To Do List 等你分享! 秋季全站徵文,我們準備了五個創作主題,參賽還有機會獲得「火烤兩用鍋」,一起來看看如何參加吧~
Thumbnail
11/20日NVDA即將公布最新一期的財報, 今天Sell Side的分析師, 開始調高目標價, 市場的股價也開始反應, 未來一週NVDA將重新回到美股市場的焦點, 今天我們要分析NVDA Sell Side怎麼看待這次NVDA的財報預測, 以及實際上Buy Side的倉位及操作, 從
Thumbnail
Hi 大家好,我是Ethan😊 相近大家都知道保濕是皮膚保養中最基本,也是最重要的一步。無論是在畫室裡長時間對著畫布,還是在旅途中面對各種氣候變化,保持皮膚的水分平衡對我來說至關重要。保濕化妝水不僅能迅速為皮膚補水,還能提升後續保養品的吸收效率。 曾經,我的保養程序簡單到只包括清潔和隨意上乳液
Thumbnail
序列化(serialization)是將資料結構或對象轉換為一個格式,可以被儲存到文件或記憶體中,或者可以透過網路傳輸到另一個系統環境。這使得資料可以在不同的系統之間進行交換,並在需要時重新建構回原始的資料結構。本文將介紹兩個好用的Python套件-JSON與Pickle,並比較兩者的不同。
Thumbnail
最近遇到了一個思考有點久的問題,如何將數值不同的樣品進行分組,同時每組的總和不能超越固定的上限值,且某些樣品不能被分在同一組。雖然規則並不困難,但是人工進行分組卻頗花時間,是不是有可能自動化處理這個步驟?如果有可能的話想要產出多個不同的分組方法,最後由人工選擇最佳的分組方式。
Thumbnail
上一篇文章說明了Pillow套件的基礎操作,這篇文章則會透過四個範例來示範如何利用Pillow製作簡單的GIF動畫。
Thumbnail
一早看著IThome的新聞發現到這個標題「📢 PyPI新帳號現需要啟用雙因素驗證才能執行管理操作」, 而近期幾乎都在接觸Python語言, 在Python的生態圈裡相信對於「pip install…」應該相當熟悉了吧! 但對於背後的平台相信我們不曾仔細去了解一番, 這好藉著這次的觀點也順便來介紹一
Thumbnail
本篇適合: > 剛開始學習 HTML / CSS ,對基本語法有了解的人 > 想要快速建立一個一頁式網站,但對 CSS 仍無法很活用的人 初始設定與 Bootstrap 中文版網頁使用 在過去在大學期間擔任助教的過程,常常有人問「Bootstrap」是什麼?一來我也不是什麼前端工程師,我一時也不太知
如有需要可以不用浪費效能重新將整個頁面重新載入,可以使用非同步的JS,使用動態載入資料
Thumbnail
ANKH原意為生命之鑰,是古埃及藝術用來代表生命的符號。Ankh Numpad延續Aaru的浮雕風格,摘錄了羅塞塔石碑的聖碑體倒數4~5排的部份文字,讓原本單純的Numpad鍵盤賦予更深一層的意涵,若再搭配TKL的Aaru,能讓按鍵功能更加完整,自然不能錯過啦~
Thumbnail
MotoGP油箱上長出翅膀背後的意義是?這都跟最新的空氣動力學提供更多的抓地力有關。