json - 如何在全日历中将事件显示为彩色点？

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

Answer 3

backgroundColor: 'red' // override!

events: [
           {
               title: 'Title ',
               constraint: 'availableForMeeting',
               start: new Date(),
               end: new Date(),
               allDay: true,
               url: '/x/1/edit',
               backgroundColor: 'red' // override!
           },
]