Press "Enter" to skip to content

Select Range From Event Calendar & Date Picker | TavoCalendar

TavoCalendar is a calendar display and selects dates (single or range). Tavo Calendar is a built-in calendar based on Vanilla JavaScrip where users can select a date or view events with the click of a mouse button.

javascript event calendar source code, how to create dynamic event calendar in html, dynamic calendar in javascript with example, add event to calendar javascript

More features:

  • Pre-set dates.
  • Mark and ignore dates.
  • Multiple languages.
  • Custom date formats.
  • API methods and event handlers.

How to make use of it:

1. Load the required moment.js library within the doc.

<!-- 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 fundamental calendar on the web page.

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

5. Set the date the calendar should focus on.

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 or to not highlight Sunday and/or Saturday.

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

13. API strategies.

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

Available options:

  • format (optional) — defaults to YYYY-MM-DD
  • locale (optional) — display of weekday names, month (defaults en)
  • date (optional) — calendar focus date (defaults to absolute date),
  • date_start (optional) — range end date (defaults to null),
  • date_end (optional) — range start date (defaults to null),
  • selected (optional) — mark dates selected (defaults to [])
  • highlight (optional) — special dates (defaults to [])
  • blacklist (optional) — disable dates (defaults to [])
  • range_select (optional) — range select mode (defaults to false)
  • multi_select (optional) — mltiple date mode (defaults to false)
  • future_select (optional) — disable selecting days after date (defaults to true)
  • past_select (optional) — disable selecting days before date (defaults to false)
  • frozen (optional) — disable all interactions (defaults to false)
  • highligh_sunday (optional) — highlight sundays (defaults to true)

Selecting

  • getSelected() — returns an array of selected dates (in multiselect mode) or single
  • addSelected(date) — add date to selected
  • clearSelected() — clear all selected dates
  • getStartDate() — range start
  • setStartDate(date) — set range start
  • getEndDate() — range end
  • setEndDate(date) — set range end
  • getRange() – range object { start: ‘2012-12-10’, end: ‘2012-12-15’}
  • clearRange() – clear range
  • setRange(date1, date2) – set full range
  • clear() – clear all selections

Moving calendar window

  • getFocusYear() — calendar focus year
  • setFocusYear(year) — set calendar focus year
  • getFocusMonth() — calendar focus month
  • setFocusMonth(month) — set calendar focus month
  • nextMonth() — move to next month
  • prevMonth() — move to prev month

Other

  • sync(other_calendar) — sync two or more calendars calendarA.sync(calendarB)

Events

  • calendar-change — fired when month changes
  • calendar-range — fired on day change
  • calendar-select — fired on day change
  • calendar-reset — fired on range reset

Tiny Event Calendar & Date Picker, TavoCalendar Plugin/Github, js calendar example code, responsive event calendar jquery, how to add events in calendar using javascript


See Demo And Download

Official Website(beinoriusju): Click Here

This superior jQuery/javascript plugin is developed by beinoriusju. For extra advanced usage, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published.