responsive-calendar: show dayEvents

问题:

I'm using this jquery based calendar http://w3widgets.com/responsive-calendar/ and I want to show the day events on hover over active day.

The problem is: the documentation of the plugin is well made and explain everything... except how to do this.

This is the example of how the dayEvents are added in the code:

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" 
    }
  ]
},
. . .

}

I have made a lot of tests, but until now, I don´t find a clue about this problem.

Any help will be very appreciated.

回答1:

I recently worked with Responsive Calender and come up with following solution. Hopefully it helps you visualize how to get necessary values. And I hope you'll see how to even add additional data.

• Code: http://codepen.io/alenabdula/pen/OPEpGL
• Demo Page: 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.$));

回答2:

You should try this one. it will help you, you have to change the parameter which you want to display in calender.

$.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)   
        });          
    }});