FullCalendar новое событие изменить цвет

Question

Так что я использую фрагмент полного календаря от creative-tim и, судя по всему, добавление нового события не показывает какого-либо цветового выделения. (Я предполагаю, что с другим полным календарем то же самое).

Как мне сделать так, чтобы он автоматически генерировал разные цвета для каждой новой записи события?

Вот часть css и jquery

.fc-event-container > * {
    z-index: 8;
}

.fc-event-container > .ui-draggable-dragging,
.fc-event-container > .ui-resizable-resizing {
    z-index: 9;
}

.fc-event {
    border: 1px solid #FFF; /* default BORDER color */
    background-color: #FFF; /* default BACKGROUND color */
    color: #919191; /* default TEXT color */
    font-size: 12px;
    cursor: default;
}

    .fc-event.chill {
        background-color: #f3dcf8;
    }

    .fc-event.info {
        background-color: #c6ebfe;
    }

    .fc-event.important {
        background-color: #FFBEBE;
    }

    .fc-event.success {
        background-color: #BEFFBF;
    }

    .fc-event:hover {
        opacity: 0.7;
    }

a.fc-event {
    text-decoration: none;

Также здесь:

    function slotSegHtml(event, seg) {
        var html = "<";
        var url = event.url;
        var skinCss = getSkinCss(event, opt);
        var classes = ['fc-event', 'fc-event-vert'];
        if (isEventDraggable(event)) {
            classes.push('fc-event-draggable');
        }
        if (seg.isStart) {
            classes.push('fc-event-start');
        }
        if (seg.isEnd) {
            classes.push('fc-event-end');
        }
        classes = classes.concat(event.className);
        if (event.source) {
            classes = classes.concat(event.source.className || []);
        }
        if (url) {
            html += "a href='" + htmlEscape(event.url) + "'";
        } else {
            html += "div";
        }
        html +=
            " class='" + classes.join(' ') + "'" +
            " style=" +
            "'" +
            "position:absolute;" +
            "top:" + seg.top + "px;" +
            "left:" + seg.left + "px;" +
            skinCss +
            "'" +
            ">" +
            "<div class='fc-event-inner'>" +
            "<div class='fc-event-time'>" +
            htmlEscape(formatDates(event.start, event.end, opt('timeFormat'))) +
            "</div>" +
            "<div class='fc-event-title'>" +
            htmlEscape(event.title || '') +
            "</div>" +
            "</div>" +
            "<div class='fc-event-bg'></div>";
        if (seg.isEnd && isEventResizable(event)) {
            html +=
                "<div class='ui-resizable-handle ui-resizable-s'>=</div>";
        }
        html +=
            "</" + (url ? "a" : "div") + ">";
        return html;
    }