带事件的日历插件TavoCalendar.js

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');
})