温馨提示×

layUI与FullCalendar结合使用示例

小云
152
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