使用 mysql 数据库中的 datepicker 中的事件突出显示日期

Question

尝试使用 jquery 和 php 在日期选择器中“突出显示”我的数据库中的日期。我到处寻找可以帮助我的东西...

这是我目前正在使用的代码。 请注意，它具有 onSelect 状态，可以单击日期并从数据库中获取事件并将其打印到 div，这有效，现在我想突出显示事件的日期..

$(document).ready(function() {
        var SelectedDates = {};
        $.getScript('eventdates.php', function(eventsdate) {
            eventsdate;
        });
        $("#kalender").datepicker({
            firstDay: 1,
            dayNamesMin: ['Sö', 'Må', 'Ti', 'On', 'To', 'Fr', 'Lö'],
            monthNames: ['Januari', 'Februari', 'Mars', 'April', 'Maj', 'Juni', 'Juli', 'Augusti', 'September', 'Oktober', 'November', 'December'],
            dateFormat: "yy-mm-dd",
            beforeShowDay: function(date) {
                var Highlight = SelectedDates[date];
                if (Highlight) {
                    return [true, "Highlighted", Highlight];
                }
                else {
                    return [true, '', ''];
                }
            },
            onSelect: function(dateText, inst) {
                var myDate = new Date(dateText);
                var newFormat = $.datepicker.formatDate('yy-mm-dd', myDate);
                $.ajax({
                    url: 'events.php',
                    type: 'POST',
                    dataType: 'json',
                    data: {selectedData: newFormat},
                    success: function(result) {
                        if (result.date === newFormat) {
                            $('#event').html(result['date'] + " " + result['event']);
                        }
                        else {
                            $('#event').html(result['none']);
                        }
                    }
                });
            }
        });

    });​

eventdates.php

<?php

include_once ('connect.php');
$sql = mysql_query("SELECT * FROM `events`");
while ($row = mysql_fetch_array($sql)) {
    echo "SelectedDates[new Date('{$row['date']}')] = new Date('{$row['date']}')<br/>";
}
?>

events.php

<?php
include_once ('connect.php');
if (isset($_POST['selectedData'])) {
    $sql2 = mysql_query("SELECT * FROM `events` WHERE `date`='{$_POST['selectedData']}'");
    $row2 = mysql_fetch_array($sql2);
    if ($row2['date'] == $_POST['selectedData']) {
        $sql = mysql_query("SELECT * FROM `events` WHERE `date`='{$_POST['selectedData']}'");
        while ($row = mysql_fetch_array($sql)) {
            $data = array(
                "date" => $row['date'],
                "event" => utf8_encode($row['event'])
            );
            echo json_encode($data);
        }
    } else {
        $data = array(
            "none" => "Inget event denna dag!"
        );
        echo json_encode($data);
    }
}

?>

Answer 1

我解决了这个问题，并想与其他遇到此类问题的人分享我的解决方案！

jQuery 脚本

<script>
    $(document).ready(function() {
        $("#kalender").datepicker({
            firstDay: 1,
            dayNamesMin: ['Sö', 'Må', 'Ti', 'On', 'To', 'Fr', 'Lö'],
            monthNames: ['Januari', 'Februari', 'Mars', 'April', 'Maj', 'Juni', 'Juli', 'Augusti', 'September', 'Oktober', 'November', 'December'],
            dateFormat: "yy-mm-dd",
            onSelect: function(dateText, inst) {
                var myDate = new Date(dateText);
                var newFormat = $.datepicker.formatDate('yy-mm-dd', myDate);
                $.ajax({
                    url: 'events.php',
                    type: 'POST',
                    dataType: 'json',
                    data: {selectedData: newFormat},
                    success: function(result) {
                        if (result.date === newFormat) {
                            $('#event').html(result['date'] + "<br />\n" + result['event']);
                        }
                        else {
                            $('#event').html(result['none']);
                        }
                    }
                });
            }, beforeShowDay: function(date) {

                var yy = date.getFullYear(), mm = date.getMonth() + 1, dd = date.getDate();
                if (dd < 10) {
                    var dt = yy + "-" + mm + "-0" + dd;
                } else {
                    var dt = yy + "-" + mm + "-" + dd;
                }
<?php include_once ('eventdates.php') ?>
                return [true, ''];

            }
        });

    });
</script>

events.php

<?php
include_once ('connect.php');
if (isset($_POST['selectedData'])) {
    $sql2 = mysql_query("SELECT * FROM `events` WHERE `date`='{$_POST['selectedData']}'");
    $row2 = mysql_fetch_array($sql2);
    if ($row2['date'] == $_POST['selectedData']) {
        $sql = mysql_query("SELECT * FROM `events` WHERE `date`='{$_POST['selectedData']}'");
        while ($row = mysql_fetch_array($sql)) {
            $data = array(
                "date" => $row['date'],
                "event" => utf8_encode($row['event'])
            );
            echo json_encode($data);
        }
    } else {
        $data = array(
            "none" => "Inget event denna dag!"
        );
        echo json_encode($data);
    }
}

?>

eventdates.php

<?php

include_once ('connect.php');
$sql = mysql_query("SELECT * FROM `events`");

while ($row = mysql_fetch_array($sql)) {
    echo "var selDate" . $row['event_ID'] . " = '" . $row['date'] . "';";
    echo "if (dt === selDate" . $row['event_ID'] . ") {";
    echo "return [true, 'Highlighted'];";
    echo "}";
}
?>

希望这对其他人有帮助！

Answer 2

AJAX 根据定义是异步的。这意味着您在 $.geScript 完成之前运行 datepicker 代码。需要在$.getScript的回调中调用datepicker代码

$.getScript('eventdates.php', function() {
         /* new script has fired*/
         $("#kalender").datepicker({.....});

});