Kevin McConnell
86cb627120
Since we're rendering according to the local timezone, we'll need to include events that fall before or after the specific date on the server, as they might get be inside the current day in the client's timezone. So let's just grab a window of events either side of today, and then hide anything that falls outside the client's day.
27 lines
729 B
JavaScript
27 lines
729 B
JavaScript
import { Controller } from "@hotwired/stimulus"
|
|
|
|
const MAX_ROWS = 25
|
|
|
|
export default class extends Controller {
|
|
static targets = [ "cell", "item" ]
|
|
static values = { date: String }
|
|
|
|
cellTargetConnected(target) {
|
|
const dt = new Date(target.dataset.datetime)
|
|
target.classList.toggle("future", dt > new Date())
|
|
}
|
|
|
|
itemTargetConnected(target) {
|
|
const dt = new Date(target.dataset.datetime)
|
|
target.classList.toggle("out-of-range", !this.#dateIsToday(dt))
|
|
target.style.gridRowStart = MAX_ROWS - dt.getHours()
|
|
}
|
|
|
|
#dateIsToday(dt) {
|
|
const date = new Date(this.dateValue)
|
|
return dt.getYear() == date.getYear() &&
|
|
dt.getMonth() == date.getMonth() &&
|
|
dt.getDay() == date.getDay()
|
|
}
|
|
}
|