Question

Having problems making my “events calender” from the existing datepicker in jQuery UI.

This is the code that I’ve come up with so far.

    <script>
    $(document).ready(function() {
        $("#datepicker").datepicker({
            onSelect: function(dateText, inst) {
                var myDate = new Date(dateText);
                var newFormat = $.datepicker.formatDate("yy-mm-dd", myDate);
                    if (newFormat === "2012-11-20") {
                        $("#div").html("KIING");
                    } else if (newFormat === "2012-11-21") {
                        $("#div").html("KIIIIIIING");
                    } else if (newFormat === "2012-11-03") {
                        $("#div").html("1234123");
                    } else {
                        $("#div").html("");
                    }
            }
        });
    });
</script>
<div id="datepicker"></div>
<div id="div"></div>

http://jsfiddle.net/ALrkB/

I have gotten stuck here, i don’t know how to make the code better and so that you don’t have to insert the code manually for every event.

The thought is that the user login to the CMS and adds a query with DATE and EVENT and it connects to the jQuery code.

Answer 1

That should do the trick

<script>
   $(document).ready(function() {
    $("#datepicker").datepicker({
        onSelect: function(dateText, inst) {
            var ajaxCfg = {
                url: '/your/path/to/data',
                data: {selectedDate: dateText},
                type: 'POST',
                success: function(data) {
                  $("#div").html($(data).html());
                }
            };
            $.ajax(ajaxCfg);
        }
    });
});
</script>
<div id="datepicker"></div>
<div id="div"></div>

On the server side, you will need to get the post value for selectedDate and the current user, then make a query to your event database and return the data to the script.