continous-calendar

Continuous Calendar

This is a simple (and ugly...) jQuery plugin to create an infinite scrolling calendar grid, not divided by months but visualized as a sequence of weeks.

Here you can find a demo: https://www.madbob.org/cc/demo.html

Usage

require('continous-calendar');

$('#calendar').ContinuousCalendar();

Options

name	usage	default
days	Names of days to be displayed on the header. Attention: starting day is always monday.	['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
months	Names of months to be displayed on the first column. It is also followed by the year.	['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
rows	Rows (weeks) to display in the grid.	5
tableClass	CSS class of the containing table.	'continuous-calendar table'
events	Array of events to be disposed on the calendar.	[]

Events are described by simple objects with a few properties:

name	usage	notes
date	The date of the event to be placed on the calendar.	In YYYY-MM-DD format. Mandatory
className	CSS class for the event's cell.	Defaults to 'event'
url	URL for the event's cell link.	Optional
title	The string to be displayed on the event cell.	Mandatory

Extended Example

$('#calendar').ContinuousCalendar({
	days: ['M', 'T', 'W', 'T', 'F', 'S', 'S'],
	rows: 4,
	tableClass: 'continuous-calendar my-calendar',
	events: [
		{
			date: '2020-01-21',
			title: 'Test event',
			url: 'https://www.madbob.org/',
			className: 'just-a-link',
		},
		{
			date: '2020-4-16',
			title: 'Another test',
			className: 'not-a-link',
		},
	]
});

Styling

The plugin is accompanied by a sample CSS file which provides a (almost) decent style and to be used as a reference for customization. Boostrap 4 or 5 is suggested.