当前位置:主页 > JavsScript库 > 日期 / 时间 >

带有月/年选择的可定制事件日历 - color-calendar
栏目分类:日期 / 时间   发布日期:2021-09-01   浏览次数:

一个灵活的、可定制的、主题化的事件日历和月/年选择器组件,用 vanilla JavaScript 编写。

使用:

1. 安装并导入颜色日历作为 ES 模块。

# NPM
$ npm i color-calendar
import Calendar from 'color-calendar';
import 'color-calendar/dist/css/theme-basic.css';
import 'color-calendar/dist/css/theme-glass.css';

2. 或者直接加载文档中的 JavaScript 和 CSS 文件。

<link rel="stylesheet" href="/css/theme-basic.css" />
<link rel="stylesheet" href="/css/theme-glass.css" />
<script src="/dist/bundle.min.js"></script>

3. 创建一个容器来保存事件日历。

<div id="color-calendar"></div>

4. 初始化日历并完成。

new Calendar({
    id: '#color-calendar',
})

5. 用事件初始化日历。

const myEvents = [
      {
        start: '2021-04-15T06:00:00',
        end: '2021-04-15T20:30:00',
        name: 'Event 1',
        url: 'https://www.html369.cn',
        desc: 'Description 1',
        // 这里有更多的键值对
      },{
        start: '2021-04-16T06:00:00',
        end: '2021-04-16T20:30:00',
        name: 'Event 2',
        url: 'https://www.html369.cn',
      },{
        start: '2021-04-16T06:00:00',
        end: '2021-04-17T20:30:00',
        name: 'Event 3',
        url: 'https://www.html369.cn',
      },
],
new Calendar({
    id: '#color-calendar',
    eventsData: myEvents,
})

6. 自定义事件日历的可用选项。

new Calendar({ 
 
    // 小或大
    calendarSize: 'large', 
 
    // 布局修饰符数组
    layoutModifiers: 'month-align-left', 
     
    // basic | glass 
    theme: 'glass', 
 
    // 自定义颜色
    primaryColor: ' #1a237e', 
    headerColor: 'rgb(0, 102, 0)', 
    headerBackgroundColor: 'black', 
    weekdaysColor: 'based on theme',
 
    // short | long-lower | long-upper 
    weekdayDisplayType: 'short', 
 
    // short | long 
    monthDisplayType: 'long', 
 
    // 0 (Sun) 
    startWeekday: 0, 
 
    // 字体系列
    fontFamilyHeader: 'based on theme',
    fontFamilyWeekdays: 'based on theme',
    fontFamilyBody: 'based on theme',
 
    // 阴影 CSS 
    dropShadow: 'based on theme',
 
    // 边框 CSS
    border: based on theme',
 
    // 边框半径
    borderRadius: '0.5rem',
 
    // 禁用月份年份选择器
    disableMonthYearPickers: false, 
 
    // 禁用点击日期
    disableDayClick: false, 
 
    // 禁用箭头在月份之间导航
    disableMonthArrowClick: false
     
})

7. 事件。

new Calendar({
    dateChanged: (currentDate, DateEvents) => {
      // 做些什么
    },
    monthChanged: (currentDate, DateEvents) => {
      // 做些什么
    };
})

8. API 事件。

// 设置日期 
instance.setDate(date);
 
// 重启 
instance.reset();
 
// 获取选择的日期
instance.getSelectedDate();
 
//设置事件 
instance.setEventsData(eventArray);
 
// 添加事件
instance.addEventsData(eventArray)
 
// 获取事件数据
实例.getEventsData();
 
// 设置工作日显示类型
instance.setWeekdayDisplayType(type);
 
// 设置月份显示类型
instance.setMonthDisplayType(type);


官方网站:https://github.com/PawanKolhe/color-calendar

声源:本站内容均来自互联网,仅供交流学习之用,请勿作商业用途,所有资源版权归原作者所有。如果有侵犯到您的权益,请联系本站删除,谢谢合作!
jQuery库 JavsScript库 Html5库 CSS3库