PEOPLEIZE TIME & CALENDAR
Peopleize
document.addEventListener('DOMContentLoaded', function() { let startDate = new Date(2023, 8, 20); // September 20, 2023 let endDate = new Date(2024, 8, 19); // September 19, 2024
// Retrieve SunRun value from localStorage, or initialize it if it doesn't exist let SunRun = localStorage.getItem('SunRun'); if (SunRun === null) { SunRun = 692024; // Initial SunRun value } else { SunRun = parseInt(SunRun, 10); }
// Display the SunRun value on the page const calendarSunRunElement = document.getElementById('calendarSunRun'); if (calendarSunRunElement) { calendarSunRunElement.textContent = SunRun; } else { console.error('Element with ID "calendarSunRun" not found.'); }
function saveAppointment(date, text) { let appointments = JSON.parse(localStorage.getItem('appointments')) || {}; const dateString = date.toISOString().split('T')[0]; if (!appointments[dateString]) { appointments[dateString] = []; } appointments[dateString].push({ text, repeat: null }); // Store text and repeat options localStorage.setItem('appointments', JSON.stringify(appointments)); displayAppointments(date); // Refresh the appointment list }
function loadAppointments(date) { const dateString = date.toISOString().split('T')[0]; let appointments = JSON.parse(localStorage.getItem('appointments')) || {}; return appointments[dateString] || []; }
function saveRepeatOption(date, repeatOption) { let appointments = JSON.parse(localStorage.getItem('appointments')) || {}; const dateString = date.toISOString().split('T')[0]; let newDate = new Date(date); appointments[dateString] = appointments[dateString] || [];
// Update existing appointments with the repeat option appointments[dateString].forEach(appointment => { appointment.repeat = repeatOption; });
localStorage.setItem('appointments', JSON.stringify(appointments)); repeatAppointments(date, repeatOption); // Set up repeating appointments displayAppointments(date); // Refresh the appointment list }
function repeatAppointments(startDate, repeatOption) { let currentDate = new Date(startDate); const daysToAdd = { daily: 0, every10Days: 0, every20Days: 0, sunRun: 0 }[repeatOption] || 0; const maxRepeats = 3; // Arbitrary large number to prevent infinite loops let repeats = 0;
while (daysToAdd && repeatOption && repeats < maxRepeats) { currentDate.setDate(currentDate.getDate() + daysToAdd); const dateString = currentDate.toISOString().split('T')[0]; let appointments = JSON.parse(localStorage.getItem('appointments')) || {}; if (!appointments[dateString]) { appointments[dateString] = []; } // Add new appointments for this date based on the repeat option const originalAppointments = JSON.parse(localStorage.getItem('appointments'))[startDate.toISOString().split('T')[0]] || []; originalAppointments.forEach(appointment => { if (appointment.text && !appointments[dateString].some(a => a.text === appointment.text && a.repeat === repeatOption)) { appointments[dateString].push({ text: appointment.text, repeat: repeatOption }); } });
localStorage.setItem('appointments', JSON.stringify(appointments)); repeats++; } }
function displayAppointments(date) { const appointments = loadAppointments(date); const appointmentList = document.getElementById('appointmentList'); appointmentList.innerHTML = ''; if (appointments.length) { const ul = document.createElement('ul'); appointments.forEach(appointment => { const li = document.createElement('li'); li.innerHTML = `${appointment.text} `; ul.appendChild(li); }); appointmentList.appendChild(ul); } else { appointmentList.innerHTML = '
No appointments for this date.
'; }
// Add event listeners to the delete buttons document.querySelectorAll('.delete-appointment-button').forEach(button => { button.addEventListener('click', (e) => { const text = e.target.previousElementSibling.textContent; deleteAppointment(date, text); }); }); }
function deleteAppointment(date, text) { let appointments = JSON.parse(localStorage.getItem('appointments')) || {}; const dateString = date.toISOString().split('T')[0]; if (appointments[dateString]) { appointments[dateString] = appointments[dateString].filter(appointment => appointment.text !== text); if (appointments[dateString].length === 0) { delete appointments[dateString]; } } localStorage.setItem('appointments', JSON.stringify(appointments)); displayAppointments(date); // Refresh the appointment list }
function listAllAppointments() { let appointments = JSON.parse(localStorage.getItem('appointments')) || {}; const allAppointmentsList = document.getElementById('allAppointmentsList'); allAppointmentsList.innerHTML = '';
if (Object.keys(appointments).length === 0) { allAppointmentsList.innerHTML = '
No appointments available.
'; return; }
Object.keys(appointments).forEach(dateString => { const date = new Date(dateString); const ul = document.createElement('ul'); const header = document.createElement('h3'); header.textContent = `${date.toDateString()}:`; allAppointmentsList.appendChild(header);
appointments[dateString].forEach(appointment => { const li = document.createElement('li'); li.innerHTML = `${appointment.text} ${appointment.repeat ? `(Repeats ${appointment.repeat})` : ''}`; ul.appendChild(li); }); allAppointmentsList.appendChild(ul); }); }
// Event listener for 'Add Appointment' button document.getElementById('addAppointmentButton').addEventListener('click', () => { const appointmentInput = document.getElementById('appointmentInput'); const appointmentText = appointmentInput.value.trim(); if (appointmentText) { const date = new Date(document.getElementById('modalDate').textContent); saveAppointment(date, appointmentText); appointmentInput.value = ''; // Clear the input field document.getElementById('appointmentModal').style.display = 'none'; // Hide the modal } });
// Event listener for 'Delete All Appointments' button document.getElementById('deleteAllButton').addEventListener('click', () => { const date = new Date(document.getElementById('modalDate').textContent); localStorage.removeItem('appointments'); // Clear all appointments from storage displayAppointments(date); // Refresh the appointment list document.getElementById('appointmentModal').style.display = 'none'; // Hide the modal });
// Event listener for 'Set Repeat Option' button document.getElementById('repeatAppointmentButton').addEventListener('click', () => { const repeatOption = document.getElementById('repeatOptions').value; if (repeatOption) { const date = new Date(document.getElementById('modalDate').textContent); saveRepeatOption(date, repeatOption); document.getElementById('repeatOptions').value = ''; // Clear the repeat option dropdown } });
// Event listener for 'List All Appointments' button document.getElementById('listAllAppointmentsButton').addEventListener('click', () => { listAllAppointments(); });
async function createBox(date, moonPhase, chineseZodiac, astrologicalZodiac, dayNumber, isCurrentDate, isSpecialDate, isRedBorder, isPurpleBorder, isGreenBorder, isVioletBorder, isBrownBorder, isCyanBorder, isMagentaBorder, isChocolateBorder, isChartreuseBorder, isTomatoBorder, isAzureBorder, isTurquoiseBorder, isBlackBorder, isPinkBorder, isOrangeBorder, isDeepPinkBorder, isDarkyellowBorder, islightorangeBorder, isdarkpurpleBorder) { // Calculate the day index for the 20-day cycle let dayNameIndex; if (dayNumber <= 5) { // For days 1 to 5, use dayNames[dayNumber - 1] dayNameIndex = dayNumber - 1; } else { // For days beyond the first 5 days, restart the 1 to 20 cycle dayNameIndex = (dayNumber - 6) % 20; } const dayName = dayNames[dayNameIndex]; // Determine the border type text based on the border flags let borderTypeText = ''; if (isRedBorder) { borderTypeText = 'N Equinox - 01'; } else if (isPurpleBorder) { borderTypeText = 'Mercury - 02'; } else if (isGreenBorder) { borderTypeText = 'Sip - 03'; } else if (isVioletBorder) { borderTypeText = 'Uranus - 04'; } else if (isBrownBorder) { borderTypeText = 'YaxkΚΌin - 05'; } else if (isCyanBorder) { borderTypeText = 'S Solstices - 06'; } else if (isMagentaBorder) { borderTypeText = 'Mol - 07'; } else if (isChocolateBorder) { borderTypeText = 'Jupiter - 08'; } else if (isChartreuseBorder) { borderTypeText = 'Saturn - 09'; } else if (isTomatoBorder) { borderTypeText = 'Venus - 10'; } else if (isAzureBorder) { borderTypeText = 'S Equinox - 11'; } else if (isTurquoiseBorder) { borderTypeText = 'Ceh - 12'; } else if (isBlackBorder) { borderTypeText = 'Neptune - 13'; } else if (isPinkBorder) { borderTypeText = 'Pluto - 14'; } else if (isOrangeBorder) { borderTypeText = 'N Solstices - 15'; } else if (isDeepPinkBorder) { borderTypeText = 'Mars - 16'; } else if (isDarkyellowBorder) { borderTypeText = 'Kayab - 17'; } else if (islightorangeBorder) { borderTypeText = 'Ik - 18'; } else if (isdarkpurpleBorder) { borderTypeText = 'Muluc - 19'; } else { borderTypeText = 'Equinox - 20'; } const box = document.createElement('div'); box.className = 'box'; box.innerHTML = `
${isCurrentDate ? '
' : ''} `;
document.getElementById('box-container').appendChild(box); }
function updateDisplay(year) { document.getElementById('current-year').textContent = year; document.getElementById('sunrun').textContent = SunRun; document.getElementById('date-display').textContent = startDate.toDateString(); displayAppointments(date); // Load and display appointments for the selected date modal.style.display = 'block'; // Add event listener for the modal close button document.querySelector('.close-modal').addEventListener('click', () => { document.getElementById('appointmentModal').style.display = 'none'; // Hide the modal });
const moonPhase = getMoonPhaseDetails(startDate); const chineseZodiac = getChineseZodiac(year); const astrologicalZodiac = getAstrologicalZodiac(startDate.getMonth() + 1, startDate.getDate()); const dayNumber = Math.ceil((startDate - new Date(startDate.getFullYear(), 0, 1)) / (1000 * 60 * 60 * 24)) + 1; createBox(startDate, moonPhase, chineseZodiac, astrologicalZodiac, dayNumber, true, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false);
// Clear previous boxes document.querySelectorAll('.box').forEach(box => box.remove()); // Add the current box createBox(startDate, moonPhase, chineseZodiac, astrologicalZodiac, dayNumber, true, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false); }
document.getElementById('previous-year').addEventListener('click', function() { startDate.setFullYear(startDate.getFullYear() - 1); endDate.setFullYear(endDate.getFullYear() - 1); SunRun -= 1; // Decrease SunRun by 1 for previous year updateDisplay(startDate.getFullYear()); });
document.getElementById('next-year').addEventListener('click', function() { startDate.setFullYear(startDate.getFullYear() + 1); endDate.setFullYear(endDate.getFullYear() + 1); SunRun += 1; // Increase SunRun by 1 for next year updateDisplay(startDate.getFullYear()); });
updateDisplay(startDate.getFullYear()); });
document.addEventListener('DOMContentLoaded', function() { let startDate = new Date(2023, 8, 20); // September 20, 2023 let endDate = new Date(2024, 8, 19); // September 19, 2024 let SunRun = 692024; // Initial SunRun value
const specialDates = [ { date: new Date(2024, 2, 20), label: 'Spring Equinox' }, // March 20, 2024 { date: new Date(2024, 5, 21), label: 'Summer Solstice' }, // June 21, 2024 { date: new Date(2024, 8, 22), label: 'Autumn Equinox' }, // September 22, 2024 { date: new Date(2024, 11, 21), label: 'Winter Solstice' }, // December 21, 2024 { date: new Date(2024, 0, 10), label: 'Chinese New Year' } // January 10, 2024 ];
const chineseZodiac = [ { name: "Rat", icon: "π" }, { name: "Ox", icon: "π" }, { name: "Tiger", icon: "π " }, { name: "Rabbit", icon: "π" }, { name: "Dragon", icon: "π" }, { name: "Snake", icon: "π" }, { name: "Horse", icon: "π" }, { name: "Goat", icon: "π" }, { name: "Monkey", icon: "π" }, { name: "Rooster", icon: "π" }, { name: "Dog", icon: "π" }, { name: "Pig", icon: "π" } ];
const astrologicalZodiac = [ { name: "Capricorn", icon: "β", start: [12, 22], end: [1, 19] }, { name: "Aquarius", icon: "β", start: [1, 20], end: [2, 18] }, { name: "Pisces", icon: "β", start: [2, 19], end: [3, 20] }, { name: "Aries", icon: "β", start: [3, 21], end: [4, 19] }, { name: "Taurus", icon: "β", start: [4, 20], end: [5, 20] }, { name: "Gemini", icon: "β", start: [5, 21], end: [6, 20] }, { name: "Cancer", icon: "β", start: [6, 21], end: [7, 22] }, { name: "Leo", icon: "β", start: [7, 23], end: [8, 22] }, { name: "Virgo", icon: "β", start: [8, 23], end: [9, 22] }, { name: "Libra", icon: "β", start: [9, 23], end: [10, 22] }, { name: "Scorpio", icon: "β", start: [10, 23], end: [11, 21] }, { name: "Sagittarius", icon: "β", start: [11, 22], end: [12, 21] } ];
function getChineseZodiac(year) { const index = (year - 4) % 12; return chineseZodiac[index]; }
function getAstrologicalZodiac(month, day) { for (const zodiac of astrologicalZodiac) { if ( (month === zodiac.start[0] && day >= zodiac.start[1]) || (month === zodiac.end[0] && day <= zodiac.end[1]) || (month > zodiac.start[0] && month < zodiac.end[0]) ) { return zodiac; } } return astrologicalZodiac[0]; // Default to Capricorn } function getMoonPhaseDetails(date) { const phaseNames = [ "New Moon π", "Waxing Crescent π", "Waxing Crescent π", "Waxing Crescent π", "First Quarter π", "First Quarter π", "Waxing Gibbous π", "Waxing Gibbous π", "Full Moon π", "Full Moon π", "Waning Gibbous π", "Waning Gibbous π", "Last Quarter π", "Last Quarter π", "Waning Crescent π", "Waning Crescent π", "New Moon π" // Repeated for smoother transition ]; const startDate = new Date(2000, 0, 5, 18, 14); // January 6, 2000 18:14 UTC const diff = (date - startDate) / (1000 * 60 * 60 * 24); const lunarCycle = 29.53058867; const normalizedDiff = diff % lunarCycle; // Normalize to the range 0 - (phaseNames.length - 1) const phaseIndex = Math.floor(normalizedDiff / (lunarCycle / phaseNames.length)); // Correct illumination calculation const illumination = (1 - Math.cos((normalizedDiff / lunarCycle) * 2 * Math.PI)) / 2 * 100; return { phase: phaseNames[phaseIndex], illumination }; } // Example usage: const date = new Date(); const moonPhaseDetails = getMoonPhaseDetails(date); console.log(`Moon Phase: ${moonPhaseDetails.phase} (${moonPhaseDetails.illumination.toFixed(2)}% illuminated)`); const dayNames = [ "Moja (Day 1)", "Ithnan (Day 2)", "Akbal (Day 3)", "Afar (Day 4)", "Isihlanu (Day 5)", "Chicchan (Day 6)", "Shichi (Day 7)", "Wajxaqibβ (Day 8)", "Muluc (Day 9)", "Dah (Day 10)", "Chuen (Day 11)", "Eb (Day 12)", "MαΊΉtala (Day 13)", "Arbatash (Day 14)", "Pandrah (Day 15)", "Waxakib (Day 16)", "Etznab (Day 17)", "Atlus (Day 18)", "Cauac (Day 19)", "Juβ (Day 20)" ]; async function createBox(date, moonPhase, chineseZodiac, astrologicalZodiac, dayNumber, isCurrentDate, isSpecialDate, isRedBorder, isPurpleBorder, isGreenBorder, isVioletBorder, isBrownBorder, isCyanBorder, isMagentaBorder, isChocolateBorder, isChartreuseBorder, isTomatoBorder, isAzureBorder, isTurquoiseBorder, isBlackBorder, isPinkBorder, isOrangeBorder, isDeepPinkBorder, isDarkyellowBorder, islightorangeBorder, isdarkpurpleBorder) { // Calculate the day index for the 20-day cycle let dayNameIndex; if (dayNumber <= 5) { // For days 1 to 5, use dayNames[dayNumber - 1] dayNameIndex = dayNumber - 1; } else { // For days beyond the first 5 days, restart the 1 to 20 cycle dayNameIndex = (dayNumber - 6) % 20; } const dayName = dayNames[dayNameIndex]; // Determine the border type text based on the border flags let borderTypeText = ''; if (isRedBorder) { borderTypeText = 'N Equinox - 01'; } else if (isPurpleBorder) { borderTypeText = 'Mercury - 02'; } else if (isGreenBorder) { borderTypeText = 'Sip - 03'; } else if (isVioletBorder) { borderTypeText = 'Uranus - 04'; } else if (isBrownBorder) { borderTypeText = 'YaxkΚΌin - 05'; } else if (isCyanBorder) { borderTypeText = 'S Solstices - 06'; } else if (isMagentaBorder) { borderTypeText = 'Mol - 07'; } else if (isChocolateBorder) { borderTypeText = 'Jupiter - 08'; } else if (isChartreuseBorder) { borderTypeText = 'Saturn - 09'; } else if (isTomatoBorder) { borderTypeText = 'Venus - 10'; } else if (isAzureBorder) { borderTypeText = 'S Equinox - 11'; } else if (isTurquoiseBorder) { borderTypeText = 'Ceh - 12'; } else if (isBlackBorder) { borderTypeText = 'Neptune - 13'; } else if (isPinkBorder) { borderTypeText = 'Pluto - 14'; } else if (isOrangeBorder) { borderTypeText = 'N Solstices - 15'; } else if (isDeepPinkBorder) { borderTypeText = 'Mars - 16'; } else if (isDarkyellowBorder) { borderTypeText = 'Kayab - 17'; } else if (islightorangeBorder) { borderTypeText = 'Ik - 18'; } else if (isdarkpurpleBorder) { borderTypeText = 'Muluc - 19'; } const box = document.createElement('div'); box.className = `calendar-box ${isCurrentDate ? 'current-date-highlight' : ''} ${isSpecialDate ? 'special-date' : ''} ${isRedBorder ? 'red-border' : ''} ${isPurpleBorder ? 'purple-border' : ''} ${isGreenBorder ? 'green-border' : ''} ${isVioletBorder ? 'violet-border' : ''} ${isBrownBorder ? 'brown-border' : ''} ${isCyanBorder ? 'cyan-border' : ''} ${isMagentaBorder ? 'magenta-border' : ''} ${isChocolateBorder ? 'chocolate-border' : ''} ${isChartreuseBorder ? 'chartreuse-border' : ''} ${isTomatoBorder ? 'tomato-border' : ''} ${isAzureBorder ? 'azure-border' : ''} ${isTurquoiseBorder ? 'turquoise-border' : ''} ${isBlackBorder ? 'black-border' : ''} ${isPinkBorder ? 'pink-border' : ''} ${isOrangeBorder ? 'orange-border' : ''} ${isDeepPinkBorder ? 'deeppink-border' : ''} ${isDarkyellowBorder ? 'darkyellow-border' : ''} ${islightorangeBorder ? 'lightorange-border' : ''} ${isdarkpurpleBorder ? 'darkpurple-border' : ''} `; box.innerHTML = `
${isSpecialDate ? `
` : ''} `;
// Add click event to open modal box.addEventListener('click', () => { document.getElementById('modalDate').textContent = date.toDateString(); document.getElementById('modalDayNumber').textContent = `Day ${dayNumber}`; document.getElementById('modalDayName').textContent = `Day Name: ${dayName}`;
document.getElementById('popmodalDayName').textContent = `Winal: ${borderTypeText}`;
document.getElementById('modalMoonPhase').textContent = `Moon Phase: ${moonPhase}`; document.getElementById('modalChineseZodiac').innerHTML = `Chinese Zodiac: ${chineseZodiac.icon} ${chineseZodiac.name}`; document.getElementById('modalAstrologicalZodiac').innerHTML = `Astrological Zodiac: ${astrologicalZodiac.icon} ${astrologicalZodiac.name}`; document.getElementById('infoModal').style.display = 'flex';
document.getElementById('modalSunRun').textContent = `SunRun: ${SunRun}`; document.getElementById('calendarSunRun').textContent = `SunRun: ${SunRun}`; document.getElementById('oncalendarSunRun').textContent = `SunRun: ${SunRun}`;
});
return box; }
async function updateCalendar() { const calendarContainer = document.getElementById('calendarContainer'); calendarContainer.innerHTML = ''; const now = new Date(); const todayIndex = Math.floor((now - startDate) / (1000 * 60 * 60 * 24));
const totalDays = Math.floor((endDate - startDate) / (1000 * 60 * 60 * 24)) + 1;
for (let i = 0; i < totalDays; i++) { const currentDate = new Date(startDate.getTime() + (i * 24 * 60 * 60 * 1000)); const moonPhaseDetails = getMoonPhaseDetails(currentDate); const chineseZodiac = getChineseZodiac(currentDate.getFullYear()); const astrologicalZodiac = getAstrologicalZodiac(currentDate.getMonth() + 1, currentDate.getDate()); const dayNumber = i + 1; const isCurrentDate = i === todayIndex; // Check if the date is a special date const isSpecialDate = specialDates.some(specialDate => specialDate.date.getTime() === currentDate.getTime());
// Check if the date should have a red border const isRedBorder = currentDate.getMonth() === 8 && currentDate.getDate() >= 20 && currentDate.getDate() <= 24; // Check if the date should have a purple border (Day 6 to Day 25) const isPurpleBorder = dayNumber >= 6 && dayNumber <= 25; // Check if the date should have a green border (Day 26 to Day 45) const isGreenBorder = dayNumber >= 26 && dayNumber <= 45; // Check if the date should have a Violet border (Day 46 to Day 65) const isVioletBorder = dayNumber >= 46 && dayNumber <= 65; // Check if the date should have a Brown border (Day 66 to Day 85) const isBrownBorder = dayNumber >= 66 && dayNumber <= 85; // Check if the date should have a Cyan border (Day 86 to Day 105) const isCyanBorder = dayNumber >= 86 && dayNumber <= 105; // Check if the date should have a Magenta border (Day 106 to Day 125) const isMagentaBorder = dayNumber >= 106 && dayNumber <= 125; // Check if the date should have a Chocolate border (Day 126 to Day 145) const isChocolateBorder = dayNumber >= 126 && dayNumber <= 145; // Check if the date should have a Chartreuse border (Day 146 to Day 165) const isChartreuseBorder = dayNumber >= 146 && dayNumber <= 165; // Check if the date should have a Tomato border (Day 166 to Day 185) const isTomatoBorder = dayNumber >= 166 && dayNumber <= 185; // Check if the date should have a Azure border (Day 186 to Day 205) const isAzureBorder = dayNumber >= 186 && dayNumber <= 205; // Check if the date should have a Turquoise border (Day 206 to Day 225) const isTurquoiseBorder = dayNumber >= 206 && dayNumber <= 225; // Check if the date should have a black border (Day 225 to Day 245) const isBlackBorder = dayNumber >= 226 && dayNumber <= 245; // Check if the date should have a pink border (Day 246 to Day 265) const isPinkBorder = dayNumber >= 246 && dayNumber <= 265; // Check if the date should have an orange border (Day 266 to Day 285) const isOrangeBorder = dayNumber >= 266 && dayNumber <= 285; // Check if the date should have a Deep Pink border (Day 286 to Day 305) const isDeepPinkBorder = dayNumber >= 286 && dayNumber <= 305; // Check if the date should have a Dark yellow border (Day 306 to Day 325) const isDarkyellowBorder = dayNumber >= 306 && dayNumber <= 325; // Check if the date should have a Light orange border (Day 306 to Day 325) const islightorangeBorder = dayNumber >= 326 && dayNumber <= 345; // Check if the date should have a dark purple border (Day 346 to Day 366) const isdarkpurpleBorder = dayNumber >= 346 && dayNumber <= 366; const box = await createBox(currentDate, `${moonPhaseDetails.phase} (${moonPhaseDetails.illumination.toFixed(2)}% illuminated)`, chineseZodiac, astrologicalZodiac, dayNumber, isCurrentDate, isSpecialDate, isRedBorder, isPurpleBorder, isGreenBorder, isVioletBorder, isBrownBorder, isCyanBorder, isMagentaBorder, isChocolateBorder, isChartreuseBorder, isTomatoBorder, isAzureBorder, isTurquoiseBorder, isBlackBorder, isPinkBorder, isOrangeBorder, isDeepPinkBorder, isDarkyellowBorder, islightorangeBorder, isdarkpurpleBorder); if (isRedBorder) { box.style.border = '2px solid red'; // Set red border for the date range box.style.boxShadow = '0 0 10px red'; // Optional: add a red box shadow for extra emphasis } if (isPinkBorder) { box.style.border = '2px solid pink'; // Set pink border for the date range box.style.boxShadow = '0 0 10px pink'; // Optional: add a pink box shadow for extra emphasis } if (isGreenBorder) { box.style.border = '2px solid green'; // Set green border for the date range box.style.boxShadow = '0 0 10px green'; // Optional: add a green box shadow for extra emphasis } if (isVioletBorder) { box.style.border = '2px solid violet'; // Set violet border for the date range box.style.boxShadow = '0 0 10px violet'; // Optional: add a violet box shadow for extra emphasis } if (isBrownBorder) { box.style.border = '2px solid brown'; // Set brown border for the date range box.style.boxShadow = '0 0 10px brown'; // Optional: add a brown box shadow for extra emphasis } if (isCyanBorder) { box.style.border = '2px solid Cyan'; // Set Cyan border for the date range box.style.boxShadow = '0 0 10px Cyan'; // Optional: add a Cyan box shadow for extra emphasis } if (isMagentaBorder) { box.style.border = '2px solid Magenta'; // Set Magenta border for the date range box.style.boxShadow = '0 0 10px Magenta'; // Optional: add a Magenta box shadow for extra emphasis } if (isChocolateBorder) { box.style.border = '2px solid Chocolate'; // Set Chocolate border for the date range box.style.boxShadow = '0 0 10px Chocolate'; // Optional: add a Chocolate box shadow for extra emphasis } if (isChartreuseBorder) { box.style.border = '2px solid Chartreuse'; // Set Chartreuse border for the date range box.style.boxShadow = '0 0 10px Chartreuse'; // Optional: add a Chartreuse box shadow for extra emphasis } if (isTomatoBorder) { box.style.border = '2px solid Tomato'; // Set Tomato border for the date range box.style.boxShadow = '0 0 10px Tomato'; // Optional: add a Tomato box shadow for extra emphasis } if (isAzureBorder) { box.style.border = '2px solid #8c1f49'; // Set Azure border for the date range box.style.boxShadow = '0 0 10px #8c1f49'; // Optional: add a Azure box shadow for extra emphasis } if (isTurquoiseBorder) { box.style.border = '2px solid Turquoise'; // Set Turquoise border for the date range box.style.boxShadow = '0 0 10px Turquoise'; // Optional: add a Turquoise box shadow for extra emphasis } if (isDeepPinkBorder) { box.style.border = '2px solid #ff1493'; // Set Deep Pink border for the date range box.style.boxShadow = '0 0 10px #ff1493'; // Optional: add a Deep Pink box shadow for extra emphasis } if (isDarkyellowBorder) { box.style.border = '2px solid #757204'; // Set Dark yellow border for the date range box.style.boxShadow = '0 0 10px #757204'; // Optional: add a Dark yellow box shadow for extra emphasis } if (isBlackBorder) { box.style.border = '2px solid black'; // Set Black border for the date range box.style.boxShadow = '0 0 10px black'; // Optional: add a Black box shadow for extra emphasis } if (isPurpleBorder) { box.style.border = '2px solid purple'; // Set purple border for the date range box.style.boxShadow = '0 0 10px purple'; // Optional: add a purple box shadow for extra emphasis } if (islightorangeBorder) { box.style.border = '2px solid #e35c0e'; // Set light orange border for the date range box.style.boxShadow = '0 0 10px #e35c0e'; // Optional: add a light orange box shadow for extra emphasis } if (isdarkpurpleBorder) { box.style.border = '2px solid #433440'; // Set dark purple border for the date range box.style.boxShadow = '0 0 10px #433440'; // Optional: add a dark purple box shadow for extra emphasis } calendarContainer.appendChild(box); } // Center to the actual date if (todayIndex >= 0 && todayIndex < totalDays) { const calendarBoxes = document.querySelectorAll('.calendar-box'); const centerIndex = todayIndex; const currentBox = calendarBoxes[centerIndex]; if (currentBox) { currentBox.scrollIntoView({ behavior: 'smooth', block: 'center', inline: 'center' }); } } document.getElementById('calendarTitle').innerText = `A Decolonized Yearly Calendar: A Bias-Free Approach Inspired by the Mayan Calendar`; } function updateYear(yearOffset) { startDate.setFullYear(startDate.getFullYear() + yearOffset); endDate.setFullYear(endDate.getFullYear() + yearOffset); // Set the start and end dates to September 20 of the new year startDate = new Date(startDate.getFullYear(), 8, 20); // September 20 endDate = new Date(startDate.getFullYear() + 1, 8, 19); // September 19 of the next year // Update the special dates for the new year specialDates[0].date.setFullYear(startDate.getFullYear()); // Spring Equinox specialDates[1].date.setFullYear(startDate.getFullYear()); // Summer Solstice specialDates[2].date.setFullYear(startDate.getFullYear() + 1); // Autumn Equinox specialDates[3].date.setFullYear(startDate.getFullYear() + 1); // Winter Solstice specialDates[4].date.setFullYear(startDate.getFullYear()); // Chinese New Year updateCalendar(); } document.getElementById('prevYearButton').addEventListener('click', () => updateYear(-1)); document.getElementById('nextYearButton').addEventListener('click', () => updateYear(1)); document.getElementById('prevYearButtonBottom').addEventListener('click',() => updateYear(-1)); document.getElementById('nextYearButtonBottom').addEventListener('click', () => updateYear(1));
document.querySelector('.close').addEventListener('click', () => { document.getElementById('infoModal').style.display = 'none'; });
document.getElementById('modalCloseButton').addEventListener('click', () => { document.getElementById('infoModal').style.display = 'none'; });
window.addEventListener('click', (event) => { if (event.target === document.getElementById('infoModal')) { document.getElementById('infoModal').style.display = 'none'; } });
updateCalendar(); });