JSFiddle - React, Tailwind, and code Playground

by Plippie Plop

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<div class="project-planner">

  <div class="project-signup-group">

    <div class="signup-header">
      <div class="signup-info">
        <span>Signup stuff</span>
        <span class="pr-badge bg-green">123</span>
      </div>

      <div class="signup-days">
        <span class="day">MON</span>
        <span class="day-date" id="day-date-mon"></span>
      </div>
      <div class="signup-days">
        <span class="day">TUE</span>
        <span class="day-date" id="day-date-tue"></span>
      </div>
      <div class="signup-days">
        <span class="day">WED</span>
        <span class="day-date" id="day-date-wed"></span>
      </div>
      <div class="signup-days">
        <span class="day">THU</span>
        <span class="day-date" id="day-date-thu"></span>
      </div>
      <div class="signup-days">
        <span class="day">FRI</span>
        <span class="day-date" id="day-date-fri"></span>
      </div>
      <div class="signup-days">
        <span class="day">SAT</span>
        <span class="day-date" id="day-date-sat"></span>
      </div>
      <div class="signup-days">
        <span class="day">SUN</span>
        <span class="day-date" id="day-date-sun"></span>
      </div>


    </div>


    <div class="project-signup-group-shift">

      <div class="shift-header">
        <div class="shift-info">
          <span class="shift-toggle" data-group-accordion="closed"><i class="icon-chevron-down"></i></span>
          <span class="signup-group-name">DDD-ONE-TWO</span>
        </div>

        <div class="shift-item">
          <span class="pr-item-circle bg-blue">12</span>
        </div>



      </div>



    </div>

  </div>
</div>

CSS

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;700&display=swap');


:root {
  --page-bg: #cacaca;
  --project-header-bg: #fff;
  --project-planner-bg: #fafbfb;
  --project-signup-bg: #F1F1F1;
  --project-font: 'helvetica neue', 'IBM Plex Sans', sans-serif;
  --project-grid-cols-8: 200px repeat(7, minmax(147px, 200px));
  --project-cell-padding: 0.3em 0.3em 0.3em 0.5em;
  --project-border-radius: 0.3em;
  --project-border-color: #EDEAE9;
  --project-color-grey: #cacaca;
  --project-color-lightgrey: #E4E5E7;
  --project-color-green: #AEE9D1;
  --project-color-lightgreen: #A4E8F2;
  --project-color-red: #D72C0D;
  --project-color-blue: #2C6ECB;
}

body {
  background-color: var(--page-bg);
  font-family: var(--project-font);
  font-size: 14px;
}


.project-planner {
  display: grid;
  grid-template-rows: 1fr;
  box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
  border-radius: 0.5em;
  overflow: hidden;
  margin: 1em;
  overflow-x: auto;
   background-color: var(--project-signup-bg);
}

.project-signup-group{
 
}
.project-signup-group-shift{
  
}

.signup-header,
.shift-header {
  display: grid;
  grid-template-columns: var(--project-grid-cols-8);
  background-color: var(--project-header-bg);
  border-radius: 0.2em 0.2em 0 0;
  font-size: 12px;
  border-bottom: 1px solid var(--project-border-color);
  align-items:center;
}

.signup-info,
.shift-info,
.shift-days {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--project-cell-padding);
}


.signup-days .day,
shift-info span:first-child{
  font-weight: 700;
}

.project-days.today .day-date {
  background-color: var(--project-color-lightgreen);
  padding: var(--project-cell-padding);
  border-radius: 0.2em;
  font-weight: 600;
}



/* badges and small items */

.pr-badge{
  border-radius: var(--project-border-radius);
  padding:0.2em 0.4em;
}


.pr-item-circle{
  font-size:10px;
  width:20px;
  height:20px;
 ...

JavaScript

// Get the current date
  const currentDate = new Date();

  // Calculate the start of the week (assuming Monday is the first day of the week)
  const startOfWeek = new Date(currentDate);
  startOfWeek.setDate(currentDate.getDate() - currentDate.getDay() + (currentDate.getDay() === 0 ? -6 : 1));

  // Update each day-date span with the corresponding date
  for (let i = 0; i < 7; i++) {
    const dayDateSpan = document.getElementById(`day-date-${['mon', 'tue', 'wed', 'thu', 'fri', 'sat', 'sun'][i]}`);
    const day = new Date(startOfWeek);
    day.setDate(startOfWeek.getDate() + i);
    dayDateSpan.textContent = day.toLocaleDateString('nl-NL', { day: 'numeric', month: 'short' });

    // Add today class to the current day's project-days div
    if (day.toDateString() === currentDate.toDateString()) {
      const currentDayDiv = document.querySelector(`.project-days:nth-child(${i + 2})`); // i + 2 because nth-child is 1-based
      currentDayDiv.classList.add('today');
    }
  }