.calendar .day {
    width: 14.28%; /* 100%/7  */
    height: 2.5vw;
   
}

.calendar .bezetEinde {
    background: linear-gradient(to right bottom, red 50%, transparent 50%);
}

.calendar .bezetBegin {
    background: linear-gradient(to left top, red 50%, transparent 50%);
}

.calendar .optieEinde {
    background: linear-gradient(to right bottom, orange 50%, transparent 50%);
}

.calendar .optieBegin {
    background: linear-gradient(to left top, orange 50%, transparent 50%);
}

.calendar .bezetBegin_bezetEinde {
    background: linear-gradient(to left top, red 50%, transparent 50%), linear-gradient(to right bottom, red 50%, transparent 50%);
}
.calendar .optieBegin_bezetEinde {
    background: linear-gradient(to left top, orange 50%, transparent 50%), linear-gradient(to right bottom, red 50%, transparent 50%);
}
.calendar .bezetBegin_optieEinde {
    background: linear-gradient(to left top, red 50%, transparent 50%), linear-gradient(to right bottom, orange 50%, transparent 50%);
}
.calendar .optieBegin_optieEinde {
    background: linear-gradient(to left top, orange 50%, transparent 50%), linear-gradient(to right bottom, orange 50%, transparent 50%);
}

.calendar .bezetC {
    background-color: red;
}

.calendar .optieC {
    background-color: orange;
}

.calendar .vrijC {
    background-color: green;
}

.calendar .greyC {
    background-color: lightgray;
}

.bezet{
    color: red;
}

.optie{
    color: orange;
}

.vrij{
    color: green;
}