Tiny Event Calendar & Date Picker In JavaScript – TavoCalendar

Category: Date & Time , Javascript | May 23, 2021
Author:beinoriusju
Views Total:7,432 views
Official Page:Go to website
Last Update:May 23, 2021
License:MIT

Preview:

Tiny Event Calendar & Date Picker In JavaScript –  TavoCalendar

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

You Might Be Interested In:


2 thoughts on “Tiny Event Calendar & Date Picker In JavaScript – TavoCalendar

  1. Ferboyy

    Hello! Thanks for the pretty and versatile calendar. It’s exactly what I was looking for.
    However, I must point out 1 issue: it seems that every locale whose week doesn’t start with Sunday (for instante ‘es’, which starts with Monday), the last week of the month always shows a displacement towards the right. I believe it’s because of the week generation, where by default Sunday comes first. Is there any way to adjust it?

    Reply
  2. Ferboyy

    This issue has been fixed in the last update (23/05/2021). Thanks!

    Reply

Leave a Reply