我试图在用户点击查看约会按钮时显示一个完整的日历,日历出现但起初我只能看到月、周、日链接,然后点击这些链接我看到一个日历 -但我希望在用户单击查看约会按钮时立即看到完整的日历
$('#viewAvailableAppointments').click(function () {
$('#page-four').slideUp(500);
$('.calendar').show();
})
$('.calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
editable: true
})
我的 HTML 代码是
<div hidden class="calendar" text-align="center"></div>
<link rel="stylesheet" href="/static/css/fullcalendar.css">
<link rel="stylesheet" href="/static/css/fullcalendar.min.css">
<link rel="stylesheet" href="/static/css/fullcalendar.print.css">
<script src="/js/jquery-1.11.2.min.js"></script>
<script src="/js/jquery-ui.min.js"></script>
<script src="/js/appointments.js"></script>
<script src="/js/fullcalendar.min.js"></script>
<script src="/js/fullcalendar.js"></script>
我还看到 CSS 文件存在问题,因为月、周和日应该是按钮,但它们在 html 页面中显示为“monthweekday”
最佳答案
初始化期间的完整日历可能需要一些不可见的 DOM 元素。 单击后运行 fullcalendar 是正确的解决方案:
$('#viewAvailableAppointments').click(function () {
$('#page-four').slideUp(500);
$('.calendar').show();
$('.calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
editable: true
}) })
关于javascript - 单击按钮上的 Bootstrap 完整日历 View ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28752851/