CalendarJS

A simple responsive Javascript calendar with no dependencies.

CalendarJS is a more general-purpose calendar which can be employed to fit just about any use-case. There are extremely simple examples of Date pickers and event calendars provided below for reference. Note that these examples are only meant as a starting point.

Simple Example Calendar

Usage

1. Include the JS and CSS in your page.

   <link rel='stylesheet' href="calendar.css">

   <script src='calendar.js'>

2. Create a div to draw the calendar in.

   <div id=calendar></div>

3. Create the calendar with Javascript

   var ele = document.getElementById('calendar');
   var opts = {abbrDay: true};
   var cal = new calendar(ele, opts);

Calendar Options

• options[abbrDay] bool: Abbreviate the day names? default: true
• options[abbrMonth] bool: Abbreviate the month names? default: true
• options[abbrYear] bool: Abbreviate the year? default: true
• options[month] int: The month to show, eg 1 for January, 2 for February, etc. default: the current month
• options[year] int: The year to show. default: the current year
• options[ellipse] bool: Ellipsis overflow text? default: true
• options[events] array: An array of event objects. See below
• options[disabledDates] array: An array of Date objects that will not be selectable
• options[onDayClick] function: function to execute when a day is clicked
• options[onEventClick] function: function to execute when an event is clicked
• options[onMonthChanged] function: function to execute when the month is changed
• options[beforeDraw] function: function to execute before drawing the calendar. will await if async/promise.

Event Options

• event[desc] string: A short description of the event.
• event[date] date: The date of the event
• event[startDate] date: The start date of the event, to be used as an alternative to date to be used along with endDate.
• event[endDate] date: The end date of the event, to be used as an alternative to date to be used along with startDate.

Methods

• calendar.getSelection(): Get an array of dates that are selected on the calendar.
• calendar.disableDate(date): Disable the provided date from selection.
• calendar.selectDateRange(date1, date2): Given two date objects, all dates in this range will be selected on the calendar.
• calendar.selectDate(date): Given a date objects, this date will be selected on the calendar.
• calendar.clearSelection(): Clear all selected dates on the calendar.
• calendar.getEventsDuring(date1, date2): Given two date objects, get an array of events listed on the calendar in this range.
• calendar.loadPreviousMonth(): Show the previous month on the calendar.
• calendar.loadNextMonth(): Show the next month on the calendar.
• calendar.addEvent(event): Given an event object, adds the event to the calendar.
• calendar.getCurrentMonth(): Get an object with the calendar's current month and year.

Style Settings

Examples

var div = document.getElementById('cal3');
var cal = new calendar(div, {
	year: 2019,
	month: 6,
	events: [{
		desc: 'Bonnaroo',
		startDate: new Date(2019, 5, 13),
		endDate: new Date(2019, 5, 16)
	}]
});

var input = document.getElementById('date-picker');
var div = document.getElementById('cal1');
var cal = new calendar(div, {
	onDayClick: function(date){
		input.value = date.toLocaleDateString();
		cal.clearSelection(date);
		cal.selectDate(date);
		div.style.display= 'none';
	}
});
input.addEventListener('focus', function(){
	div.style.display= 'block';
});

var startinput = document.getElementById('date-range-picker-start');
var endinput = document.getElementById('date-range-picker-end');
var div = document.getElementById('cal2');
var start_date, end_date;
var cal = new calendar(div, {
	onDayClick: function(date){
		if(start_date && end_date){ 
			cal.clearSelection(date);
			start_date = end_date = null;
		}else if(start_date){
			cal.clearSelection(date);
			cal.selectDateRange(start_date, date);
			end_date = date;
			endinput.value = date.toLocaleDateString();
		}else{
			cal.selectDate(date);
			start_date = date;
			startinput.value = date.toLocaleDateString();
		}
	}
});