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; 
}