如何使用基思木日历突出显示特定日期的日期并显示悬停事件?

时间:2014-02-10 05:39:06

标签: javascript jquery calendar

我正在使用基斯木日历。在这里,我有数据库中的某些日期,我想突出显示事件并在悬停时显示事件。我该怎么做我尝试从jquery日历示例中跟随示例,但无济于事。我现在尝试跟进。

    $.ajax({
                url : '<?php echo base_url('event_date') ?>',
                type: 'POST',
                data: {lang_type : lang_id},
                datatype : 'JSON',
                success : function(data){
                    var events = JSON.parse(data);
                    console.log(events);
    $('#englishPicker').calendarsPicker({
                            calendar: $.calendars.instance('gregorian', 'en'),
                            inline: true,
                            useMouseWheel: false,
                            nextText : 'Next',
                            prevText: 'Previous',
                            todayText: 'Today',
                            onDate : function(date) {
                                var result = [true, '', null];
                                var matching = $.grep(events, function(event) {
                                    return event.date.valueOf() === date.valueOf();
                                });
                                if (matching.length) {
                                    result = [true, 'highlight', null];
                                }
                                return result;
                            },
                            onSelect: function(dateText) {
                                var date,
                                    selectedDate = new Date(dateText),
                                    i = 0,
                                    event = null;
                                while (i < events.length && !event) {
                                    date = events[i].date;
                                    if (selectedDate.valueOf() === date.valueOf()) {
                                        event = events[i];
                                    }
                                    i++;
                                }
                                if (event) {
                                    alert(event.event);
                                }else{
                                    alert('no event');
                                }
                            }
                        })
    },
                error :  function(xhr, status, error){
                    alert(error);
                    return false;
                }
            })
console.events returns 
[Object { event="event 1", date="2014-02-03"}, Object { event="event 2", date="2014-02-06"}, Object { event="event at falgun", date="2014-02-14"}, Object { event="dfasf", date="2014-02-07"}]

我如何解决这个问题?欢迎任何帮助/建议。谢谢。

1 个答案:

答案 0 :(得分:1)

找到问题的解决方案。只需按如下方式编辑代码:

$.ajax({
            url : '<?php echo base_url('event_date') ?>',
            type: 'POST',
            data: {lang_type : lang_id},
            datatype : 'JSON',
            success : function(data){
                var events = JSON.parse(data);
                console.log(events);
$('#englishPicker').calendarsPicker({
                        calendar: $.calendars.instance('gregorian', 'en'),
                        inline: true,
                        useMouseWheel: false,
                        nextText : 'Next',
                        prevText: 'Previous',
                        todayText: 'Today',
                        onDate: function(date, inMonth) {
                            if (inMonth) { 
                                for (i = 0; i < events.length; i++) { 
                                    var a = events[i].split('-');
                                    if (date.year() == a[0] && date.month() == a[1] && date.day() == a[2]) { 
                                        return {selectable: true, dateClass: 'highlight-custom', title: a[3]};
                                    } 
                                } 
                            } 
                            return [true, '']; 
                        }
                    })
},
            error :  function(xhr, status, error){
                alert(error);
                return false;
            }
});


console.log(events) give data as
["2014-02-03-event 1",
 "2014-02-06-event 2",
 "2014-02-14-event at falgun",
 "2014-02-07-dfasf"]