Как выделить несколько дат jQuery ui Datepicker

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114

<?php
  // Плучаем данные из БД
  $database->setQuery( 'SELECT * FROM tbl_news WHERE published = 1 ORDER BY date' );
  $rows = $database->loadObjectList();

  // Формируем массив дат и массив событий
  $aDates = array();
  $aEvents = array();
  $sLastDate = '';
  foreach($rows as $row)
  {
    // Приводим дату в "русский вид", для этого можно воспользоватся любой удобной библиотекой
    $sDate = c_date::mySQL2ru($row->date);

    if($sLastDate != $sDate)
    {
      $aDates[] = $sDate;
      $sLastDate = $sDate;
    }

    $aEvents[$sDate] = $row->id_event;
  }

?>

<div class="calendar">
<script type="text/javascript">

// Функция аналогичная php функции inArray
inArray = Array.prototype.indexOf ?
    function (arr, val) {
        return arr.indexOf(val) != -1
    }:
    function (arr, val) {
        var i = arr.length
        while (i--) {
            if (arr[i] === val) return true
        }
        return false
    }

    // Приводим даты в "русский вид" ("15.04.2013"))
    function makeCalDate(date)
    {
        var d = date.getDate().toString();
        var m = 1 + date.getMonth();
        var y = date.getFullYear().toString();
        if(d.length < 2)
        {
            d = "0" + d;    
        }
        m = m.toString();
        if(m.length < 2)
        {
            m = "0" + m;    
        }

        var Date2 = d +"."+ m +"."+ y;
                            
        return Date2;                        
    }

var aDates = <?= json_encode($aDates);?>;
var aCats = <?= json_encode($aCats);?>;


$(document).ready(function(){

    $( "#calendar_dialog" ).dialog({
        autoOpen: false,
        show: {
            effect: "blind",
            duration: 1000
        },
        hide: {
            effect: "explode",
            duration: 1000
        }
    });

    $( "#datepicker" ).datepicker({
            beforeShowDay: function(date)
            {                            
                // Если на данную дату есть новости - добавляем класс для подсветки
                if(inArray(aDates, makeCalDate(date)))
                {
                    return[true, "calendar_actdate", "Нажми меня"];
                }
                else
                {
                    return[true, ""];                                
                }
            },
            onSelect: function(dateText, inst)
            {
                // Если есть событие, то открываем окно
                if(inArray(aDates, dateText))
                {
                    $( "#calendar_dialog" ).dialog( "open" );
                }
            }
    });
});
</script>


<div id="datepicker"></div>

<div id="calendar_dialog" title="За эту дату есть:">
    <p class="cld_lnk_news">
        <a href="/news/">Новости</a>
    </p>
</div>
</div>