calendar.js是一個用于處理日期選擇的JavaScript庫。要使用它,首先需要在HTML文件中引入calendar.js文件,然后創建一個日歷實例并設置相關選項。以下是一個簡單的示例:
calendar.js文件:<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Calendar Example</title>
</head>
<body>
<input type="text" id="calendar" />
<script src="path/to/calendar.js"></script>
<script src="script.js"></script>
</body>
</html>
script.js文件中創建一個日歷實例并設置相關選項:document.addEventListener('DOMContentLoaded', function () {
var calendarEl = document.getElementById('calendar');
var calendar = new Calendar(calendarEl, {
initialView: 'dayGridMonth',
locale: 'zh-cn',
events: [
{
title: '事件1',
start: '2022-08-01'
},
{
title: '事件2',
start: '2022-08-07',
end: '2022-08-10'
}
],
dateClick: function (info) {
alert('選中的日期:' + info.dateStr);
}
});
calendar.render();
});
在這個示例中,我們創建了一個日歷實例,設置了初始視圖為dayGridMonth(月視圖),使用中文本地化,并添加了一些事件。當用戶點擊日期時,會彈出一個提示框顯示選中的日期。
你可以根據需要自定義calendar.js的選項和行為。更多關于calendar.js的信息和示例,可以查閱官方文檔:https://github.com/kenwheeler/calendar。