Easy UI

Appearance

Calendar 日历 ​

显示日期，支持按钮/下拉控制器和国际化。

引入 ​

html
<script type="module">
  import "./node_modules/easy-component-ui/dist/components/ea-calendar.js";
</script>
js
import "easy-component-ui/ea-calendar";

自定义样式 ​

移步到 CSS Part 和 CSS Custom Properties。

基础用法 ​

查看代码
html
<ea-calendar></ea-calendar>

自定义日期 ​

通过设置 value 属性可以自定义显示的日期

查看代码
html
<ea-calendar value="2024-05-01"></ea-calendar>

控制器类型 ​

通过设置 controller-type 属性可以选择控制器类型，支持 button（默认）和 select 两种类型

buttonselect

查看代码
html
<div class="demo">
  <p>
    <ea-radio-group id="controllerCalendarRadio" value="button">
      <ea-radio value="button">button</ea-radio>
      <ea-radio value="select">select</ea-radio>
    </ea-radio-group>
  </p>
  <ea-calendar id="controllerCalendarCalendar"></ea-calendar>
</div>
js
const controllerExample = {
  radio: document.querySelector("#controllerCalendarRadio"),
  calendar: document.querySelector("#controllerCalendarCalendar"),

  init() {
    this.radio.addEventListener("change", e => {
      this.calendar.setAttribute("controller-type", e.detail.value);
    });
  },
};

controllerExample.init();

国际化 ​

通过设置 locale 属性可以控制日历的语言（影响月份和星期名称的显示）

en-USzh-CN

查看代码
html
<div class="demo">
  <p>
    <ea-radio-group id="localeCalendarRadio" value="en-US">
      <ea-radio value="en-US">en-US</ea-radio>
      <ea-radio value="zh-CN">zh-CN</ea-radio>
    </ea-radio-group>
  </p>
  <ea-calendar id="localeCalendarCalendar"></ea-calendar>
</div>
js
const localeExample = {
  radio: document.querySelector("#localeCalendarRadio"),
  calendar: document.querySelector("#localeCalendarCalendar"),

  init() {
    this.radio.addEventListener("change", e => {
      this.calendar.setAttribute("locale", e.detail.value);
    });
  },
};

localeExample.init();

EaCalendar API ​

EaCalendar Attributes ​

参数说明类型可选值默认值
value指定日期String——
controller-type控制器类型Stringbutton | selectbutton
locale语言设置Stringen-US | zh-CNen-US

EaCalendar CSS Part ​

名称说明
container外层容器
header头部容器
title标题部分
controller-wrapper控制器包装器
controller-group控制器组
controller控制器通用部分
prev上一月控制器
next下一月控制器
current当前/今天控制器
year年份选择器
month月份选择器
body主体表格
thead表头
thead-tr表头行
th表头单元格
tbody表体
row日期行
day日期单元格
prev-month上月日期单元格
current-month当月日期单元格
next-month下月日期单元格

EaCalendar Slots ​

名称说明
header头部插槽，用于自定义头部内容

EaCalendar Events ​

事件名称说明回调参数
ea-select选择日期时触发{ year, month, date, day, fullDate }

EaCalendar CSS Custom Properties ​

属性名说明默认值
--ea-calendar-bg-color组件背景颜色var(--white)
--ea-calendar-border-color组件边框颜色var(--grey-200)
--ea-calendar-border-radius组件圆角var(--border-radius)
--ea-calendar-shadow组件阴影var(--box-shadow-sm)
--ea-calendar-header-padding头部内边距var(--spacing-md)
--ea-calendar-header-title-font-size标题字体大小var(--font-size-lg)
--ea-calendar-header-title-font-weight标题字体粗细var(--font-weight-bold)
--ea-calendar-header-title-color标题颜色var(--grey-900)
--ea-calendar-body-padding主体内边距var(--spacing-md)
--ea-calendar-thead-bg-color表头背景颜色var(--grey-100)
--ea-calendar-th-color表头单元格颜色var(--grey-700)
--ea-calendar-th-font-weight表头单元格字体粗细var(--font-weight-md)
--ea-calendar-th-padding表头单元格内边距var(--spacing-md) 0
--ea-calendar-th-border-color表头单元格边框颜色var(--grey-200)
--ea-calendar-day-height日期单元格高度40px
--ea-calendar-day-hover-bg-color日期悬停背景颜色var(--grey-100)
--ea-calendar-day-active-bg-color选中日期背景颜色var(--blue-500)
--ea-calendar-day-active-color选中日期文字颜色var(--white)
--ea-calendar-day-active-border-color选中日期边框颜色var(--blue-500)
--ea-calendar-day-active-hover-bg-color选中日期悬停背景颜色var(--blue-400)
--ea-calendar-day-today-color今日日期文字颜色var(--blue-500)
--ea-calendar-day-today-font-weight今日日期字体粗细var(--font-weight-bold)
--ea-calendar-day-out-of-range-color非当月日期文字颜色var(--grey-400)
--ea-calendar-day-out-of-range-hover-color非当月日期悬停文字颜色var(--grey-500)
--ea-calendar-day-out-of-range-hover-bg-color非当月日期悬停背景颜色var(--grey-100)
--ea-calendar-controller-year-width年份选择器宽度120px
--ea-calendar-controller-month-width月份选择器宽度100px
--ea-calendar-controller-group-gap控制器组间距var(--spacing-sm)