用js自一个日历，要求自适应页面，且日历选中当前时间

<!-- 配置Tailwind自定义颜色和字体 -->
<script>
    tailwind.config = {
        theme: {
            extend: {
                colors: {
                    primary: '#3B82F6',
                    secondary: '#64748B',
                    accent: '#F97316',
                    neutral: '#F8FAFC',
                },
                fontFamily: {
                    inter: ['Inter', 'system-ui', 'sans-serif'],
                },
            }
        }
    }
</script>

<style type="text/tailwindcss">
    @layer utilities {
        .content-auto {
            content-visibility: auto;
        }
        .calendar-day {
            @apply aspect-square flex items-center justify-center rounded-full transition-all duration-200 cursor-pointer;
        }
        .calendar-day:hover:not(.empty):not(.current) {
            @apply bg-primary/10;
        }
        .calendar-day.current {
            @apply bg-primary text-white font-bold;
        }
        .calendar-day.other-month {
            @apply text-gray-300;
        }
        .calendar-day.today {
            @apply ring-2 ring-primary ring-offset-2;
        }
    }
</style>

<!-- 星期标题 -->
    <div class="grid grid-cols-7 border-b">
        <div class="py-3 text-center font-medium text-secondary">日</div>
        <div class="py-3 text-center font-medium text-secondary">一</div>
        <div class="py-3 text-center font-medium text-secondary">二</div>
        <div class="py-3 text-center font-medium text-secondary">三</div>
        <div class="py-3 text-center font-medium text-secondary">四</div>
        <div class="py-3 text-center font-medium text-secondary">五</div>
        <div class="py-3 text-center font-medium text-secondary">六</div>
    </div>
    
    <!-- 日历主体 -->
    <div id="calendar-days" class="grid grid-cols-7 auto-rows-fr">
        <!-- 日期将通过JavaScript动态生成 -->
    </div>
    
    <!-- 底部信息 -->
    <div class="p-4 text-center text-sm text-gray-500 border-t">
        <p>点击日期可选择，当前选中日期将高亮显示</p>
    </div>
</div>

<script>
    // 获取DOM元素
    const calendarDays = document.getElementById('calendar-days');
    const currentMonthEl = document.getElementById('current-month');
    const currentDateEl = document.getElementById('current-date');
    const prevMonthBtn = document.getElementById('prev-month');
    const nextMonthBtn = document.getElementById('next-month');
    
    // 当前显示的日期
    let currentDisplayDate = new Date();
    // 当前选中的日期
    let selectedDate = new Date();
    
    // 初始化日历
    function initCalendar() {
        renderCalendar(currentDisplayDate);
        updateCurrentDateText();
        
        // 添加事件监听
        prevMonthBtn.addEventListener('click', () => {
            currentDisplayDate.setMonth(currentDisplayDate.getMonth() - 1);
            renderCalendar(currentDisplayDate);
        });
        
        nextMonthBtn.addEventListener('click', () => {
            currentDisplayDate.setMonth(currentDisplayDate.getMonth() + 1);
            renderCalendar(currentDisplayDate);
        });
    }
    
    // 渲染日历
    function renderCalendar(date) {
        const year = date.getFullYear();
        const month = date.getMonth();
        
        // 更新月份标题
        const monthNames = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'];
        currentMonthEl.textContent = `${year}年${monthNames[month]}`;
        
        // 清空日历
        calendarDays.innerHTML = '';
        
        // 获取当月第一天是星期几 (0-6, 0是星期日)
        const firstDay = new Date(year, month, 1).getDay();
        
        // 获取当月的天数
        const daysInMonth = new Date(year, month + 1, 0).getDate();
        
        // 获取上个月的最后几天
        const prevMonth = month === 0 ? 11 : month - 1;
        const prevYear = month === 0 ? year - 1 : year;
        const daysInPrevMonth = new Date(prevYear, prevMonth + 1, 0).getDate();
        
        // 添加上个月的最后几天
        for (let i = 0; i < firstDay; i++) {
            const day = daysInPrevMonth - firstDay + i + 1;
            const dayEl = createDayElement(day, true);
            calendarDays.appendChild(dayEl);
        }
        
        // 添加当月的天数
        for (let day = 1; day <= daysInMonth; day++) {
            const dayEl = createDayElement(day, false);
            
            // 检查是否是今天
            const today = new Date();
            if (day === today.getDate() && 
                month === today.getMonth() && 
                year === today.getFullYear()) {
                dayEl.classList.add('today');
            }
            
            // 检查是否是选中的日期
            if (day === selectedDate.getDate() && 
                month === selectedDate.getMonth() && 
                year === selectedDate.getFullYear()) {
                dayEl.classList.add('current');
            }
            
            // 添加点击事件
            dayEl.addEventListener('click', () => {
                // 移除之前选中日期的样式
                document.querySelectorAll('.calendar-day.current').forEach(el => {
                    el.classList.remove('current');
                });
                
                // 设置新的选中日期
                selectedDate = new Date(year, month, day);
                dayEl.classList.add('current');
                updateCurrentDateText();
            });
            
            calendarDays.appendChild(dayEl);
        }
        
        // 计算需要添加多少天才能填满最后一行
        const totalDays = firstDay + daysInMonth;
        const daysToAdd = totalDays % 7 === 0 ? 0 : 7 - (totalDays % 7);
        
        // 添加下个月的前几天
        for (let day = 1; day <= daysToAdd; day++) {
            const dayEl = createDayElement(day, true);
            calendarDays.appendChild(dayEl);
        }
    }
    
    // 创建日期元素
    function createDayElement(day, isOtherMonth) {
        const dayEl = document.createElement('div');
        dayEl.classList.add('calendar-day');
        dayEl.textContent = day;
        
        if (isOtherMonth) {
            dayEl.classList.add('other-month');
        }
        
        return dayEl;
    }
    
    // 更新当前日期文本
    function updateCurrentDateText() {
        const weekDays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
        const year = selectedDate.getFullYear();
        const month = selectedDate.getMonth() + 1; // 月份从0开始，需要+1
        const day = selectedDate.getDate();
        const weekDay = weekDays[selectedDate.getDay()];
        
        currentDateEl.textContent = `${year}年${month}月${day}日 ${weekDay}`;
    }
    
    // 初始化日历
    document.addEventListener('DOMContentLoaded', initCalendar);
</script>