y-calendar

日历插件

安装

  npm i y-calendar -S

使用

// 引入插件
import {Calendar} from 'y-calendar';
// 如果使用插件自带的样式
import 'y-calendar/lib/style/y-calendar.css';

使用自带默认渲染

const instance = new Calendar({
    isRender: true, // 默认false,需要设置true
    renderConfig: {
        id: 'root', // 所挂载元素id
        el: HTMLElement, // 挂载的元素，el优先级高于id
    }
});

• 自带样式效果图

---

若只使用数据，自定义样式效果

// 不填写任何配置，则默认当地时区当天日期
const instance0 = new Calendar();
// 自定义日期配置
const instance1 = new Calendar({
    dateConfig: {
        date: '2023-5-23', 
        year: 2023, // 优先级高于date
        month: 7, // 优先级高于date
        day: 23, // 优先级高于date
    }
});
// 日历相关数据
const calendarData = instance.calendarData;

// 重新计算获取日历相关数据
const calendarData2 = instance.getCalendarData({
    year: 2023,
    month: 9,
    day: 23
});