0.1.1 • Published 4 years ago
continous-calendar v0.1.1
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.