@MMRIZE Thanks! Intl.dateTimeFormat worked once I realized what I was trying to compare against was wrong. Probably not actually portable for anyone else but works for me:
let isHoliday = holidays.some(holiday => {
return holiday === new Intl.DateTimeFormat('en-CA').format(current)
})
Overall this isn’t the most efficient code I’ve written. Looping and counting days since a start date for every date cell is expensive. Tim to learn more javascript I guess.
@MMRIZE I threw together the following and put it in manipulateDateCell. It mostly works for what I want. My check of cellDom.dataset.date vs holidays fails as it seems I’m getting a local time vs current which seems to become a UTC time for me?
// Calculate tumble days
const startDate = "2024-09-02"
const holidays = ["2024-09-02","2024-09-03","2024-10-14","2024-10-25","2024-11-22","2024-12-16"]
let schoolDays = 0
const cellHeader = cellDom.querySelector('.cellHeader') ?? null
if(cellHeader) {
const end = new Date(+cellDom.dataset.date)
let current = new Date(startDate)
while (current <= end) {
const dayOfWeek = current.getDay();
// Skip weekends (Saturday = 6, Sunday = 0)
if (dayOfWeek !== 0 && dayOfWeek !== 6) {
// Check if the current date is not a holiday
const isHoliday = holidays.some(holiday => {
return new Date(holiday).toDateString() === current.toDateString()
})
if (!isHoliday) {
schoolDays++;
}
}
// Move to the next day
current.setDate(current.getDate() + 1)
}
const cellTumbleDay = document.createElement('div')
cellTumbleDay.classList.add('cellTumbleDay')
if (schoolDays%5 == 4) {
cellTumbleDay.innerHTML = `Day ${(schoolDays % 5) + 1}.${((schoolDays % 20) + 1)/5}`
} else {
cellTumbleDay.innerHTML = `Day ${(schoolDays % 5) + 1}`
}
cellHeader.insertBefore(cellTumbleDay, cellHeader.childNodes[1])
}
Still need to cleanup stuff like skipping days and add more to manage the div with css.
@MMRIZE Thanks for replying and sorry for not getting back sooner!
I’m trying to do something like the following where I have added “Day 5” on Dec 9, “Day 1” on Dec 10, etc:
Which I’ve mocked up by modifying this:
<div class="cellHeader">
<div class="">Day 5</div>
<div class="cellDate">
<span class="dateParts month seq_0">Dec</span>
<span class="dateParts literal seq_1"> </span>
<span class="dateParts day seq_2">9</span>
</div>
</div>
Would using manipulateDateCell allow me to do this? At the moment it appears to me that manipulateDateCell is for when there are events on the day but I won’t always have events in my case.
@sdetweil thanks for the link but my understanding is that customHeader applies to the field “above” the calendar that usually defaults to something like Monday, Tuesday, etc.
I’m looking for the section that is at the top of each date cell which I believe is contained within cellHeader and gets generated as part of the makeCellDom.
I’ve been working with MMM-CalendarExt3 for a couple weeks now and have managed to get almost everything setup how I would like. (Great module btw!)
One thing I’d like to be able to do is add some text into the header for each weekday. Backstory - school schedule is on a rotating 5 day timetable but it skips holidays meaning it doesn’t line up with the regular 5 day school week. I’d like to be able to insert “Day 1” though “Day 5” on the correct day of the calendar. (No worries about the algorithm - I can figure that part out).
Since I want to add something that is not related to any calendar event, I think I need to intercept the makeCellDom but I don’t see a way to do this. I’m pretty rusty on javascript so I feel like I’m missing something or is this actually not possible without modifying MMM-CalendarExt3 itself?