can't display as same as demo code with fullcalendar - fullcalendar

Question

I tried to apply fullcalendar to my page.
When I pasted the example code to my page, there's no header buttons and no same event styles, these events can't be drag and drop.
Using: jquery 3.3.0, moment 2.20.1, fullcalendar 3.8.0.
Do I lost some settings? Please help and figure out, thank you all.
$(function() {
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,basicWeek,basicDay'
},
defaultDate: '2018-01-12',
navLinks: true, // can click day/week names to navigate views
editable: true,
eventLimit: true, // allow "more" link when too many events
events: [
{
title: 'All Day Event',
start: '2018-01-01'
},
{
id: 999,
title: 'Repeating Event',
start: '2018-01-09T16:00:00'
},
{
id: 999,
title: 'Repeating Event',
start: '2018-01-16T16:00:00'
},
{
title: 'Conference',
start: '2018-01-11',
end: '2018-01-13'
},
{
title: 'Meeting',
start: '2018-01-12T10:30:00',
end: '2018-01-12T12:30:00'
},
{
title: 'Lunch',
start: '2018-01-12T12:00:00'
},
{
title: 'Meeting',
start: '2018-01-12T14:30:00'
},
{
title: 'Dinner',
start: '2018-01-12T20:00:00'
},
{
title: 'Click for Google',
url: 'http://google.com/',
start: '2018-01-28'
}
]
});
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.8.0/fullcalendar.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.8.0/fullcalendar.print.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.20.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.8.0/fullcalendar.min.js"></script>
<div id="calendar">
</div>

Answer 1

I don't know precisely which example code you tried to copy, but unfortunately you didn't copy it exactly right.
This is your problem:
<link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.8.0/fullcalendar.print.min.css" rel="stylesheet" />
This overrides the default CSS (from fullcalendar.min.css) with the version intended for use when printing the page. Changes here include hiding the headers and buttons and reducing the use of colours.
What you need to do is tell the browser to only use this stylesheet when in print mode. This is done using a media query media="print", as follows:
<link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.8.0/fullcalendar.print.min.css" rel="stylesheet" media="print"/>