Skip to content

创建新的日历主题

Jump to bottom
小叉 edited this page May 12, 2022 · 2 revisions

流程

  1. Fork 一个新分支；
  2. 将 themes/__template/ 文件夹，复制并重命名，如：themes/my-theme ；

文件命名规则，统一使用连接符 - 拼接的形式。

  1. 在 index.html 中的新增一行主题配置，然后开始创作吧。
// index.html
window.pageData = {
  devMode: true, // 启用开发模式，会禁用缓存，更方便
  themes: [
    {id: 'my-theme', name: '我的主题'},
  ]
};

HTML 结构

<div class="calendar">
  <section>
    <div class="hd">
      <span class="year">2022</span>
      <span class="month">1</span>
    </div>
    <div class="bd">
      <ol class="week">
        <li class="week_0 sun"></li>
        <li class="week_1"></li>
        <li class="week_2"></li>
        <li class="week_3"></li>
        <li class="week_4"></li>
        <li class="week_5"></li>
        <li class="week_6 sat"></li>
      </ol>
      <ol class="days">
        <li class="sat holiday"> <!-- 此处会根据周末、节假日等添加不同的 class -->
          <div class="item">
            <span class="week">1</span>
            <span class="num">1</span>
            <span class="name">元旦</span>
          </div>
        </li>
      </ol>
    </div>
  </section>
</div>

CSS 说明

/**
 * 日历
 * ------------------------------ */
.calendar{}
.calendar section{}

.calendar .hd{}
.calendar .hd span{}
.calendar .hd .year{}
.calendar .hd .month{}

.calendar .bd{}

/* 日期排版方式 每周一行 */
.calendar .bd ol{
display:flex;
flex-wrap:wrap;
justify-content:center;
}
.calendar .bd li{
flex:0 0 14.25%;
}
.calendar .bd li:nth-child(7n){
flex-basis:14.5%;
}

/* 星期 */
.calendar .weeks{}
.calendar .weeks li.week_0:before{content:'日';}
.calendar .weeks li.week_1:before{content:'一';}
.calendar .weeks li.week_2:before{content:'二';}
.calendar .weeks li.week_3:before{content:'三';}
.calendar .weeks li.week_4:before{content:'四';}
.calendar .weeks li.week_5:before{content:'五';}
.calendar .weeks li.week_6:before{content:'六';}

/**
 * 日期
 * .num       数字日期
 * .name      日期名称
 * .week      第几周
 */
.calendar .days{}
.calendar .days .item{}
.calendar .days span{}
.calendar .days .num{}
.calendar .days .name{}
.calendar .days .week{}

/**
 * 特殊日期
 * .sat       周六
 * .sun       周日
 * .holiday   休息日
 * .workday   工作日（被调休的）
 * .now       今天
 * .other     前后月份填充的日期
 */
.calendar .days .sat{}
.calendar .days .sun{}
.calendar .days .holiday{}
.calendar .days .workday{}

.calendar .days .holiday .item{}
.calendar .days .workday .item{}
.calendar .days .now .item{}
.calendar .days .other .item{}

.calendar .days .other,
.calendar .days .other.workday,
.calendar .days .other.sat.workday,
.calendar .days .other.sun.workday{}

.calendar .days .other.sat{}
.calendar .days .other.sun,
.calendar .days .other.holiday,
.calendar .days .other.sat.holiday,
.calendar .days .other.sun.holiday{}

.calendar .days .other.holiday .item{}
.calendar .days .other.workday .item{}

/* 隐藏前后月份的日期 */
.calendar.hide_fillday .days .other{}
.calendar.hide_fillday .days .other .item{visibility:hidden;}

/* 隐藏周数 */
.calendar.hide_yearweek .days .week{display:none;}

版权声明

主题作者，可以在自己创建的主题 layout.css 文件顶部使用注释进行版权声明。

ZenCalendar 使用 MIT License ，提交到该项目视为使用相同的许可协议。
如果您不愿意使用该协议，请勿进行提交。

示例：

/**
 * @name 主题名称
 * @author 作者
 * @email 联系邮箱
 * @description 简介
 * @license Released under the MIT license
 */
Clone this wiki locally