91超碰碰碰碰久久久久久综合_超碰av人澡人澡人澡人澡人掠_国产黄大片在线观看画质优化_txt小说免费全本

溫馨提示×

layUI與FullCalendar結合使用示例

小云
165
2023-09-12 04:18:45
欄目: 編程語言

以下是一個使用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>元素,并給它一個idcalendar。在JavaScript部分,我們使用LayUI的layerform模塊來創建一個彈窗和表單。然后,我們通過調用fullCalendar函數來初始化日歷,傳入一些配置選項,如頭部按鈕、默認日期、可編輯性、事件限制等。我們還通過events選項傳入一些事件數據,以及通過eventClick選項來處理事件點擊事件。

注意:上面的示例使用了在線CDN鏈接來引入所需的庫文件。你也可以下載這些文件并將它們保存在本地,在HTML中使用本地路徑引用它們。

0
周口市| 泸州市| 东平县| 宜章县| 出国| 贵南县| 彰化县| 亚东县| 陆河县| 盐城市| 滦平县| 安化县| 古浪县| 济宁市| 齐齐哈尔市| 通榆县| 两当县| 怀宁县| 措勤县| 洪洞县| 德化县| 城口县| 特克斯县| 临汾市| 乌兰察布市| 云梦县| 江陵县| 京山县| 明光市| 霍林郭勒市| 涟水县| 藁城市| 台北市| 弥勒县| 永泰县| 永嘉县| 墨脱县| 岳西县| 柞水县| 瑞金市| 思南县|