2

Hi I am new to jquery and jquery mobile I am attending to create an event calendar using following JQM-Calendar.Now i want to check this date have event i display the message

The Date have an event

or the date have no event i display the message as

There is no event on this date

. How can I check this in my code

Here is My code:

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

In this way I find the which date have event and display the message.This way how to check the other date have no event

1 Answer 1

0

In your onchange-eventhandler you should check if there are any events on that particular day. For example:

$("#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>');
});

Note: this might not work as expected for days lasting multiple days. For that refer to the jqm-calendar.js line 117.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.