要实现FullCalendar设置高度为
100%，内容不足
100%时高度设为
auto，内容满足时高度为
100%，可以通过以下步骤实现：
### 思路
1. 初始化FullCalendar时，先将高度设置为
auto，以便内容不足时自适应高度。
2. 监听FullCalendar的渲染事件，在渲染完成后检查内容高度是否达到容器高度。
3. 如果内容高度达到容器高度，将FullCalendar的高度设置为
100%。
### 代码示例
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FullCalendar
Height Example</title>
<!-- 引入FullCalendar的
CSS和JS文件 -->
<link href='https
://cdn.jsdelivr.net/npm/fullcalendar@6.1.8/main.min.
css' rel='stylesheet' />
<script src='https
://cdn.jsdelivr.net/npm/fullcalendar@6.1.8/main.min.js'></script>
<style>
/* 设置容器高度为
100% */
#calendar-container {
height: 100vh;
width
: 100%;
}
</style>
</head>
<body>
<div id="calendar-container"></div>
<script>
document.addEventListener('DOMContentLoaded', function () {
const calendarEl = document.getElementById('calendar-container');
const calendar = new FullCalendar.Calendar(calendarEl, {
// 初始高度设置为
auto
height: '
auto',
// 其他配置选项
initialView
: 'dayGridMonth',
events
: [
{
title
: 'Event 1',
start
: '2024-01-01'
},
{
title
: 'Event 2',
start
: '2024-01-15'
}
// 可以添加更多事件
]
});
// 监听日历渲染完成事件
calendar.on('datesSet', function () {
const calendar
Height = calendarEl.offset
Height;
const content
Height = calendarEl.querySelector('.fc-view-harness').offset
Height;
// 如果内容高度达到容器高度，设置高度为
100%
if (content
Height >= calendar
Height) {
calendar.setOption('
height', '
100%');
}
});
calendar.render();
});
</script>
</body>
</html>
```
### 代码解释
1. **HTML部分**：创建一个容器`#calendar-container`，并设置其高度为`
100vh`。
2. **
CSS部分**：设置`#calendar-container`的高度为`
100vh`，确保容器占据整个视口高度。
3. **JavaScript部分**：
- 初始化FullCalendar时，将高度设置为`
auto`。
- 监听`datesSet`事件，该事件在日历渲染完成后触发。
- 在事件处理函数中，获取容器高度
和内容高度。
- 如果内容高度达到容器高度，使用`setOption`方法将FullCalendar的高度设置为`
100%`。
### 注意事项
- 确保FullCalendar的版本支持`setOption`方法
和`datesSet`事件。
- 根据实际情况调整事件数据
和其他配置选项。
扫一扫
2818
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
