JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.11.1/moment.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.4.0/fullcalendar.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.4.0/fullcalendar.js"></script>
<div id='calendar'>

</div>

CSS

.fc-event-container {
  background-color: rgba(2, 2, 2, 0.9);
  float: left;
  Skew -webkit-transform: skew(-60deg);
  -moz-transform: skew(-60deg);
  -o-transform: skew(-60deg);
  transform: skew(-60deg);
}

.fc-content {
  Skew -webkit-transform: skew(60deg);
  -moz-transform: skew(60deg);
  -o-transform: skew(60deg);
  transform: skew(60deg);
}

JavaScript

/*
http://stackoverflow.com/questions/17947565/how-to-skew-element-but-keep-text-normal-unskewed
*/

$('#calendar').fullCalendar({
  defaultDate: '2016-01-01',
  events: [{
    start: '2016-01-03',
    end: '2016-01-07',
    title: 'Event 1'
  }]
});