Question

在设备（Android ICS）上启动时，fullCalendar不会在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>

Answer 1

我在Android上显示保证金时遇到一些问题。尝试没有保证金。

fullCalendar日历div不会在带有phonegap的设备上显示

1 个答案: