Files
old-zsterminator/app/assets/stylesheets/fullscreen_calendar.css
2025-03-03 19:38:57 +01:00

113 lines
2.3 KiB
CSS

/* Force fullscreen for calendar elements */
.fc, /* FullCalendar main container */
.calendar-container,
.simple-calendar,
.calendar,
[data-controller="calendar"],
#calendar,
.calendar-wrapper {
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
overflow: auto !important;
}
/* Force table and grid elements to stretch */
.fc-view-container,
.fc-view,
.fc-time-grid,
.fc-slats,
.fc-content-skeleton,
table.calendar-table,
.calendar-grid,
.calendar-row,
.time-slot-container {
width: 100% !important;
max-width: 100% !important;
}
/* If there's a container around the calendar */
body > div.container,
main.container,
div.container-fluid,
.content-wrapper,
#main-content {
width: 100% !important;
max-width: 100% !important;
padding: 0 !important;
margin: 0 !important;
}
/* Fix for responsive issues */
@media (min-width: 768px) {
.container, .container-md, .container-sm {
max-width: 100% !important;
}
}
@media (min-width: 992px) {
.container, .container-lg, .container-md, .container-sm {
max-width: 100% !important;
}
}
@media (min-width: 1200px) {
.container, .container-lg, .container-md, .container-sm, .container-xl {
max-width: 100% !important;
}
}
/* Reset container constraints */
body.calendar {
margin: 0;
padding: 0;
overflow: hidden;
}
body.calendar main {
height: 100vh !important; /* Fix the 100vw typo in the layout */
width: 100vw !important;
margin: 0 !important;
padding: 0 !important;
max-width: none !important;
}
/* Make the calendar container fill the space */
.w-full, .min-w-full {
width: 100vw !important;
max-width: 100vw !important;
}
div[data-controller="main-calendar"] {
height: 100vh !important; /* Was 90vh */
width: 100vw !important;
padding: 0 !important;
margin: 0 !important;
}
#main-calendar {
width: 100% !important;
height: 100% !important;
}
/* Toast UI Calendar specific fixes */
.toastui-calendar-layout,
.toastui-calendar-week-view,
.toastui-calendar-panel,
.toastui-calendar-timegrid-container {
width: 100% !important;
max-width: 100% !important;
}
/* Remove unnecessary padding */
.container, .mx-auto {
padding: 0 !important;
margin: 0 !important;
max-width: none !important;
width: 100vw !important;
}
.flex.justify-between {
padding: 0 1rem;
}