Tiny Event Calendar & Date Picker In JavaScript – TavoCalendar

Preview:

Description:

TavoCalendar is a Vanilla JavaScrip based inline calendar where the users are able to select a date (or a date range) or view events with mouse click.

More Features:

• Pre-selected dates.
• Highlight & ignore dates.
• Multiple languages.
• Custom date formats.
• API methods and event handlers.

How to use it:

1. Load the required moment.js library in the document.

<!-- With locals-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment-with-locales.min.js" ></script>
<!-- Without locals-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js" ></script>

2. Load the TavoCalendar’s JavaScript and CSS files.

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

3. Create a container to hold the calendar view.

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

4. Initialize the library to generate a basic calendar on the page.

const myCalendar = new TavoCalendar('#my-calendar', {
      // settings here
})

5. Set the date the calendar should focus.

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

6. Set an array of preselected dates.

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

7. Enable date range selection.

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

8. Determine the date format. Defaults to ‘YYYY-MM-DD’.

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

9. Create a multi-language calendar. Requires moment-with-locales.min.js as noticed above.

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

10. Enable/disable interactions.

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

11. Specify an array of dates to highlight or ignore.

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

12. Determine whether or not to highlight Sunday and/or Saturday. Default: true.

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

13. API methods.

// 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);

14. Event handlers.

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

Changelog:

v0.1.0 (05/23/2021)

• Fix offset

12/16/2020

• Add setters