点击按钮即可启动完整日历视图

Bootstrap full calendar view on click button

本文关键字：日历 视图 启动 按钮      更新时间：2024-06-18

当用户点击查看约会按钮时，我试图显示完整的日历，日历会出现，但一开始我只能看到月、周、日链接，然后点击它们的链接我会看到日历-但我希望用户点击查看预约按钮时立即看到完整的日历

    $('#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页面中显示为"monthwayday"

初始化期间的完整日历可能需要一些不可见的DOM元素。点击后运行完整日历是正确的解决方案： 
   $('#viewAvailableAppointments').click(function () {
    $('#page-four').slideUp(500);
$('.calendar').show();
$('.calendar').fullCalendar({
header: {
    left: 'prev,next today',
    center: 'title',
    right: 'month,agendaWeek,agendaDay'
},
editable: true

})})

相关文章：