\n {/* Year selector and controls */}\n

\n handleYearChange(year - 1)}\n className=\"p-2 rounded-full hover:bg-gray-200 dark:hover:bg-gray-700\"\n >\n ◀\n \n

{year}

\n handleYearChange(year + 1)}\n className=\"p-2 rounded-full hover:bg-gray-200 dark:hover:bg-gray-700\"\n >\n ▶\n \n

\n \n {/* Calendar selector */}\n

\n Calendars:\n

\n {calendars.map(calendar => (\n \n handleCalendarToggle(calendar.id)}\n className=\"rounded\"\n />\n {calendar.summary}\n \n ))}\n

\n \n {/* Loading indicator */}\n {isLoading && (\n

Loading events...

\n )}\n \n {/* Error message */}\n {error && (\n

{error}

\n )}\n \n {/* Weekday headers and Year view */}\n

\n \n \n \n {['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'].map(day => (\n \n ))}\n \n \n \n {/* Year view */}\n \n {weeks.map((week, weekIndex) => {\n // Calculate month transition info for each day in the week\n const monthTransitions = week.map((date, dayIndex) => {\n if (dayIndex === 0) return null;\n \n const prevDate = week[dayIndex - 1];\n const isMonthTransition = date.getMonth() !== prevDate.getMonth();\n \n return isMonthTransition ? {\n dayIndex,\n newMonth: date.getMonth(),\n newYear: date.getFullYear()\n } : null;\n }).filter(Boolean) as { dayIndex: number; newMonth: number; newYear: number; }[];\n \n // Check if this week contains the first week of any month (days 1-7)\n const newMonthFirstWeeks = week.map((date, dayIndex) => {\n // A day is part of a new month's first week if:\n // 1. It's day 1-7 of the month\n // 2. It's the first occurrence of this month in the week\n const isFirstWeekOfMonth = date.getDate() <= 7;\n const isFirstOccurrenceInWeek = dayIndex === 0 || week[dayIndex - 1].getMonth() !== date.getMonth();\n \n return (isFirstWeekOfMonth && isFirstOccurrenceInWeek) ? {\n dayIndex,\n month: date.getMonth(),\n year: date.getFullYear()\n } : null;\n }).filter(Boolean) as { dayIndex: number; month: number; year: number; }[];\n \n return (\n getEventsForDate(date))}\n monthTransitions={monthTransitions}\n newMonthFirstWeeks={newMonthFirstWeeks}\n />\n );\n })}\n \n

\n {day}\n

\n );\n};\n\nexport default YearView;","deleted","label",[169,170,171,172,150],"frontend","components","views","YearView","permalink","https://www.val.town/x/malcolmocean/FlexCal/code/frontend/components/views/YearView/index.tsx","extension","actionData","errors"]