如何在Android Studio中构建自定义日历并实现考勤高亮与导航禁用？

一、基础日历结构搭建 #

先构建包含核心元素的日历框架，包含标题区、导航按钮、星期栏和日期网格：

<div class="attendance-calendar">
  <div class="calendar-header">
    <button id="prev-btn" disabled>上一页</button>
    <h3 id="month-year">2024年5月</h3>
    <button id="next-btn" disabled>下一页</button>
  </div>
  <div class="calendar-weekdays">
    <div>日</div>
    <div>一</div>
    <div>二</div>
    <div>三</div>
    <div>四</div>
    <div>五</div>
    <div>六</div>
  </div>
  <div id="calendar-days" class="calendar-days"></div>
</div>

二、考勤状态高亮样式定义 #

通过CSS给不同考勤状态设置差异化视觉样式，方便用户快速识别：

.calendar-days .day {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 2px;
  border-radius: 4px;
  cursor: default;
}

/* 出勤状态样式 */
.day.present {
  background-color: #4CAF50;
  color: #fff;
}

/* 缺勤状态样式 */
.day.absent {
  background-color: #F44336;
  color: #fff;
}

/* 休假状态样式 */
.day.leave {
  background-color: #FFC107;
  color: #333;
}

/* 禁用导航按钮的视觉反馈 */
button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  border-color: #ddd;
}

三、动态渲染日历与状态绑定 #

用JavaScript生成当月日期，并根据考勤数据给对应日期节点添加状态类：

// 模拟后端返回的考勤数据，key为YYYY-MM-DD格式
const attendanceRecords = {
  '2024-05-01': 'present',
  '2024-05-02': 'leave',
  '2024-05-03': 'absent',
  '2024-05-08': 'present',
  // 更多日期数据...
};

function renderAttendanceCalendar() {
  const currentDate = new Date();
  const currentYear = currentDate.getFullYear();
  const currentMonth = currentDate.getMonth();
  
  // 更新日历标题
  document.getElementById('month-year').textContent = `${currentYear}年${currentMonth + 1}月`;
  
  const daysContainer = document.getElementById('calendar-days');
  daysContainer.innerHTML = '';
  
  // 获取当月第一天的星期数（0=周日，6=周六）
  const firstDayOfMonth = new Date(currentYear, currentMonth, 1).getDay();
  // 获取当月总天数
  const totalDaysInMonth = new Date(currentYear, currentMonth + 1, 0).getDate();
  
  // 填充当月第一天前的空白占位
  for (let i = 0; i < firstDayOfMonth; i++) {
    const emptyDay = document.createElement('div');
    emptyDay.classList.add('day', 'empty');
    daysContainer.appendChild(emptyDay);
  }
  
  // 渲染当月所有日期
  for (let day = 1; day <= totalDaysInMonth; day++) {
    const dateKey = `${currentYear}-${String(currentMonth + 1).padStart(2, '0')}-${String(day).padStart(2, '0')}`;
    const dayElement = document.createElement('div');
    dayElement.classList.add('day');
    dayElement.textContent = day;
    
    // 匹配考勤数据，添加对应状态类
    if (attendanceRecords[dateKey]) {
      dayElement.classList.add(attendanceRecords[dateKey]);
    }
    
    daysContainer.appendChild(dayElement);
  }
}

// 页面加载完成后渲染日历
window.addEventListener('load', renderAttendanceCalendar);

四、导航按钮禁用处理 #

直接在HTML中给按钮添加disabled属性即可锁定导航；如果后续需要动态控制（比如仅允许查看当前月），可通过JS修改按钮状态：

// 强制禁用导航按钮（若有动态场景可按需调整）
document.getElementById('prev-btn').disabled = true;
document.getElementById('next-btn').disabled = true;

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