Plot.plot({
  width,
-
  height: 400,
+
  height: 250,
  label: null,
  x: {
-
    // axis: "top",
    domain: [start, end],
    axis: "top",
-
    round: true,
    ticks: {
      range(start, end) {
        return d3.utcWeek.range(start, end).map((d) => d3.utcHour.offset(d, 12));
      }
    },
    tickFormat: "%b %-d"
+
    domain: [start, end]
  },
  y: {
    grid: true
  },
-
  opacity: { type: "identity" },
  marks: [
-
    //Mark Weekend
    Plot.barX(d3.utcDay.range(start, end), {
+
    Plot.ruleX(d3.utcDay.range(start, end), { strokeOpacity: 0.1 }),
    Plot.ruleX([today], { stroke: "red" }),
    Plot.barX(data, {
      y: "NAME",
      x: "DATE",
      interval: d3.utcDay,
-
      fillOpacity: (d) => ((1 + d.getUTCDay()) % 7 < 2 ? 0.15 : 0.05)
    }),
    
    //Mark Today
    Plot.barX([today], {interval: d3.utcDay,
      fill: "yellow",
      fillOpacity: 0.5
    }),

    //Mark Vacations
    Plot.barX(vacations, {
      x1: "date_start",
      x2: "date_end",
      y: "name",
      fill: "name",
      inset: 0.5,
+
      inset: 0, // no gaps between days
      fill: "COUNTRY",
      title: (d) => `${d.NAME}\n${d.COUNTRY}`,
      clip: true
-
    }),

    //Mark Holidays
    // Plot.barX(holidays, {
    //   x: "date_start",
    //   y: "name",
    //   fill: "name",
    //   inset: 0.5,
    //   clip: true
    // }),

  ],tooltip: {
    fill: "red",
    stroke: "blue",
    r: 8
  }
+
    })
  ]
})

-
vacations = FileAttachment("vacations_ooo.csv").csv({typed: true})
+
data = FileAttachment("vacation.csv").csv({typed: true})

-
start = new Date("2022-03-20")
+
start = new Date("2022-02-01")

-
end = new Date("2022-05-28")
+
end = new Date("2022-04-01")