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

How to check the jqm calendar date have event or no event in jquery mobile?

本文关键字：事件 日历 日期 jqm 检查 jquery 移动      更新时间：2023-09-26
嗨，我是jquery

和jquery移动版的新手，我正在参加使用以下JQM日历创建事件日历。现在我想检查这个日期有事件我显示消息

日期有一个事件

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

此日期没有活动

.如何在代码中检查这一点

这是我的代码：

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

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

在你的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 行。

相关文章：