自定义页面日历图

创建自定义页面 | 钉钉宜搭·帮助中心

能力免费版轻享版专业版专属版自定义页面不支持不支持支持支持未升级到新版信息架构的组织，请 点此查看 使用手册1. 操作步骤在应用管理界面，提供了两个创建自定义页面的入口1.1 通过【新建页面】下拉菜单创建左上角新建页面，在下拉菜单中选择【新建自定义页面(Beta)】，开始创建新建自定义页面1....

https://docs.aliwork.com/docs/yida_support/ui648w/ynk2lo

本案例来自三方开发者「李睿」

1. 使用场景

本例介绍一下在宜搭自定义页面中如何实现日历效果。

2. 实现功能

2.1. 创建自定义页面

2.2. 数据源配置

（1）点击数据源按钮，配置变量

this.utils.formatter('date',Date.now(),'YYYY-M-D')

new Date().getFullYear()

new Date().getMonth() + 1

2.3. 变量绑定

state.year !== new Date().getFullYear() || state.month !== new Date().getMonth() + 1 || state.clickValue !== this.utils.formatter('date',Date.now(),'YYYY-M-D') ? 'NORMAL' : 'DISABLED'

`${state.year}年${state.month}月`

`${item.type} ${item.dateString === state.clickValue? 'isChecked' : ''}` 

2.4. 事件绑定

export function didMount() {
  this.renderCalendar();
}

// 日历渲染
export function renderCalendar() {
  const { year, month } = this.state;
  // 获取当前月第一天星期数
  const nowMonthStartDayWeekNum = new Date(year, month - 1, 1).getDay(); 
   // 获取当前月最后一天星期数
  const nowMonthEndDayWeekNum = new Date(year, month, 0).getDay();
  // 获取当前月最后一天天数
  const nowMonthEndDayNum = new Date(year, month, 0).getDate(); 
  // 获取上个月最后一天天数
  const lastMonthEndDayNum = new Date(year, month - 1, 0).getDate(); 
  const lastMonthDateList = _.range(lastMonthEndDayNum - nowMonthStartDayWeekNum + 1, lastMonthEndDayNum + 1, 1).map((item) => {
    return {
      type: 'lastMonth',
      isToday: false,
      year: month - 1 > 0 ? year : year - 1,
      month: month - 1 > 0 ? month - 1 : 12,
      day: item,
      dateString: `${month - 1 > 0 ? year : year - 1}-${month - 1 > 0 ? month - 1 : 12}-${item}`,
    };
  }); // 上月日期序列
  const nowMonthDateList = _.range(1, nowMonthEndDayNum + 1, 1).map((item) => {
    return {
      type: 'nowMonth',
      isToday: item === new Date().getDate() && month === new Date().getMonth() + 1 && year === new Date().getFullYear(),
      year,
      month,
      day: item,
      dateString: `${year}-${month}-${item}`,
    };
  }); // 本月日期序列
  const nextMonthDateList = _.range(1, 7 - nowMonthEndDayWeekNum, 1).map((item) => {
    return {
      type: 'nextMonth',
      isToday: false,
      year: month - 1 < 13 ? year : year + 1,
      month: month + 1 < 13 ? month + 1 : 1,
      day: item,
      dateString: `${month - 1 < 13 ? year : year + 1}-${month + 1 < 13 ? month + 1 : 1}-${item}`,
    };
  }); // 下月日期序列
  this.setState({
    calendarDateList: [...lastMonthDateList, ...nowMonthDateList, ...nextMonthDateList],
  });
}

// 切换年月
export function changeYearOrMonth() {
  const { type } = this.params;
  const { year, month } = this.state;
  switch (type) {
    case 'lastYear':
      this.setState({
        year: year - 1,
      });
      break;
    case 'nextYear':
      this.setState({
        year: +year + 1,
      });
      break;
    case 'lastMonth':
      this.setState({
        month: month - 1 > 0 ? month - 1 : 12,
        year: month - 1 > 0 ? year : year - 1,
      });
      break;
    case 'nextMonth':
      this.setState({
        month: +month + 1 < 13 ? +month + 1 : 1,
        year: +month + 1 < 13 ? year : +year + 1,
      });
      break;
    case 'nowMonth':
      this.setState({
        month: new Date().getMonth() + 1,
        year: new Date().getFullYear(),
        clickValue: this.utils.formatter('date', Date.now(), 'YYYY-M-D'),
      });
      break;
    default:
      console.log('无效的状态');
      break;
  }
  this.renderCalendar();
}

// 点击日历
export function onCalendarCellClick() {
  console.log(this.item);
  this.setState({
    clickValue: this.item.dateString,
  });
}

3. 实现效果

4. 在线试玩

示例中心 | 开发者赋能平台

让企业自建专属应用更简单，持续创新，一搭就行。

https://www.aliwork.com/o/coc?tplUuid=TPL_BXYM6RCUUUVT3DAFNJFT&from=yuque_subject