跳转至

日历控件 (SCalendar)

日历控件提供了日期的可视化展示和选择功能，支持月份浏览、年份选择等功能，是处理日期相关操作的理想选择。

基本信息

  • 类名：SCalendar
  • 控件标签：calendar
  • 基类：SWindow
  • 功能：提供日期显示和选择功能

属性说明

SCalendar 标签为 calendar，继承自 SWindow。

自身属性

属性名 类型 默认值 说明
yearHeight layoutsize - 年份/月份标题栏高度
weekHeight layoutsize - 星期标题栏高度
todayHeight layoutsize - 底部"今天"栏高度
colorSelText color - 选中日文本颜色
colorOtherText color - 非本月日期文本颜色
colorSelBg color - 选中日背景颜色
colorHoverText color - 悬停日文本颜色
prevSkin string - "上一月"按钮皮肤
nextSkin string - "下一月"按钮皮肤
daySkin string - 日期格子皮肤
weekSkin string - 星期标题皮肤
textSunday ~ textSaturday string - 周日~周六的表头文本（支持 @string/xxx 引用）

text、字体、颜色、可用、可见等通用属性见通用属性。

使用示例

基本日历

<calendar name="calBasic" 
          pos="10,10,210,210" 
          colorText="#333333"
          colorSelText="#FFFFFF"
          colorTitle="#1E90FF"/>

自定义样式日历

<calendar name="calCustom" 
          pos="220,10,420,210" 
          titleHeight="30"
          weekHeight="25"
          dayHeight="28"
          showToday="1"
          fontTitle="size:14,bold:1"
          fontDay="size:12"
          colorTitle="#1E90FF"
          colorText="#666666"
          colorSelText="#FFFFFF"
          colorTodayText="#FF4081"
          skinArrow="cal_arrow"
          skinDay="cal_day"/>

嵌入式日历

<window pos="10,220,410,420" layout="vbox">
    <text text="请选择日期："/>
    <calendar name="calEmbed" 
              size="-2,-1"
              autoSize="1"
              margin="0,10,0,0"/>
</window>

事件处理

日历控件支持以下事件：

事件名 EventID 说明
EVT_CALENDAR_SELCHANGED EventCalendarSelChanged::EventID 日期选择改变事件
EVT_CALENDAR_DOUBLECLICK EventCalendarDoubleClick::EventID 日期双击事件

事件处理示例

// 事件处理示例
EVENT_MAP_BEGIN()
    EVENT_NAME_HANDLER(L"calBasic", EventCalendarSelChanged::EventID, OnCalendarSelChanged)
EVENT_MAP_END()

void OnCalendarSelChanged(IEvtArgs *pEvt)
{
    EventCalendarSelChanged *pRealEvt = sobj_cast<EventCalendarSelChanged>(pEvt);
    SYSTEMTIME st = pRealEvt->st;
    // 处理日期选择改变事件
}

代码操作

// 查找日历控件
SCalendar *pCalendar = FindChildByName2<SCalendar>(L"calBasic");

// 获取当前选择的日期
SYSTEMTIME st;
pCalendar->GetSelectDate(&st);

// 设置选择的日期
SYSTEMTIME newSt = {0};
newSt.wYear = 2024;
newSt.wMonth = 1;
newSt.wDay = 1;
pCalendar->SetSelectDate(&newSt);

// 刷新日历显示
pCalendar->Invalidate();

// 设置星期文本
pCalendar->SetAttribute(L"textSunday", L"Sun");
pCalendar->SetAttribute(L"textMonday", L"Mon");

格式化日期

SStringT FormatDate(const SYSTEMTIME &st)
{
    SStringT strDate;

    // 标准格式
    strDate.Format(_T("%d年%d月%d日"), 
                   st.wYear, st.wMonth, st.wDay);

    // 长格式
    TCHAR szDate[64];
    GetDateFormat(LOCALE_USER_DEFAULT, 
                 DATE_LONGDATE, 
                 &st, 
                 NULL, 
                 szDate, 
                 64);
    return szDate;
}

样式定制

基本样式

<style>
    <class name="calStyle"
           titleHeight="30"
           weekHeight="25"
           dayHeight="28"
           colorTitle="#1E90FF"
           colorText="#666666"
           colorSelText="#FFFFFF"
           colorTodayText="#FF4081"/>
</style>

<calendar class="calStyle"/>

自定义日期单元格

<calendar name="calTemplate">
    <template>
        <window class="dayCell" 
                layout="vbox" 
                gravity="center">
            <text name="day" 
                  font="bold:1"/>
            <text name="lunar" 
                  font="size:10"/>
        </window>
    </template>
</calendar>

最佳实践

  1. 视觉设计：通过 colorSelText、colorSelBg 等属性创建清晰的选中状态视觉效果
  2. 皮肤定制：使用 prevSkin、nextSkin 等属性定制导航按钮外观
  3. 本地化支持：通过 textSunday 等文本属性实现多语言支持

常见问题

日期显示问题

  • 检查日期格式
  • 确认字体设置
  • 验证区域设置

选择操作问题

  • 检查事件处理
  • 确认日期范围
  • 验证状态更新

样式显示问题

  • 检查皮肤资源
  • 确认颜色设置
  • 验证布局结构

相关控件