JSFiddle - React, Tailwind, and code Playground

styling events

by brasofilo

HTML

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.0.3/fullcalendar.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.7.0/moment.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.0.3/fullcalendar.min.js"></script>
<h3>Styling events</h3>

<div id="calendar"></div>

CSS

body {
    font-family:sans-serif;
    color: #eee;
}
h3 {
    background-color: #ddd;
    margin:0;
    padding: 3px 0 5px;
    text-align: center;
    color: #fff;
}
.fc-event-time, .fc-event-title {
    padding: 0 1px;
    float: left;
    clear: none;
    margin-right: 10px;
}
.main {
    border: 5px solid #eee;
    margin: 5px;
    padding: 3px
}
.blue {
    background: #87e0fd;
    background: -moz-linear-gradient(top, #87e0fd 0%, #53cbf1 40%, #05abe0 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #87e0fd), color-stop(40%, #53cbf1), color-stop(100%, #05abe0));
    background: -webkit-linear-gradient(top, #87e0fd 0%, #53cbf1 40%, #05abe0 100%);
    background: -o-linear-gradient(top, #87e0fd 0%, #53cbf1 40%, #05abe0 100%);
    background: -ms-linear-gradient(top, #87e0fd 0%, #53cbf1 40%, #05abe0 100%);
    background: linear-gradient(to bottom, #87e0fd 0%, #53cbf1 40%, #05abe0 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#87e0fd', endColorstr='#05abe0', GradientType=0);
}
.blue .fc-event-title {
    font-size: 2em;
    color: #EEE;
    text-shadow: 1px 2px 3px #300000;
}
.blue .desc {
    font-size:.8em;
    float:left;
    clear:both;
}
.red {
    background-color: #f00;
}
.red .fc-event-title {
    font-family: Tahoma;
    font-size: 1.2em
}

JavaScript

$(document).ready(function () {
    $('#calendar').fullCalendar({
        header: { left: '', center: '', right: '' },
        defaultDate: '2014-06-12',
        eventRender: function (event, element) {
            if (event.description) element.append("<div class='desc'>" + event.description) + "</div>";
            element.addClass(event.class)
        },
        events: [{
            title: 'Blue Event',
            start: '2014-06-01',
            description: 'Lorem ipsum lorem ipsum',
            class: 'blue main'
        }, {
            title: 'Blue Event',
            start: '2014-06-01',
            description: 'Lorem ipsum lorem ipsum',
            class: 'blue main'
        }, {
            title: 'Long Event',
            start: '2014-06-07',
            end: '2014-06-10',
            class: 'red main'
        }, {
            title: 'Meeting',
            start: '2014-06-12T10:30:00',
            end: '2014-06-12T12:30:00',
            class: 'blue main'
        }, {
            title: 'Lunch',
            start: '2014-06-12T12:00:00',
            class: 'blue main'
        }, {
            title: 'Birthday Party',
            start: '2014-06-13T07:00:00',
            class: 'red main'
        }, ],
    });
});