单击按钮上的Bootstrap完整日历视图

Question

I am trying to make a full Calendar appear when the user clicks on view appointment button, the calendar appears but at first I can only see the month, week, day links and then on clicking on them links I see a calendar - but I want the full calendar to be seen as soon as the user clicks on view appointment button

    $('#viewAvailableAppointments').click(function () {
    $('#page-four').slideUp(500);

    $('.calendar').show();
})

$('.calendar').fullCalendar({

    header: {
        left: 'prev,next today',
        center: 'title',
        right: 'month,agendaWeek,agendaDay'
    },
    editable: true
})

and my HTML code is

<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>

I also see there is an issue with CSS files, as the month, week and day are supposed to be buttons but they come up as "monthweekday" in the html page

Answer 1

The full calendar during initialization may need some DOM elements that aren't visible. Running fullcalendar after click is correct solution:

   $('#viewAvailableAppointments').click(function () {
    $('#page-four').slideUp(500);

$('.calendar').show();
$('.calendar').fullCalendar({
header: {
    left: 'prev,next today',
    center: 'title',
    right: 'month,agendaWeek,agendaDay'
},
editable: true

}) })