@4lolo/js-year-calendar 中文文档教程

Question

js-year-calendar

一个完全可定制的年历小部件

这个库也可用于：

Requirements

这个插件使用纯javascript。 不需要图书馆。

Installation

您可以使用以下方法获取小部件：

• From the GitHub repository
• From the Node package manager, using the following command: npm install js-year-calendar
• From Yarn, using the following command: yarn add js-year-calendar
• From the CDN, by adding the following script directly in your HTML page:

AND

Initialization

如果您使用的是 javascript 模块，请不要忘记导入库：

import Calendar from 'js-year-calendar';
import 'js-year-calendar/dist/js-year-calendar.css';

Usage

您可以使用以下 javascript 代码创建日历：

new Calendar('.calendar')

或

new Calendar(document.querySelector('.calendar'));

Where .calendar 是应包含日历的 DIV 元素的选择器。

如果您不想使用 javascript 初始化日历，您也可以使用以下 HTML

<div data-provide="calendar"></div>

页面加载完成时将自动创建日历

Using options

您可以指定选项来自定义日历：

new Calendar('.calendar', {
    style: 'background',
    minDate: new Date()
})

您可以在中找到详尽的选项列表文档。

Language

如果你想使用不同语言的日历，你应该导入你想使用的语言对应的语言环境文件，然后设置日历的 language 属性：

import Calendar from 'js-year-calendar';
import 'js-year-calendar/locales/js-year-calendar.fr';

或者

<script src="https://unpkg.com/js-year-calendar@latest/dist/js-year-calendar.umd.min.js"></script>
<script src="https://unpkg.com/js-year-calendar@latest/locales/js-year-calendar.fr.js"></script>

Then

new Calendar('.calendar', {
    language: 'fr'
})

The list of available语言在此处可用，

Updating calendar

您可以在实例化后更新日历：

const calendar = new Calendar('.calendar');

calendar.setStyle('background');
calendar.setMaxDate(new Date());

您可以找到文档中的详尽方法列表。

Events

将事件绑定到日历

const calendar = new Calendar('.calendar', {
    clickDay: function(e) {
        alert('Click on day ' + e.date.toString());
    }
});

您可以在初始化时或之后

new Calendar('.calendar');
document.querySelector('.calendar').addEventListener('clickDay', function(e) {
    alert('Click on day ' + e.date.toString());
});

您可以在文档。

Migrating from bootstrap-year-calendar

此小部件基于 bootstrap-year-calendar 小部件。 如果您使用的是这个小部件，这些是应用到成功迁移项目的修改：

Initialization

该项目不再使用 jQuery，因此日历的初始化将使用纯 Javascript。

旧代码：

$('.calendar').calendar({ /* Options */ })

将被替换为：

new Calendar('.calendar', { /* Options */ });

或者

new Calendar($('.calendar').get(0), { /* Options */ });
// Use ".get(0)" to get the DOM element from the jQuery element

Get the calendar from the DOM element

鉴于小部件不依赖于 jQuery，将无法再从 DOM 元素获取日历实例：

$('.calendar').data('calendar').set...();

您必须自己存储日历实例：

const calendar = new Calendar('.calendar');

...

calendar.set...();

What next

查看文档和examples 页面来发现所有的功能。