1
fullCalendar는 기기 (Android ICS)에서 시작할 때 PhoneGap에 캘린더를 표시하지 않습니다.fullCalendar 캘린더 div가 phonegap이있는 기기에 표시되지 않습니다.
콘텐츠는 Chrome이나 Firefox를 통해로드되지만 정상적으로로드되며 콘텐츠가 표시됩니다. 또한 phonegap 내에 사용자 정의 코드없이 fullCalendar 데모를 실행하려고 시도했지만 달력이 렌더링되지 않습니다.
<!DOCTYPE HTML>
<html>
<head>
<title>a</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="./jquery.mobile-1.1.1/jquery.mobile-1.1.1.min.css" />
<link rel="stylesheet" href="./fullcalendar/fullcalendar.css">
<link rel="stylesheet" href="./fullcalendar/fullcalendar.print.css" media="print">
<script type="text/javascript" charset="utf-8" src="cordova-2.1.0.js"></script>
<script type="text/javascript" src="./jquery.mobile-1.1.1/jquery-1.8.1.min.js"></script>
<script type="text/javascript" src="./jquery.mobile-1.1.1/jquery-ui-1.8.23.custom.min.js"></script>
<script type="text/javascript" src="./jquery.mobile-1.1.1/jquery.mobile-1.1.1.min.js"></script>
<script type="text/javascript" src="./fullcalendar/fullcalendar.min.js"></script>
<script type='text/javascript'>
$(document).ready(function() {
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
var calendar = $('#calendar').fullCalendar({
header: {
left: 'prev,today,next',
right: 'agendaDay'
},
defaultView: "agendaDay",
selectable: true,
selectHelper: true,
select: function(start, end, allDay) {
var title = prompt('Event Title:');
if (title) {
calendar.fullCalendar('renderEvent',
{
title: title,
start: start,
end: end,
allDay: allDay
},
true // make the event "stick"
);
}
calendar.fullCalendar('unselect');
},
editable: true,
events: [
{
title: 'Morning Status Meeting',
start: new Date(y, m, d, 9, 30),
allDay: false
},
{
title: 'Lunch meeting with John Appleseed',
start: new Date(y, m, d, 12, 0),
end: new Date(y, m, d, 13, 30),
allDay: false
},
{
title: 'Android Product Review',
start: new Date(y, m, d, 14, 0),
end: new Date(y, m, d, 15, 0),
allDay: false
},
{
title: 'Andrew and Matthew\'s baseball finals',
start: new Date(y, m, d, 17, 0),
end: new Date(y, m, d, 19, 0),
allDay: false
},
{
title: 'Birthday Party',
start: new Date(y, m, d+1, 19, 0),
end: new Date(y, m, d+1, 22, 30),
allDay: false
},
]
});
});
</script>
<style type='text/css'>
body {
margin-top: 40px;
text-align: center;
font-size: 14px;
font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
}
#wrap {
width: 400px;
margin: 0 auto;
}
#external-events {
float: left;
width: 150px;
padding: 0 10px;
border: 1px solid #ccc;
background: #eee;
text-align: left;
}
#external-events h4 {
font-size: 16px;
margin-top: 0;
padding-top: 1em;
}
.external-event { /* try to mimick the look of a real event */
margin: 10px 0;
padding: 2px 4px;
background: #3366CC;
color: #fff;
font-size: .85em;
cursor: pointer;
}
#external-events p {
margin: 1.5em 0;
font-size: 11px;
color: #666;
}
#external-events p input {
margin: 0;
vertical-align: middle;
}
#calendar {
float: right;
width: 400px;
background-color: white;
}
</style>
</head>
<body>
<!-- Start of first page -->
<div data-role="page" id="service-booking" data-theme="b">
<div data-role="header">
<h1>Service Appointment Booking</h1>
<a href="index.html" data-icon="gear" class="ui-btn-right">Options</a>
</div>
<div data-role="content" class="ui-content" role="main">
<div class="ui-grid-a">
<div class="ui-block-a" width="300">
<div id='wrap'>
<div id='calendar'></div>
</div>
</div>
</div><!-- /grid-a -->
</div><!-- /content -->
</div><!-- /page -->
</body>
</html>
내 문제의 해결책을 찾았습니다. HTML에서 을 삭제하고 Javascript에서 // 주석을 삭제해야합니다. –