Simple Filterable Calendar In Pure JavaScript – vanilla-calendar

Category: Date & Time , Javascript | October 11, 2019
16 Comments
Demo Download
Author:marssola
Views Total:21,054 views
Official Page:Go to website
Last Update:October 11, 2019
License:MIT

Preview:

Simple Filterable Calendar In Pure JavaScript – vanilla-calendar

Description:

A simple, lightweight, vanilla JavaScript inline calendar that allows you to filter dates, set available dates/weekdays, enable/disable past dates and much more.

How to use it:

Import the vanilla-calendar’s JavaScript and CSS files:

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

Create a placeholder element for the inline calendar.

<div id="myCalendar" class="vanilla-calendar"></div>

Create a new instance and render a basic calendar inside the container you just created.

let myCalendar = new VanillaCalendar({
    selector: "#myCalendar"
})

Determine whether to enable past dates. Default: true.

let myCalendar = new VanillaCalendar({
    selector: "#myCalendar",
    pastDates: false
})

Set the available dates & weekdays. Default: empty array.

let myCalendar = new VanillaCalendar({
    selector: "#myCalendar",
    availableWeekDays: [
      {day: 'monday', others: values},
      {day: 'tuesday', others: values}
    ],
    availableDates: [
      {date: '2019-09-15', others: values},
      {date: '2019-09-16', others: values},
      {date: '2019-09-17', others: values},
      {date: '2019-09-25', others: values},
      {date: '2019-09-26', others: values}
    ]
})

Enable/disable date filtering. Default: false.

let myCalendar = new VanillaCalendar({
    selector: "#myCalendar",
    datesFilter: true
})

Localize the month & week names.

let myCalendar = new VanillaCalendar({
    selector: "#myCalendar",
    months: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
    shortWeekday: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
})

Do some cool stuff as the user select a date.

let myCalendar = new VanillaCalendar({
    selector: "#myCalendar",
    onSelect: (data, elem) => {}
})

Customize the init date & today’s date.

let myCalendar = new VanillaCalendar({
    selector: "#myCalendar",
    date: new Date(),
    todaysDate: new Date()
})

API methods.

// re-init the calendar
myCalendar.init();
// destroy the calendar
myCalendar.destroy();
// reset the calendar
myCalendar.reset();
// update options
myCalendar.set(options);

Changelog:

10/11/2019

  • Change month buttons submit forms if calendar is placed inside a form

See Also:

You Might Be Interested In:

16 thoughts on “Simple Filterable Calendar In Pure JavaScript – vanilla-calendar”

  1. Ralf

    It works very nice. Congratulations !
    Question : How do you do for starting the week on monday ? (instead of sunday ?)

    Reply ↓
    1. Jack Mareburger

      Did you figure out how to access date values from onSelector: (data, elem) => {}

      Reply ↓
      2. V G

        Thanks ! your code tweak worked but with one small change at line 2, where the console gave me a “illegal character error”.

        I changed this line->
        /*
        let d = date.getDay() – 1
        */
        With this ->
        /*
        let d = date.getDay() – 1
        */

        Reply ↓
        1. Rémi

          Thanks @Alex, really handy version.
          To clarify for anybody who doesn’t speak your language, the next step is to move “sun” to the end of the array as in
          shortWeekday: [‘Mon’, ‘Tue’, ‘Wed’, ‘Thu’, ‘Fri’, ‘Sat’,”Sun”],

          Reply ↓
  3. Vinícius M. Loureiro

    onSelect: (data, elem) => {
    console.log(data, elem);
    alert(data.date);
    }

    // data.date is the datevalue

    Reply ↓
  5. Olivier

    Hi there,
    How to set a start date ? ie: i don’t want the user be able to select a date before today’s date +2.

    Reply ↓
  6. kidsada

    Hello ,
    How to split value ‘ date month year ‘ like 20-10-2020
    cause when i’m use data.date it like ” Tue Oct 20 2002 14:28:42 … ”
    I’m just want date month and year but i don’t know how to get it
    so, thank for help

    Reply ↓
  8. Jeff DiPallo

    Yes, after a user selects a date, we save it to the db. next time user returns, we want to show/highlight the date they chose previously. certainly, there must be way? otherwise, although nice it’s free, is useless. thanks

    Reply ↓
    1. Norley T

      To set a selected date you can do

      // set the selected date of the calendar
      let selectedDate = document.querySelectorAll(‘[data-calendar-date=”‘ + mySelectedDate + ‘”]’)

      selectedDate.forEach(date => {
      date.classList.add(‘vanilla-calendar-date–selected’)
      })

      Reply ↓

Leave a Reply