0

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

enter image description here

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

enter image description here

Ronak Shah
  • 377,200
  • 20
  • 156
  • 213
user2658814
  • 41
  • 6

1 Answers1

0

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

Community
  • 1
  • 1
smcd
  • 3,135
  • 2
  • 16
  • 27