Top

Calendar日历可否新增每天下方显示数值

小程序开发相关产品技术讨论，包括面板、智能小程序、React Native、Ray跨端框架、Panel SDK、微信小程序、小程序开发工具（IDE）及其他开发技术相关等话题


Post Reply
xinlei
Posts: 2

  • Tuya MiniApp IDE 版本信息：2.1.1

    我们有一个小程序需求，就是显示每天的用电量，需要在日历组件下进行显示，如图显示：

    iShot_2025-09-01_18.39.31.png

我们看了现有的日历组件，好像没办法实现这样的显示。 不知道开发组是否可以支持上去呀，非常感谢！

Tags:
已解决
求助
物料
muhai
Posts: 137

Re: Calendar日历可否新增每天下方显示数值

可以的，现有版本可以这样写：
css样式代码

Code: Select all

:root {
  --calendar-selected-day-size: 60px;
}

.smart-calendar__selected-day {
  border-radius: 4px;
  align-items: flex-start;
  padding-top: 10px;
}
.smart-calendar__day:not(.smart-calendar__day--selected) {
  padding-top: 10px;
  align-items: flex-start;
  position: relative;
  top: -4px;
}


.smart-calendar__day[data-index="0"]::after {
  display: block;
  color: red;
  content: var(--day-value-0);
  position: absolute;
  bottom: 2px;
}

.smart-calendar__day[data-index="1"]::after {
  display: block;
  color: red;
  content: var(--day-value-1);
  position: absolute;
  bottom: 2px;
}

.smart-calendar__day[data-index="2"]::after {
  display: block;
  color: red;
  content: var(--day-value-2);
  position: absolute;
  bottom: 2px;
}

.smart-calendar__day[data-index="3"]::after {
  display: block;
  color: red;
  content: var(--day-value-3);
  position: absolute;
  bottom: 2px;
}

.smart-calendar__day[data-index="4"]::after {
  display: block;
  color: red;
  content: var(--day-value-4);
  position: absolute;
  bottom: 2px;
}

.smart-calendar__day[data-index="5"]::after {
  display: block;
  color: red;
  content: var(--day-value-5);
  position: absolute;
  bottom: 2px;
}

.smart-calendar__day[data-index="6"]::after {
  display: block;
  color: red;
  content: var(--day-value-6);
  position: absolute;
  bottom: 2px;
}

.smart-calendar__day[data-index="7"]::after {
  display: block;
  color: red;
  content: var(--day-value-7);
  position: absolute;
  bottom: 2px;
}

.smart-calendar__day[data-index="8"]::after {
  display: block;
  color: red;
  content: var(--day-value-8);
  position: absolute;
  bottom: 2px;
}

.smart-calendar__day[data-index="9"]::after {
  display: block;
  color: red;
  content: var(--day-value-9);
  position: absolute;
  bottom: 2px;
}

.smart-calendar__day[data-index="10"]::after {
  display: block;
  color: red;
  content: var(--day-value-10);
  position: absolute;
  bottom: 2px;
}

.smart-calendar__day[data-index="11"]::after {
  display: block;
  color: red;
  content: var(--day-value-11);
  position: absolute;
  bottom: 2px;
}

.smart-calendar__day[data-index="12"]::after {
  display: block;
  color: red;
  content: var(--day-value-12);
  position: absolute;
  bottom: 2px;
}

.smart-calendar__day[data-index="13"]::after {
  display: block;
  color: red;
  content: var(--day-value-13);
  position: absolute;
  bottom: 2px;
}

.smart-calendar__day[data-index="14"]::after {
  display: block;
  color: red;
  content: var(--day-value-14);
  position: absolute;
  bottom: 2px;
}

.smart-calendar__day[data-index="15"]::after {
  display: block;
  color: red;
  content: var(--day-value-15);
  position: absolute;
  bottom: 2px;
}

