我使用完整的日历库,我有这样的情况,即使较长的名称不适合一天字段的内容。
要查看完整的事件名称,我解决了前六列:我用:hover伪类改变了位置,这使得全名可见。
.fc-daygrid-event {
&:hover {
position: absolute;
}
}
但对最后一栏“哭泣”不起作用。对于最后一列,我想使用属性white-space:unset。它将以不同的方式工作,但提供功能。我尝试了3种方法来指向:last-child元素,但是没有成功。你能建议我如何选择它吗?
import styled from '@emotion/styled';
.fc-day-grid .fc-row td:last-child {
background-color: yellow;
&:hover {
white-space: unset;
}
}
.fc-day .fc-day-sun .fc-day-future .fc-daygrid-day {
background-color: yellow;
&:last-child {
:hover {
white-space: unset;
}
}
}
.fc-day-grid .fc-row td:nth-of-type(7) {
background-color: yellow;
&:hover {
white-space: unset;
}
}
或者你可以建议另一种解决方案如何修复这种行为?
出于样式化的目的,我使用了emotion/react库:
<StyledCalendar>
<FullCalendar
plugins={[dayGridPlugin]}
initialView="dayGridMonth"
buttonText={{ today: t('calendar.today') }}
titleFormat={(date) => monthYearTitleHandler(date)}
dayHeaderContent={({ date }) => calendarDayNameHandler(date)}
displayEventEnd
displayEventTime
events={mockEvents}
eventTimeFormat={{
hour: '2-digit',
minute: '2-digit',
meridiem: false,
}}
/>
</StyledCalendar>
1条答案
按热度按时间anauzrmj1#
要使用fullcalendar库在悬停时显示完整的日历条目,请使用
如果你想定位一个特定的列(例如第二列),你可以使用