Janus007/Calendar
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Makes calendar week view width dynamic

Browse source 
Changes the calendar week view to dynamically adjust its width based on the `--day-column-min-width` CSS variable.
This allows for more flexible and responsive layouts, avoiding fixed widths.
Also, the base calendar CSS file is now included in the index file.
This commit is contained in:
Janus Knudsen 2025-08-02 00:04:45 +02:00
parent 26a4544c09
commit c510994ca2
3 changed files with 9 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

12
wwwroot/css/calendar-layout-css.css
View file

@ -214,8 +214,8 @@ swp-hour-marker::after {
/* Week header */ /* Week header */
swp-week-header { swp-week-header {
display: grid; display: grid;
grid-template-columns: repeat(7, minmax(250px, 1fr)); grid-template-columns: repeat(7, minmax(var(--day-column-min-width), 1fr));
min-width: 1750px; /* Match day-columns width */ min-width: calc(var(--week-days) * var(--day-column-min-width)); /* Dynamic width */
background: var(--color-surface); background: var(--color-surface);
border-bottom: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border);
position: sticky; position: sticky;
@ -307,7 +307,7 @@ swp-grid-lines {
left: 0; left: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
min-width: 1750px; /* Match day-columns width */ min-width: calc(var(--week-days) * var(--day-column-min-width)); /* Dynamic width */
pointer-events: none; pointer-events: none;
z-index: var(--z-grid); z-index: var(--z-grid);
background-image: repeating-linear-gradient( background-image: repeating-linear-gradient(
@ -324,14 +324,14 @@ swp-day-columns {
position: absolute; position: absolute;
inset: 0; inset: 0;
display: grid; display: grid;
grid-template-columns: repeat(7, minmax(250px, 1fr)); grid-template-columns: repeat(7, minmax(var(--day-column-min-width), 1fr));
min-width: 1750px; /* 7 * 250px = force horizontal scroll */ min-width: calc(var(--week-days) * var(--day-column-min-width)); /* Dynamic width */
} }
swp-day-column { swp-day-column {
position: relative; position: relative;
border-right: 1px solid var(--color-grid-line); border-right: 1px solid var(--color-grid-line);
min-width: 250px; min-width: var(--day-column-min-width);
} }
swp-day-column:last-child { swp-day-column:last-child {

2
wwwroot/css/calendar.css
View file

@ -10,6 +10,8 @@
--hour-height: 60px; --hour-height: 60px;
--minute-height: 1px; --minute-height: 1px;
--snap-interval: 15; --snap-interval: 15;
--day-column-min-width: 250px;
--week-days: 7;
/* Time boundaries */ /* Time boundaries */
--day-start-hour: 7; --day-start-hour: 7;

1
wwwroot/index.html
View file

@ -6,6 +6,7 @@
<title>Calendar Plantempus - Week View</title> <title>Calendar Plantempus - Week View</title>
<!-- Modular CSS Files --> <!-- Modular CSS Files -->
<link rel="stylesheet" href="css/calendar.css">
<link rel="stylesheet" href="css/calendar-base-css.css"> <link rel="stylesheet" href="css/calendar-base-css.css">
<link rel="stylesheet" href="css/calendar-layout-css.css"> <link rel="stylesheet" href="css/calendar-layout-css.css">
<link rel="stylesheet" href="css/calendar-components-css.css"> <link rel="stylesheet" href="css/calendar-components-css.css">