Question

我正在使用这个基于jquery的日历http://w3widgets.com/responsive-calendar/，并且我希望在活动日期间显示悬停的日期事件。

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

这是如何在代码中添加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 = '<div class="responsive-calendar-modal">';
        $.each($dayEvents, function() {
          $.each( $(this), function( key ){
            $output += '<h1>Title: '+$(this)[key].title+'</h1>' + '<p>Status: '+$(this)[key].status+'<br />'+$(this)[key].time+'</p>';
          });
        });
        $output + '</div>';
        
        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)   
        });          
    }});

响应日历：显示日活动

2 个答案: