Custom page Calendar

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

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

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

This case comes from the three-party developer Li Rui 」

1. Usage scenarios

This example describes how to implement calendar effects on the YIDA custom page.

2. Implement functions

2.1. Create a custom page

2.2. Data source configuration

(1) click the data source button to configure variables

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

new Date().getFullYear()

new Date().getMonth() + 1

2.3. Variable binding

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. Event binding

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. Effect

4. Try it online

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

AI智能体时代，全新宜搭。业务创新，一搭就行。

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