VanillaCalendar

It's a simple calendar in JS Vanilla

Options

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