fullcalendarでイベントをカラードットで表示する方法は？

Question

私はfullcalendar3.2.0プラグインを使用しました。それは素晴らしい仕事です、私はJSONからデータを読みます。 上記の画像のようにすべてのイベントをカラードットで表示する必要があります。これをカスタマイズする方法親切にこれを見てください。

Answer 1

CSSは、私はここに、私のプロジェクトの一つに同じ問題を抱えてあなたhttps://jsfiddle.net/2kov1y7v/

a.fc-event { 
    border-radius: 10px; /* round edges */ 
    width: 15px; /* fixed width */ 
    color: transparent; /* hide text */ 
} 


/* inline the tr's for events */ 
div.fc-content-skeleton > table > tbody > tr { 
    display: inline-block; 
} 

Answer 2

のために働くことが私のソリューションです：

ドット効果のため

$('#calendar').fullCalendar({ 
    .... 
    lazyFetching: false, 
    eventSources: [ 
     { 
      url : '08mn7li1nmriqc6sktvjq6gluk@group.calendar.google.com', 
      color: '#ea4647', 
      className: 'holidays-event holidays-french-event' 
     }, { 
      url: 'fr.french#holiday@group.v.calendar.google.com', 
      color: '#06b981', 
      className: 'holidays-event holidays-day-event' 
     } 
    ], 
    eventAfterAllRender: function() { 
     var view = $('#calendar').fullCalendar('getView'); 
     if (view.type == 'basicWeek' || view.type == 'basicDay') { 
      return false; 
     } 

     // reset calendar dots 
     $('#calendar').find('.fc-day-number').find('.fc-event').remove(); 

     // manage dots 
     var events = $('#calendar').fullCalendar('clientEvents'); 
     for (var i = 0; i < events.length; i++) { 
      var event = events[i]; 
      if (event.source.url === '08mn7li1nmriqc6sktvjq6gluk@group.calendar.google.com') { 
       // build dots holidays for specific source 
       var name = event.title; 
       var now = event.start.clone(); 

       // loop through event dates 
       while (now.isBefore(event.end)) { 
        var $dot = $('<span class="fc-day-grid-event fc-event fc-start fc-not-end dot-event" title=""></span>'); 

        // add bootstrap popover for dot 
        $dot.popover({ 
         'content': name, 
         'trigger': 'hover', 
         'container': '#calendar', 
         'placement': 'bottom' 
        }); 

        // append to calendar day 
        $('.fc-day-number[data-date="'+ now.format('YYYY-MM-DD') +'"]').append($dot); 
        now.add(1, 'days'); 
       } 
      } 
     } 
    } 
}); 

とCSS：

#calendar .dot-event { 
    width: 20px; 
    height: 20px; 
    border-radius: 50%; 
    display: inline-block; 
    margin-left: 10px; 
    vertical-align: text-bottom; 
}