responsive-calendar：show dayEvents

我正在使用这个基于jquery的日历http://w3widgets.com/responsive-calendar/ ，我想在活动当天hover显示当天的事件。

问题是：插件的文档制作精良并解释了所有内容……除了如何执行此操作。

这是如何在代码中添加dayEvents的示例：

events: { "2013-04-30": { "number": 2, "badgeClass": "badge-warning", "url": "http://w3widgets.com/responsive-calendar", "dayEvents": [ { "name": "Important meeting", "hour": "17:30" }, { "name": "Morning meeting at coffee house", "hour": "08:15" } ] }, . . . 

}

我做了很多测试，但直到现在，我还没有找到关于这个问题的线索。

任何帮助将非常感谢。

Answer 1

我最近与Responsive Calender合作，提出了以下解决方案。 希望它可以帮助您想象如何获得必要的价值。 我希望你会看到如何添加额外的数据。

• 代码： http ： //codepen.io/alenabdula/pen/OPEpGL
• 演示页面： http ： //codepen.io/alenabdula/full/OPEpGL/

 (function($) { /** * Fade Out Modal */ function fadeOutModalBox(num) { setTimeout(function(){ $(".responsive-calendar-modal").fadeOut(); }, num); } /** * Helper Function */ function zero(num) { if (num < 10) { return "0" + num; } else { return "" + num; } } /** * Remove Modal */ function removeModalBox() { $(".responsive-calendar-modal").remove(); } /** * Calender */ $(document).ready(function() { var $cal = $('.responsive-calendar'); $cal.responsiveCalendar({ events : { "2015-02-26" : { "number" : 2, "badgeClass" : "badge-success", "url" : "http://codepen.io/alenabdula/pen/OPEpGL", "dayEvents" : [ { "title" : "Help friend developer", "status" : "Urgent", "time" : "10:30PM" }, { "title" : "Shake it salt shaker!", "status" : "Chill", "time" : "10:45PM" } ] }, }, /* end events */ onActiveDayHover: function(events) { var $today, $dayEvents, $i, $isHoveredOver, $placeholder, $output; $i = $(this).data('year')+'-'+zero($(this).data('month'))+'-'+zero($(this).data('day')); $isHoveredOver = $(this).is(":hover"); $placeholder = $(".responsive-calendar-placeholder"); $today= events[$i]; $dayEvents = $today.dayEvents; $output = '
'; $.each($dayEvents, function() { $.each( $(this), function( key ){ $output += '
Title: '+$(this)[key].title+'
' + '
Status: '+$(this)[key].status+'
'+$(this)[key].time+'
'; }); }); $output + '
'; if ( $isHoveredOver ) { $placeholder.html($output); } else { fadeOutModalBox(500); // removeModalBox(); } }, }); /* end $cal */ }); /* end $document */ }(window.jQuery || window.$)); 

Answer 2

你应该尝试这个。 它会帮助你，你必须改变你想在日历中显示的参数。

 $.ajax({ url: localURL+"admin/returncalendardata", type: "POST", dataType: "text", success: function (result) { var s = result; var myObject = eval('(' + s + ')'); var str = ""; for(j = 0;j < myObject.length; j++){ if(j==0){ str += ' "'+myObject[j]["start"]+'":{"number": "'+myObject[j]["comp_symbol"]+'", "url": "'+url+'/stockmarket/admin/details/'+myObject[j]["id"]+'"}'; }else{ str += ',"'+myObject[j]["start"]+'":{"number": "'+myObject[j]["comp_symbol"]+'", "url": "'+url+'/stockmarket/admin/details/'+myObject[j]["id"]+'"}'; } }; var dates= "{"+str+"}"; //alert(dates); $(".responsive-calendar").responsiveCalendar({ time: '2017-03', events: JSON.parse(dates) }); }});