Property Default/Type Description
selector string Required selector for construct Calendar
pastDates true Enable/Disable past dates
availableWeekDays array empty Set the available weekdays
Note: If you need to pass a value when the user chooses a date, set in the object
  • key day
  • value weekday name
Array of Objects: 
[
    {day: 'monday', others: values}, 
    {day: 'tuesday', others: values}
]
availableDates array empty Set the available dates
Note: If you need to pass a value when the user chooses a date, set in the object
  • key date
  • value yyyy-mm-dd
Array of Objects: 
[
    {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}
]
datesFilter false Required to enable dates filtering: availableWeekDays, availableDates
months 
['January', ..., 'December']
 
['Janeiro', ..., 'Dezembro']
Months name to header of calendar
shortWeekday 
['Sun', ..., 'Sat']
 
['Dom', ..., 'Sáb']
Short weekday name
onSelect 
Callback function
 A callback function to capture the date selected
  • data is result contained in the selected date
  • element is the element clicked
e.g: 
onSelect((data, element) => {
    
})

Functions

Public methods
init() Construct the calendar
destroy() Destroy the calendar
reset() Reset the calendar (destroy and init)
set(object) Set new value for the options, e.g: 
// Define available dates
set({
    availableDates: [
        {date: '2019-10-05'},
        {date: '2019-10-08'},
        {date: '2019-10-10'},
        {date: '2019-10-15'},
        {date: '2019-10-20'}
    ], 
    datesFilter: true
})

// Define available weekdays
set({
    availableWeekDays: [
        {day: 'monday'},
        {day: 'wednesday'},
        {day: 'friday'}
    ], 
    datesFilter: true
})

// Disable dates filtering
set({
    datesFilter: false
})

// Enable/Disable past dates
set({
    pastDates: true/false
})

Usage

<!-- html -->
<div id="myCalendar" class="vanilla-calendar"></div>
            
// js
let calendar = new VanillaCalendar({
    selector: "#myCalendar"
})

Filter dates

To enable 

calendar.set({datesFilter: true})