Calendario 是一個(gè)開源的jQuery日期日歷插件。它非常適合用于展示網(wǎng)站上的事件和提醒。

使用Calendario非常容易。首先，您需要將jQuery和calendario.min.css和calendario.min.js文件添加到您的項(xiàng)目中。

<link href="calendario.min.css" rel="stylesheet" />
<script src="jquery.min.js"></script>
<script src="calendario.min.js"></script>

然后，在HTML中，您需要一個(gè)帶有ID的div元素來承載日歷：

<div id="calendar"></div>

接下來，您需要在JavaScript中初始化Calendario插件：

$(document).ready(function() {
$('#calendar').calendario();
});

現(xiàn)在，您已經(jīng)可以在網(wǎng)頁上看到日歷了！您可以使用Calendario的許多自定義選項(xiàng)，例如更改日歷的顏色和添加事件等。例如，下面的代碼將添加一個(gè)事件：

$('#calendar').calendario({
onDayClick: function($el, date, events) {
if(events.length >0) {
var content = '';
for(var i = 0; i < events.length; i++) {
content += '<div class="event">' + events[i].title + '</div>';
}
$('#event-modal').find('.modal-body').html(content);
$('#event-modal').modal();
}
}
});
var currentYear = new Date().getFullYear();
var currentMonth = new Date().getMonth();
var currentDay = new Date().getDate();
$('#calendar').calendario('goto', currentYear, currentMonth, currentDay);
$('#calendar').calendario('addEvents', [
{title: 'Meeting', date: new Date(currentYear, currentMonth, 1)},
{title: 'Lunch', date: new Date(currentYear, currentMonth, 20)},
{title: 'Conference', date: new Date(currentYear, currentMonth, 25)},
]);

上面的代碼會在用戶點(diǎn)擊日歷上的日期時(shí)彈出一個(gè)模態(tài)框，顯示該日期上所有的事件。

Calendario插件是一個(gè)非常靈活和可自定義的插件，適用于許多不同類型的項(xiàng)目。您可以在官方文檔中找到更多信息和示例。