.smart-calendar__day[data-index="16"]::after {
  display: block;
  color: red;
  content: var(--day-value-16);
  position: absolute;
  bottom: 2px;
}

.smart-calendar__day[data-index="17"]::after {
  display: block;
  color: red;
  content: var(--day-value-17);
  position: absolute;
  bottom: 2px;
}

.smart-calendar__day[data-index="18"]::after {
  display: block;
  color: red;
  content: var(--day-value-18);
  position: absolute;
  bottom: 2px;
}

.smart-calendar__day[data-index="19"]::after {
  display: block;
  color: red;
  content: var(--day-value-19);
  position: absolute;
  bottom: 2px;
}

.smart-calendar__day[data-index="20"]::after {
  display: block;
  color: red;
  content: var(--day-value-20);
  position: absolute;
  bottom: 2px;
}

.smart-calendar__day[data-index="21"]::after {
  display: block;
  color: red;
  content: var(--day-value-21);
  position: absolute;
  bottom: 2px;
}

.smart-calendar__day[data-index="22"]::after {
  display: block;
  color: red;
  content: var(--day-value-22);
  position: absolute;
  bottom: 2px;
}

.smart-calendar__day[data-index="23"]::after {
  display: block;
  color: red;
  content: var(--day-value-23);
  position: absolute;
  bottom: 2px;
}

.smart-calendar__day[data-index="24"]::after {
  display: block;
  color: red;
  content: var(--day-value-24);
  position: absolute;
  bottom: 2px;
}

.smart-calendar__day[data-index="25"]::after {
  display: block;
  color: red;
  content: var(--day-value-25);
  position: absolute;
  bottom: 2px;
}

.smart-calendar__day[data-index="26"]::after {
  display: block;
  color: red;
  content: var(--day-value-26);
  position: absolute;
  bottom: 2px;
}

.smart-calendar__day[data-index="27"]::after {
  display: block;
  color: red;
  content: var(--day-value-27);
  position: absolute;
  bottom: 2px;
}

.smart-calendar__day[data-index="28"]::after {
  display: block;
  color: red;
  content: var(--day-value-28);
  position: absolute;
  bottom: 2px;
}

.smart-calendar__day[data-index="29"]::after {
  display: block;
  color: red;
  content: var(--day-value-29);
  position: absolute;
  bottom: 2px;
}

.smart-calendar__day[data-index="30"]::after {
  display: block;
  color: red;
  content: var(--day-value-30);
  position: absolute;
  bottom: 2px;
}

.smart-calendar__day:not(.smart-calendar__day--selected)::after {
  bottom: -6px;
}

页面代码：

Code: Select all

import React, { useState, useMemo } from 'react';
import { Calendar } from '@ray-js/smart-ui';
import { View } from '@ray-js/ray';

export default function Demo() {
  const [curDayDate, setCurDayDate] = useState<any>(new Date(2024, 0, 15).getTime());
  const minDayDate = new Date(2024, 0, 4).getTime();
  const maxDayDate = new Date(2024, 1, 20).getTime();

  const locale = {
    shortWeekDays: [
      '日',
      '一',
      '二',
      '三',
      '四',
      '五',
      '六',
    ],
    subFormatter: 'YYYY' + "年" + 'MM' + "月",
  }


  return (
    <View style={{
     // 这里可以传每天的值
      '--day-value-0': '"12.3"',
      '--day-value-14': '"32.3"',
      '--day-value-18': '"25.3"',
    }}>
      <Calendar
        title="日历"
        locale={locale}
        minDate={minDayDate}
        maxDate={maxDayDate}
        defaultDate={curDayDate}
        onSelect={e => {
          setCurDayDate(e.detail);
        }}
      />
    </View>
  );
}

效果：

截屏2025-09-05 10.35.34.png
muhai
Posts: 137

Re: Calendar日历可否新增每天下方显示数值

css代码放在src/app.less中

xinlei
Posts: 2

Re: Calendar日历可否新增每天下方显示数值

太棒了！感谢

Post Reply