Multiple dates highlighted [jquery datepicker]

Multiple dates highlighted [jquery datepicker]

Hello everybody,


Im using a jquery calendar to bring some events related to my site and click on the dates using the "onSelect" works perfectly (i have a database with some events with dates). But I would like that to open my site some dates are already "pre-selected". I already have an array in PHP with these dates.


I would like to move to the datepicker do the rest! can you help me? :)

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Teste</title>
    <link href="../sistema/css/calendario.css" rel="stylesheet" type="text/css" />
    <style>
        .resultado { display:none; background:#000; color:#FFF; }
    </style>
    <?php include("common/class/query.php"); ?>
    <?php include("common/class/data.php"); ?>
    <?
        $data = retornarData("%Y-%m-%d",$_GET['data'],true);
        $query = new Query();
        $query->setTabela(array("eventos"));
        $query->setCampo(array("eveId","eveTitulo","eveData"));
        $resultado = $query->select();
        $arrayData = array();
        if($resultado){
            foreach($resultado as $evento){
                $arrayData[] = retornarData("%d/%m/%Y",$evento['eveData']);
            }
        }
        print_r($arrayData);
    ?>
    <script src="common/js/jquery.js" type="text/javascript"></script>
    <script src="../sistema/js/datepicker.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function(){
            $(".calendario").datepicker({
                onSelect: function(dateText){
                    $.get("teste/",{data:dateText},function(dados){
                        $(".resultado").empty().fadeIn("slow").css("display","block").html(dados);
                    });
                }
            });
        });
    </script>
    </head>
    <body>
        <div class="calendario"></div>
        <div class="resultado"></div>
        <div class="rodape">Teste ® 2010 - Maykel</div>
    </body>
    </html>