fullCalendar moreLinkText返回一个按钮,完整代码
时间: 2024-03-02 10:54:12 浏览: 129
以下是一个使用fullCalendar的moreLinkText选项返回一个按钮的完整代码示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>使用fullCalendar返回按钮示例</title>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/fullcalendar.min.css' />
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css' />
</head>
<body>
<div id='calendar'></div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/fullcalendar.min.js'></script>
<script>
$(document).ready(function() {
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
events: [{
title: 'Event 1',
start: '2021-08-20T10:00:00',
end: '2021-08-20T12:00:00'
}, {
title: 'Event 2',
start: '2021-08-22T14:00:00',
end: '2021-08-22T16:00:00'
}, {
title: 'Event 3',
start: '2021-08-24T09:00:00',
end: '2021-08-24T11:00:00'
}, {
title: 'Event 4',
start: '2021-08-26T16:00:00',
end: '2021-08-26T18:00:00'
}, {
title: 'Event 5',
start: '2021-08-28T12:00:00',
end: '2021-08-28T14:00:00'
}, {
title: 'Event 6',
start: '2021-08-30T10:00:00',
end: '2021-08-30T12:00:00'
}],
// 使用moreLinkText选项返回一个按钮
moreLinkText: '<button class="btn btn-primary">查看更多</button>',
// 为按钮添加点击事件处理程序
eventAfterAllRender: function(view) {
$('.fc-more').click(function() {
alert('点击了查看更多按钮!');
});
}
});
});
</script>
</body>
</html>
```
在这个示例中,我们使用了fullCalendar库来创建一个日历,然后使用events选项来设置一些事件。我们还使用了moreLinkText选项来自定义更多事件链接的文本和样式,将其设置为一个带有“查看更多”标签的蓝色按钮。最后,我们使用了eventAfterAllRender回调函数来为按钮添加一个点击事件处理程序,当用户点击“查看更多”按钮时,将会显示一个警告框。
阅读全文