vue2-calendar

vue2-calendar copied to clipboard

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

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!

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

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); } `