Creating custom shapes for event date

Event calendars & schedulers
1

Hello,
We are trying to create more custom shapes for marked calendar other than rectangle, dots or triangles.
We try to create classes to utilize in “markCssClass”, but it does not seem to work as intended.
For example, the following is creating a diamond shape by rotating the original shape, but it is not really clear once displayed. (It looks like once rotated to be a diamond, a part of the shape is cut, so we had to reduce with/height, and then it looks not like a diamond.)

Is there better way to do this?
Or can we “override” the CSS to create our own shape like pentagon?
Thank you for your help!

.diamond-mark {
content: ‘’;
-webkit-transform: rotate(45deg) !important;
-ms-transform: rotate(45deg) !important;
transform: rotate(45deg) !important;
-webkit-transform-origin: center !important;
-ms-transform-origin: center !important;
transform-origin: top !important;
border-radius: 0 !important;
position: relative !important;
width: 6px !important;
height: 6px !important;
position: relative !important;
top: 1px !important;
left: 0px !important;
}

2

Hi Chung,

In order to make the mark fit, you have to increase the height of the calendar cell and the container of the marks, for example:

.mbsc-calendar-marks {
  height: 25px;
}
.mbsc-calendar-cell {
  height: 55px;
}
3

That works.
Thank you!