FullCalendar Scheduler : Parallelogram Shaped Events

Question

I would like to change the event shape from a square to a parallelogram, see image below for an example:

I tried changing the 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); } 

But it distorted the event container, see image

Answer 1

Using info from here How to skew element but keep text normal (unskewed)

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

Seems to work

https://jsfiddle.net/qjLs3tfa/

The float: left may cause it to shrink the event though as seen in month view in fiddle