153 lines
3.4 KiB
CSS
153 lines
3.4 KiB
CSS
.calendar-container {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
overflow: auto;
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
.calendar-grid {
|
|
width: 100%;
|
|
height: calc(100vh - 50px); /* Adjust based on your header height */
|
|
display: grid;
|
|
grid-template-columns: repeat(7, 1fr); /* 7 days */
|
|
}
|
|
|
|
.calendar-header {
|
|
position: sticky;
|
|
top: 0;
|
|
background-color: white;
|
|
z-index: 10;
|
|
}
|
|
|
|
.calendar-time-slot {
|
|
min-height: 50px; /* Adjust as needed */
|
|
}
|
|
|
|
/* ToastUI Calendar Event Styling */
|
|
.toastui-calendar-events {
|
|
margin-right: 8px;
|
|
text-wrap: auto;
|
|
}
|
|
|
|
.toastui-calendar-event-time {
|
|
position: relative;
|
|
overflow: visible !important;
|
|
min-height: 24px !important;
|
|
cursor: pointer;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.toastui-calendar-event-time:hover {
|
|
transform: scale(1.02);
|
|
z-index: 1000 !important;
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
|
border-radius: 4px !important;
|
|
}
|
|
|
|
.toastui-calendar-event-time-content {
|
|
height: 100% !important;
|
|
overflow: visible !important;
|
|
padding: 2px 4px !important;
|
|
text-wrap: auto;
|
|
word-wrap: break-word;
|
|
line-height: 1.1 !important;
|
|
}
|
|
|
|
.toastui-calendar-template-time {
|
|
font-size: 10px !important;
|
|
line-height: 1.1 !important;
|
|
text-wrap: auto;
|
|
word-wrap: break-word;
|
|
white-space: normal !important;
|
|
overflow: visible !important;
|
|
display: block !important;
|
|
}
|
|
|
|
.toastui-calendar-template-time strong {
|
|
font-size: 10px !important;
|
|
font-weight: 600;
|
|
display: block;
|
|
margin-bottom: 1px;
|
|
}
|
|
|
|
.toastui-calendar-template-time span {
|
|
font-size: 9px !important;
|
|
line-height: 1.0 !important;
|
|
text-wrap: auto;
|
|
word-wrap: break-word;
|
|
white-space: normal !important;
|
|
display: block !important;
|
|
}
|
|
|
|
/* Hover tooltip effect */
|
|
.toastui-calendar-event-time:hover::after {
|
|
content: "Click to edit reservation";
|
|
position: absolute;
|
|
bottom: 100%;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
background-color: rgba(0, 0, 0, 0.9);
|
|
color: white;
|
|
padding: 8px 12px;
|
|
border-radius: 6px;
|
|
font-size: 11px;
|
|
white-space: nowrap;
|
|
z-index: 2000;
|
|
pointer-events: none;
|
|
opacity: 0;
|
|
animation: tooltipFadeIn 0.3s ease forwards;
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
.toastui-calendar-event-time:hover::before {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: calc(100% - 6px);
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
border: 6px solid transparent;
|
|
border-top-color: rgba(0, 0, 0, 0.9);
|
|
z-index: 2000;
|
|
pointer-events: none;
|
|
opacity: 0;
|
|
animation: tooltipFadeIn 0.3s ease forwards;
|
|
}
|
|
|
|
@keyframes tooltipFadeIn {
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
/* Improve visibility for small events */
|
|
.toastui-calendar-event-time[style*="height: calc(1%"] .toastui-calendar-template-time strong,
|
|
.toastui-calendar-event-time[style*="height: calc(2%"] .toastui-calendar-template-time strong {
|
|
display: none; /* Hide time for very small events */
|
|
}
|
|
|
|
.toastui-calendar-event-time[style*="height: calc(1%"] .toastui-calendar-template-time span,
|
|
.toastui-calendar-event-time[style*="height: calc(2%"] .toastui-calendar-template-time span {
|
|
font-size: 8px !important;
|
|
line-height: 1.0 !important;
|
|
}
|
|
|
|
/* Ensure minimum visibility */
|
|
.toastui-calendar-event-time {
|
|
min-width: 60px !important;
|
|
}
|
|
|
|
/* Better text contrast */
|
|
.toastui-calendar-event-time[style*="background-color: rgb(66, 109, 215)"] {
|
|
color: white !important;
|
|
}
|
|
|
|
.toastui-calendar-event-time[style*="background-color: rgb(66, 109, 215)"] .toastui-calendar-template-time {
|
|
color: white !important;
|
|
}
|