javascript - 如何突出显示特定日期的日期并使用 keith-wood 日历在悬停时显示事件?

标签 javascript jquery calendar

我正在使用 keith-wood 日历。在这里,我有来自数据库的某些日期,其中包含我想突出显示并在悬停时显示事件的事件。我该怎么做。我尝试了以下 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"}]

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

最佳答案

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

$.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"]

关于javascript - 如何突出显示特定日期的日期并使用 keith-wood 日历在悬停时显示事件?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21669838/

相关文章:

javascript - 需要淡出 div 的帮助

javascript - 只删除普通文本,但不删除 span 元素

javascript - 停止传播不起作用,避免 child 点击触发其他功能

javascript - 为上一个和下一个分配图像源

wpf - 如何在 WPF 的日历控件中突出显示可用日期?

android - -1469913 天计算 Android 中重复发生的事件

Javascript 计数器增量不起作用

javascript - 怎么画同心圆嵌套图?使用 HTML 和 CSS

javascript - 一次显示验证消息(验证摘要)而不是一个一个地显示 jqgrid?

java - 如何使用日历秒到时间并将值传递回函数