In order to preserve the information about the month while selecting specific dates, a new class was added to each month in the calendar. This prevents the loss of which month is being referenced when using selectors like [style="order:29"]
.
The main calendar assigns months based on their position as an nth-child-of-type within a group of all 12 months. However, when cloning a single month, this contextual information is lost without the additional class.
By adding more CSS rules to color both the original and cloned months correctly, special days can be highlighted effectively. Currently, only February 14th has been targeted in the snippet provided.
This customization involves identifying the current year, month, and date, then dynamically generating calendars for each of the 12 months. The script utilizes arrays for month names and days of the week, ensuring accurate display and formatting of the calendar.