Question

您好我是jquery和jquery mobile的新手我正在参加使用以下JQM-Calendar创建活动日历。现在我想检查这个日期有事件我显示消息

日期有一个事件

或日期没有事件我将消息显示为

此日期没有活动

。我如何在我的代码中检查这个

这是我的代码：

<!DOCTYPE html>
<html>
 <head>
    <title>My Page</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
    <link rel="stylesheet" href="jw-jqm-cal.css" />
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
    <script type="text/javascript" src="jw-jqm-cal.js"></script>
    <script type="text/javascript">
        $(document).on('pageshow', "#view-calendar", function(event, ui) {
            var date = new Date();
            var d = date.getDate();
            var m = date.getMonth();
            var y = date.getFullYear();

            $("#calendar").jqmCalendar({
                events: [{
                       "summary": "Meet PM",
                        "begin": new Date(y,m, 27 ),
                        "end": new Date(y, m, 28)

                }, {
                        "summary": "Dinner",
                        "begin": new Date(y, m, d + 3),
                        "end": new Date(y, m, d + 4)

                }, {
                    "summary": "Lunch with Friends",
                        "begin": new Date(y, m, d + 6),
                        "end": new Date(y, m, d + 7)

                }, 
                ],
                months: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
                days: ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"],
                startOfWeek: 0

            });
             $("#calendar").bind('change', function(event, date) {

                 $("#message").html('<p><strong>There is No event at '+date+' </strong></p>');
        });
        });
    </script>
</head>

<body>
    <div data-role="page" id="view-calendar">
        <div data-role="header">

 <h1>Tradition Calendar</h1>

        </div>
        <div data-role="content">
            <div id="calendar"></div>
            <div id="message"></div>
        </div>
    </div>
</body>

通过这种方式，我找到了哪个日期有事件并显示消息。这种方式如何检查其他日期没有事件

Answer 1

在你的onchange-eventhandler中你应该检查那一天是否有任何事件。例如：

$("#calendar").bind('change', function(event, date) {
    // Fetch the events from the jqm-calendar object stored in the jQuery data
    var events = $("#calendar").data("jqm-calendar").settings.events;
    // Check if any events on this date exist
    for ( var i = 0; i < events.length; i++ ) {
        if ( events[i].begin.getFullYear() == date.getFullYear() && // same year?
             events[i].begin.getMonth() == date.getMonth() &&        // same month?
             events[i].begin.getDate() == date.getDate() ) {        // same date?
              // There is an event!
             $("#message").html("");
             return false;
        }
    }
    // There is no event!
     $("#message").html('<p><strong>There is No event at '+date+' </strong></p>');
});

注意：对于持续数天的天数，这可能无法正常工作。为此，请参阅jqm-calendar.js第117行。

如何检查jqm日历日期在jquery mobile中有事件或没有事件？

1 个答案: