CODEWITHSUNDEEP
fullcalendar
Eladerezador
Eladerezador

Reputation: 1301

Full calendar - Style cell date of day

I have done a calendar with plugin full-calendar. I want to change the style of today date.

.fc-unthemed .fc-today {
    color: #fff !important;
    background-color: red;
}

But the background color of the cell, have to be like the next image.

enter image description here

How could do it? Thanks

Upvotes: 0

Views: 1842

Answers (1)

Pitchai P
Pitchai P

Reputation: 1317

You can apply CSS to create border like a triangle and show it at the top-right corner. 

.fc-day.fc-today {
    position: relative;
}

.fc-day.fc-today::before,
.fc-day.fc-today::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    border-color: transparent;
    border-style: solid;
}   

.fc-day.fc-today::before {
    border-width: 1.5em;
}

.fc-day.fc-today::after {
    border-radius: 0;
    border-width: 1.5em;
    border-right-color: red;
    border-top-color: red;
}

The output will be shown like below.

enter image description here

Upvotes: 4

Related Questions