以下是一個使用LayUI和FullCalendar結合的示例:
HTML代碼:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>LayUI和FullCalendar結合使用示例</title>
<link rel="stylesheet" href="https://cdn.staticfile.org/layui/2.5.6/css/layui.css">
<link rel="stylesheet" href="https://cdn.staticfile.org/fullcalendar/3.10.2/fullcalendar.min.css">
</head>
<body>
<div id="calendar"></div>
<script src="https://cdn.staticfile.org/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/layui/2.5.6/layui.js"></script>
<script src="https://cdn.staticfile.org/moment.js/2.24.0/moment.min.js"></script>
<script src="https://cdn.staticfile.org/fullcalendar/3.10.2/fullcalendar.min.js"></script>
<script>
layui.use(['layer', 'form'], function(){
var layer = layui.layer;
var form = layui.form;
// 初始化日歷
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
defaultDate: moment().format('YYYY-MM-DD'),
editable: true,
eventLimit: true, // allow "more" link when too many events
events: [
{
title: 'Event 1',
start: moment().format('YYYY-MM-DD'),
end: moment().add(1, 'days').format('YYYY-MM-DD')
},
{
title: 'Event 2',
start: moment().add(2, 'days').format('YYYY-MM-DD'),
end: moment().add(3, 'days').format('YYYY-MM-DD')
}
],
eventClick: function(event) {
layer.alert('Event: ' + event.title);
}
});
});
</script>
</body>
</html>
在這個示例中,我們使用了LayUI和FullCalendar庫來創建一個日歷。在頁面上,我們創建了一個<div>
元素,并給它一個id
為calendar
。在JavaScript部分,我們使用LayUI的layer
和form
模塊來創建一個彈窗和表單。然后,我們通過調用fullCalendar
函數來初始化日歷,傳入一些配置選項,如頭部按鈕、默認日期、可編輯性、事件限制等。我們還通過events
選項傳入一些事件數據,以及通過eventClick
選項來處理事件點擊事件。
注意:上面的示例使用了在線CDN鏈接來引入所需的庫文件。你也可以下載這些文件并將它們保存在本地,在HTML中使用本地路徑引用它們。