Skip to content

A Calendar Library Written in Javascript, with Web Components v1, ECMAScript 6 (2015+) and CSS3.

License

Notifications You must be signed in to change notification settings

jinliming2/Calendar-js

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

45 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Calendar-js

Testing GitHub license GitHub stars GitHub forks GitHub issues

An Calendar library written in JS, based on Web Components v1, ES6(ES2015+) and CSS3.

一个使用 JS 编写的日历库,遵循 Web Components v1 + ES6(ES2015+) + CSS3 标准

Before Use 写在前面

This Library is based on ES6 and CSS3, so it just work well in newer browsers.

这个类库的开始就是以 ES6 + CSS3 为基础的,不对旧版本浏览器进行兼容,在新版本的浏览器中可以直接使用。

This Library is based on Web Components v1, so it's can only work on Chrome 54+, Firefox 63+, Opera 41+, Safari 10.1, and if you want to use it on Firefox 50+, you must go to about:config and turn on the switch named dom.webcomponents.customelements.enabled and dom.webcomponents.shadowdom.enabled.

使用到 Web Components v1 技术,目前 Chrome 54+、Firefox 63+、Opera 41+、Safari 10.1 可以直接使用,FireFox 50+ 需要在 about:config 中开启 dom.webcomponents.customelements.enableddom.webcomponents.shadowdom.enabled 开关才可以使用。

This is the first time I try to write documents in English, please tell me if I have any syntax error, Thanks!

第一次完全使用英文注释,如有英语语法错误,请告知,谢谢!

Known Problems 已知问题

  • Firefox(Nightly 51.0a1 2016-08-09)发现在 Shadow Dom 中控制 Element 的 display: none 样式时,会导致页面崩溃

    此问题在使用 Web Components v1 标准重构后不再存在,应该是之前 Firefox 实现 v0 规范时的 Bug。

Citation 引用说明

农历计算部分相关算法参考自 zzyss86/LunarCalendar

Usage 使用方法

  • Download the newest archives in GitHub ReleaseGitHub Release.

从 GitHub ReleaseGitHub Release 下载最新版本类库。

  • Import Calendar.js Module in your web page. (Notice: If the class library is not under src, you should also modify the CSS file import path in the templates.js file.)

在页面中包含 Calendar.js 模块。(注意:如果类库目录不在 src 下,应该同时修改 templates.js 文件中的 CSS 文件导入路径。)

<!-- Must be imported as module by using the `type="module"` -->
<!-- 必须使用 `type="module"` 模块形式导入 -->
<script type="module" src="./src/Calendar.js"></script>
  • Use the tag <demo-calendar id="calendar"></demo-calendar> directly in your HTML document.

直接在你的 HTML 文档中使用标签 <demo-calendar id="calendar"></demo-calendar> 即可。

  • Can be operated through the API on the DOM node:

可以通过 DOM 节点上的 API 进行操作:

const calendar = document.getElementById('calendar');  // Or querySelector, getElementsByTagName, etc.
console.log(calendar.year, calendar.month, calendar.date);
calendar.lastYear();
calendar.nextMonth();
// ......