带事件的日历插件TavoCalendar.js

带事件的日历插件TavoCalendar.js源码下载

看看谁在用

查看文件结构

文件大小:0.06M

资源分类: 插件-时间

更新时间: 2021-04-21

TavoCalendar是基于JavaScrip的内联日历,用户可以选择一个日期或日期范围或视图用鼠标单击事件。

基础调用
const myCalendar = new TavoCalendar('#my-calendar', {
      // settings here
})
设置关于的日期
const myCalendar = new TavoCalendar('#my-calendar', {
      date: "2020-03-15"
})
也可以设置多个
const myCalendar = new TavoCalendar('#my-calendar', {
      date: "2020-03-15",
      selected: ['2020-03-20', '2020-03-21']
})
或者是范围
const myCalendar = new TavoCalendar('#my-calendar', {
      date: "2020-12-21",
      date_start: "2020-12-20",
      date_end: "2020-12-25",
      range_select: true
})
日期格式化
const myCalendar = new TavoCalendar('#my-calendar', {
      format: "MM-DD-YYYY"
})
一些api方法
// get selected date(s)
myCalendar.getSelected();

// get start date
myCalendar.getStartDate();

// get end date
myCalendar.getEndDate();

// get date range
// { start: '2012-12-10', end: '2012-12-15'}
myCalendar.getRange();

// get focus year
myCalendar.getFocusYear();

// get focus month
myCalendar.getFocusMonth();

// get focus date
myCalendar.getFocusDay();

// get config object
myCalendar.getConfig();

// get current state
myCalendar.getState();

// set both config and sync
myCalendar.sync(obj);
事件处理
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');
})

带事件的日历插件TavoCalendar.js

正在加载文件目录...

也许你还喜欢

  1. jQuery自定义日历事项查看插件
  2. jquery周日历插件带详细事件
  3. calendar.js日历带事件
  4. js拖拽选择日期范围
  5. react.js实现的时间轴特效
  6. js简约设计时钟网页特效代码
美化边框滚动条插件OverlayScrollbars.js
  • 标签查找|关于我们|用户协议|格式化工具|bootstrapmb.com 版权所有 苏ICP备17077179号-2