Two lines height of events

[dbellio]

Hi can you change heigth of the events to two lines because if you insert start and end time you can't read start of title

[matthiku]

can you show your component code as I'm not even getting one line of my events!
Also, I guess you have modified the predefined CSS, looks really great!

[Trekels]

@matthiku Could you open a new issue with some example code, since this seems not related to the styling.

[vitorpre]

It's just css. Try mine and adapt for your porposes

`.vue-calendar {
display: grid;
grid-template-rows: 10% 90%;
// background: #fff;
margin: 0 auto;
background: #1abc9c;
}
.calendar-header {
align-items: center;.
background: #1abc9c;
color: white;
font-size: 20px;
text-transform: uppercase;
letter-spacing: 3px;
}
.header-left,
.header-right {
flex: 1;
}
.header-center {
flex: 3;
text-align: center;
padding: 10px;
}
.title {
margin: 0 5px;
}
.next-month,
.prev-month {
cursor: pointer;
}
.calendar-body {
display: grid;
grid-template-rows: 5% 95%;
}
.days-header {
display: grid;
grid-auto-columns: 1fr;
grid-template-areas: "a a a a a a a";
border-top: 1px solid #e0e0e0;
border-left: 1px solid #e0e0e0;
border-bottom: 1px solid #e0e0e0;
background-color: #ddd;
}
.days-body {
display: grid;
grid-template-rows: auto;
font-size:12px;
color: #777;
background: #eee;

}
.day-number {
text-align: right;
margin-right: 10px;
}
.day-label {
text-align: center;
border-right: 1px solid #e0e0e0;
}
.week-row {
display: grid;
grid-template-areas: "a a a a a a a";
grid-row-gap: 5px;
grid-auto-columns: 1fr;
border-left: 1px solid #e0e0e0;
}
.week-day {
padding: 4px;
border-right: 1px solid #e0e0e0;
border-bottom: 1px solid #e0e0e0;
}
.week-day.disabled {
background-color: #f5f5f5;
}
.week-day.not-current > .day-number {
color: #c3c3c3;
}
.week-day.today > .day-number {
font-weight: 700;
color: red;
}
.events {
font-size: 12px;
cursor: pointer;
padding: 0 0 0 4px;
}
.events .event {
// height: 18px;
line-height: 18px;
overflow: hidden;
// white-space: nowrap;
text-overflow: ellipsis;
margin: 0 4px 2px 0;
// color: rgba(0, 0, 0, 0.87);
// background-color: #d4dcec;
color: white;
background-color: #1abc9c;
text-align: center;
padding: 2px 4px;
}
.events .more-link {
color: rgba(0, 0, 0, 0.38);
}
`