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

JavaScript事件日历和日期选择器 – TavoCalendar
栏目分类:日期 / 时间   发布日期:2021-10-22   浏览次数:

TavoCalendar 是一个基于 Vanilla JavaScrip 的内联日历,用户可以在其中选择日期(或日期范围)或单击鼠标查看事件。

更多功能:

  • 预先选定的日期。

  • 突出显示和忽略日期。

  • 多种语言。

  • 自定义日期格式。

  • API 方法和事件处理程序。

如何使用它:

1.在文档中加载所需的moment.js库。

<!-- 与本地人--> 
<script src="/uploads/allimg/211022/10002T2c-0.jpg" ></script > 
<!-- 没有本地人--> 
<script src="/uploads/allimg/211022/10002R4A-1.jpg" ></script>

2. 加载 TavoCalendar 的 JavaScript 和 CSS 文件。

<link rel="stylesheet" href="./dist/tavo-calendar.css" /> 
<script src="./dist/tavo-calendar.js"></script>

3. 创建一个容器来保存日历视图。

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

4. 初始化库,在页面上生成一个基本的日历。

const myCalendar = new TavoCalendar('#my-calendar', { 
      // 此处设置
})

5. 设置日历应关注的日期。

const myCalendar = new TavoCalendar('#my-calendar', { 
      date: "2020-03-15"
})

6. 设置一组预选日期。

const myCalendar = new TavoCalendar('#my-calendar', { 
      date: "2020-03-15", 
      selected: ['2020-03-20', '2020-03-21'] 
})

7. 启用日期范围选择。

const myCalendar = new TavoCalendar('#my-calendar', { 
      date: "2020-12-21", 
      date_start: "2020-12-20", 
      date_end: "2020-12-25", 
      range_select: true
})

8. 确定日期格式。默认为“YYYY-MM-DD”。

const myCalendar = new TavoCalendar('#my-calendar', { 
      format: "MM-DD-YYYY"
})

9. 创建多语言日历。需要moment-with-locales.min.js如上所述。

const myCalendar = new TavoCalendar('#my-calendar', { 
      locale: "cn"
})

10. 启用/禁用交互。

const myCalendar = new TavoCalendar('#my-calendar', { 
      multi_select: false, 
      future_select: true, 
      past_select: false, 
      frozen: false
})

11. 指定一组要突出显示或忽略的日期。

const myCalendar = new TavoCalendar('#my-calendar', { 
      highlight: [/*2012-12-23*/], 
      blacklist: [/*2012-12-24*/] 
})


12. 确定是否突出显示星期日和/或星期六。默认值:true。

const myCalendar = new TavoCalendar('#my-calendar', { 
      highligh_sunday: false, 
      highlight_saturday: false
})

13. API 方法。

// 获取选定的日期
myCalendar.getSelected(); 
 
// 获取开始日期
myCalendar.getStartDate(); 
 
// 获取结束日期
myCalendar.getEndDate(); 
 
// 获取日期范围
// { start: '2012-12-10', end: '2012-12-15'} 
myCalendar.getRange(); 
 
// 获取焦点年份
myCalendar.getFocusYear(); 
 
// 获取焦点月份
myCalendar.getFocusMonth(); 
 
// 获取焦点日期
myCalendar.getFocusDay(); 
 
// 获取配置对象
myCalendar.getConfig(); 
 
// 获取当前状态
myCalendar.getState(); 
 
// 设置配置和同步
myCalendar.sync(obj);

14. 事件处理程序。

myCalendar.addEventListener('calendar-range', (ev) => {
  const range = myCalendar.getRange();
  console.log('Start', range.start)
  console.log('End', range.end)
});
 
myCalendar.addEventListener('calendar-change', (ev) => {
  const m = myCalendar.getFocusMonth();
  alert(`Month change to ${m}`);
})
 
myCalendar.addEventListener('calendar-select', (ev) => {
  alert(myCalendar.getSelected());
})
 
myCalendar.addEventListener('calendar-reset', (ev) => {
  alert('reset');
})


官方网站:https://github.com/beinoriusju/TavoCalendar

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