如何在Bootstrap年度日历customDayRenderer中使用日期数组参数

Got it, let's adjust your code to work with date arrays instead of single date checks—this will make your code way more scalable when you need to add more styled dates later. Here's how to do it step by step:

1. Define Date Arrays for Each Style Category #

Instead of single variables like redDateTime, create arrays to hold all timestamps that should get the same style. This keeps your dates organized by their visual treatment:

// First, define your arrays (add as many dates as you need to each)
const greenBoldDates = [
  new Date(currentYear, 2, 13).getTime(), // March 13th
  new Date(currentYear, 4, 5).getTime(),  // May 5th
  new Date(currentYear, 11, 25).getTime() // December 25th
];

const redCircleDates = [
  new Date(currentYear, 1, 14).getTime(), // February 14th
  new Date(currentYear, 6, 4).getTime()   // July 4th
];

2. Update the customDayRenderer Logic #

Replace your individual date checks with Array.includes() to see if the current day's timestamp exists in any of your arrays. This eliminates messy chains of else if statements:

$('#calendar').calendar({
  customDayRenderer: function(element, date) {
    const currentDayTimestamp = date.getTime();
    
    // Check for green bold style
    if (greenBoldDates.includes(currentDayTimestamp)) {
      $(element).css({
        'font-weight': 'bold',
        'font-size': '15px',
        'color': 'green'
      });
    } 
    // Check for red circle style
    else if (redCircleDates.includes(currentDayTimestamp)) {
      $(element).css({
        'background-color': 'red',
        'color': 'white',
        'border-radius': '15px'
      });
    }
    // Add more else if blocks here if you have additional style groups
  }
});

Bonus: Clean Up with CSS Classes (Recommended) #

For even better maintainability, move your styles to CSS classes instead of using inline styles. This keeps your JavaScript focused on logic, not styling:

First, add these classes to your stylesheet:

.calendar-day--green-bold {
  font-weight: bold;
  font-size: 15px;
  color: green;
}

.calendar-day--red-circle {
  background-color: red;
  color: white;
  border-radius: 15px;
}

Then update your customDayRenderer to add these classes instead of inline CSS:

$('#calendar').calendar({
  customDayRenderer: function(element, date) {
    const currentDayTimestamp = date.getTime();
    
    if (greenBoldDates.includes(currentDayTimestamp)) {
      $(element).addClass('calendar-day--green-bold');
    } else if (redCircleDates.includes(currentDayTimestamp)) {
      $(element).addClass('calendar-day--red-circle');
    }
  }
});

This approach makes it super easy to add new styled date groups later—just create a new array and a corresponding CSS class, no need to rewrite the renderer logic.

内容的提问来源于stack exchange，提问作者meowcheeze