Feature requests

[thewaywest]

Thanks for this great, light calendar. I am using it with a Hugo website, and have applied a few hacks to simplify my use case. One or two of these might be useful to incorporate in a future version... :)

• I am forcing the view depending on the viewport being used: week for mobile devices, month for desktop. I hide the selector, since the month view really doesn't server me well on a phone. I am choosing viewport using window.innerWidth >= something.
• Since I hide the view options using display:none, I push the title with float:left -- that's useful especially in handheld.
• vertical space is limited, and the Week and day modes overrun my next div. I am using javascript to hide all weekdays that have no content, and rerun the code on render:

calendar.on('rendered', calendarRestate);
calendarRestate = function() {
	if (!desk) {
		// remove empty days
		[...document.getElementsByClassName("col-week-day-container")].forEach(function(e) {
			if (!e.querySelector(".cal-week-day-event-col")) {
				e.style.display = 'none';
				e.previousSibling.style.display = 'none';
			};
		});
	};
};

• I've employed a few css hacks as well, most importantly resizing the calendar widget as a whole to 100%... for some reason, in my inherited website, the responsive option wasn't playing well (likely a problem with my page grid classes...). I put the coloring into my LESS file so I could easily use a color-picker ... not necessary but helpful in VsCode (actually, no good for multiple colors, so I am reverting that). I also added a COLOR attrib so that I could go with lighter backgrounds.

.js-calendar { 
    width: 100%;

    .control-bar {
        &-views { display: none; }
        &-title { float: left;}
    }

    .calendar-wrapper {
        width: 100%;

        .cell-event-mark, .cal-week-day-event-col {
            color: black;
            background: rgba(222, 255, 190, 0.6) none repeat scroll 0% 0% !important; // overrides eventBackground param
        }
        .cal-week-day-time-float {
            color: rgb(32, 70, 70);
            font-weight: 500;
        }
    }
}

• A hugo site, I will need to easily and manually add events. I decided to go with a JS file and simplified format, that I later pull into your matrix via javascript. I added a "repeat" days during a given month -- I don't need the crazy repeating capability that major calendaring systems have. Those days are added to the initil, and new events generated runtime. I like how that works! I also need i18n resources, so I preload language specs, and pull them into your vocab parameters based on the language element of my URL:

activities.js

// add new events to the top of the list
var events = [
  { d:"2018-09-15 08:30", h:"8.5", r:"29", n:"Day of Mindfulness", c:"", l:"/pages/dayofmindfulness" },
  { d:"2018-09-05 17:30", h:"2.5", r:"12,19,26", n:"Meditation", c:"", l:"/practices/practice" }
];

// js language resources
var buttons = {};
buttons['en'] = { previous: "previous", today: "TODAY", next: "next" };
buttons['ca'] = { previous: "anterior", today: "AVUI", next: "pròxim" };
buttons['es'] = { previous: "anterior", today: "HOY", next: "próximo" };

var days = {};
days['en'] = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
days['ca'] = ["Diumenge", "Dilluns", "Dimarts", "Dimecres", "Dijous", "Divendres", "Disabtes"];
days['es'] = ["Domingo", "Lunes", "Martes", "Miércoles", "Jueves", "Viernes", "Sábado"];

var months = {};
months['en'] = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
months['ca'] = ["Gener", "Fevrer", "Març", "Abril", "Maig", "Juny", "Juliol", "Agost", "Setembre", "Octubre", "Novembre", "Desembre"];
months['es'] = ["Enero", "Fevrero", "Marzo", "Abril", "Mayo", "Junio", "Julio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre"];

all of that is pulled into your matrix format prior to calendar rendering:

	// calendar activation
	var matrix = {};
	events.forEach(function(e) {
		var dt = new Date(e.d),
			yr = dt.getFullYear(),
			mo = dt.getMonth(),
			dy = dt.getDate().toString(),
			hr = dt.getHours(),
			tm = dt.getTime();

		// process repeating days
		(dy + (e.r ? "," + e.r : "")).split(',').forEach(function(d) {
			// instantiate matrix elements if required
			if (!matrix[yr]) matrix[yr] = {};
			if (!matrix[yr][mo]) matrix[yr][mo] = {};
			if (!matrix[yr][mo][d]) matrix[yr][mo][d] = [];

			// add event to matrix
			var ev = { };
			if (e.n) ev.displayname = e.n;
			if (hr) ev.at = tm;
			if (e.h) ev.duration = parseInt(e.h) * 60 * 60 * 1000; // hours * minutes * seconds * milliseconds
			if (e.c) ev.color = e.c;

			matrix[yr][mo][d].push(ev);
		});
	});

The last thing on my list is the ability to add more detail for flyover and linking, so those attributes are in my source arrays. I'd like to push them into the individual elements using data- strings, so that I can generate flyover dialogs using js. I bet I have to drop into your library for that one, though :)

Thanks for the work!

[thewaywest]

Since this is a flat site (no node), the module export fails. I have preceded that call with a quick test of "modules" to avoid errors in the build -- seems to be unobtrusive for other implementations...

lines 1207-1209:
(() => {
    if (typeof module !== 'undefined') module.exports = {JSCalendar, JSCalendarEvent}
})(JSCalendar, JSCalendarEvent)

I've hacked the source js to add three options that support my flat site needs -- a hundred characters or so, adding if () statements are listener instatin blocks, or before callog lines. If interested, let me know and I will check in:

	var calendar = new JSCalendar(calNode, {
		titleCropSize: 30,
		height: 500,
		width: (desk ? 1170 : winx - 20),
		buttonsVocab: buttons[lang],
		monthsVocab: months[lang],
		daysVocab: days[lang],
		ampm: false,
		noDrag: true,  <<< turn off draggability for read-only calendars
		noDrill: true, <<< diables drill-to-day from week or month view when not allowing switching
		noLog: true <<< disable the console log when not needed for debugging
	});