Version 23.1

Changelog.md

@@ -1,6 +1,17 @@
 Changelog
 =========
 
+## version 23.1
+
+### Added:
+
++ German translation and holidays for Germany - thank you [@fischer-felix](https://github.com/fischer-felix) [(#5)](https://github.com/hvianna/desktopCal.js/pull/5).
+
+### Improved:
+
++ Minor layout improvement of holidays list in the desktop format.
+
+
 ## version 21.1.1
 
 Fixes a bug when weeks are configured to start on Monday and the first day of the month falls on a Sunday.

README.md

@@ -1,11 +1,14 @@
 desktopCal.js
 =============
 
-Calendar generator built with HTML, CSS & JavaScript.
++ Create your own calendars to print or use as wallpaper.
++ Includes national holidays for several countries and also allows you to add your custom holidays.
++ Multilingual support.
++ Built with HTML, CSS & JavaScript.
 
-### [➡️ CREATE YOUR CALENDAR HERE](https://henriquevianna.com/desktopCal.js/)
+**Create your calendar on our website: [https://henriquevianna.com/desktopCal.js/](https://henriquevianna.com/desktopCal.js/)**
 
-Calendars you can create with **desktopCal.js:**
+## Calendars you can create
 
 | Desktop calendar | Wall calendar | Digital wallpaper calendar |
 |---|---|---|
@@ -29,9 +32,19 @@ You can add your own custom holidays. These will be saved in your browser's loca
 + [Saving canvas as image](https://weworkweplay.com/play/saving-html5-canvas-as-image/) and [solution to CORS issue on canvas.toDataURL()](https://stackoverflow.com/a/30517793/2370385)
 + [W3Schools Canvas Reference](https://www.w3schools.com/tags/ref_canvas.asp)
 + [How to draw a rounded Rectangle on HTML Canvas?](https://stackoverflow.com/a/7838871/2370385)
-+ Public holidays in [Argentina](https://en.wikipedia.org/wiki/Public_holidays_in_Argentina), [Brazil](https://pt.wikipedia.org/wiki/Feriados_no_Brasil), [Canada](https://en.wikipedia.org/wiki/Public_holidays_in_Canada), [France](https://en.wikipedia.org/wiki/Public_holidays_in_France), [Mexico](https://en.wikipedia.org/wiki/Public_holidays_in_Mexico), [Portugal](https://en.wikipedia.org/wiki/Public_holidays_in_Portugal), [Spain](https://en.wikipedia.org/wiki/Public_holidays_in_Spain), [United Kingdom](https://en.wikipedia.org/wiki/Public_holidays_in_the_United_Kingdom), [United States](https://en.wikipedia.org/wiki/Federal_holidays_in_the_United_States), [Uruguay](https://en.wikipedia.org/wiki/Public_holidays_in_Uruguay).
++ Public holidays in [Argentina](https://en.wikipedia.org/wiki/Public_holidays_in_Argentina),
+[Brazil](https://pt.wikipedia.org/wiki/Feriados_no_Brasil),
+[Canada](https://en.wikipedia.org/wiki/Public_holidays_in_Canada),
+[France](https://en.wikipedia.org/wiki/Public_holidays_in_France),
+Germany ([here](https://en.wikipedia.org/wiki/Public_holidays_in_Germany), [here](https://en.wikipedia.org/wiki/Bu%C3%9F-_und_Bettag) and [here](https://www.schulferien.org/deutschland/feiertage/)),
+[Mexico](https://en.wikipedia.org/wiki/Public_holidays_in_Mexico),
+[Portugal](https://en.wikipedia.org/wiki/Public_holidays_in_Portugal),
+[Spain](https://en.wikipedia.org/wiki/Public_holidays_in_Spain),
+[United Kingdom](https://en.wikipedia.org/wiki/Public_holidays_in_the_United_Kingdom),
+[United States](https://en.wikipedia.org/wiki/Federal_holidays_in_the_United_States),
+[Uruguay](https://en.wikipedia.org/wiki/Public_holidays_in_Uruguay).
 + [Paper sizes](https://papersizes.io/)
 
 ## License
 
-**desktopCal.js** copyright (c) 2018-2021 Henrique Avila Vianna. Licensed under the [GNU AGPL-3.0 License](https://github.com/hvianna/desktopCal.js/blob/master/LICENSE).
+**desktopCal.js** copyright (c) 2018-2023 Henrique Avila Vianna. Licensed under the [GNU AGPL-3.0 License](https://github.com/hvianna/desktopCal.js/blob/master/LICENSE).

index.html

@@ -9,7 +9,7 @@
  *
  * https://github.com/hvianna/desktopCal.js
  *
- * Copyright (C) 2018-2021 Henrique Vianna <hvianna@gmail.com>
+ * Copyright (C) 2018-2023 Henrique Vianna <hvianna@gmail.com>
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as published by
@@ -233,11 +233,6 @@ <h3 data-i18n="colorPresets"></h3>
 				</table>
 			</div>
 
-			<h2 data-i18n="creditTitle"></h2>
-
-			<p class="note" data-i18n="creditDescr"></p>
-			<input id="credits" type="text" class="fullwidth" data-i18n="credits">
-
 			<h2 data-i18n="holidays"></h2>
 
 			<div class="config-blocks">
@@ -267,6 +262,11 @@ <h3 data-i18n="customHolidays"></h3>
 				</div> <!-- #custom-holidays -->
 			</div> <!-- .config-blocks -->
 
+			<h2 data-i18n="creditTitle"></h2>
+
+			<p class="note" data-i18n="creditDescr"></p>
+			<input id="credits" type="text" class="fullwidth" data-i18n="credits">
+
 			<div id="print-config">
 				<h2 data-i18n="printIt"></h2>
 
@@ -350,7 +350,7 @@ <h2 data-i18n="downloadIt"></h2>
 		</div> <!-- .preview -->
 
 		<div class="credits">
-			<strong>desktopCal.js <span data-func="getVersion"></span></strong> - Copyright &copy; 2018-2021 Henrique Avila Vianna.
+			<strong>desktopCal.js <span data-func="getVersion"></span></strong> - Copyright &copy; 2018-2023 Henrique Avila Vianna.
 			Licensed under the <a href="https://www.gnu.org/licenses/agpl.html">GNU AGPL-3.0 license</a>. Source code available on <a href="https://github.com/hvianna/desktopCal.js/">GitHub</a>.<br>
 			Icons by <a href="https://icons8.com/">icons8</a>. Random photos by <a href="https://picsum.photos/">Lorem Picsum</a>.
 			Devices mockup template by <a href="https://www.pixeden.com/psd-web-elements/flat-responsive-showcase-psd-vol2">Pixeden</a>.

js/desktopCal.js

@@ -4,7 +4,7 @@
  *
  * https://github.com/hvianna/desktopCal.js
  *
- * Copyright (C) 2018-2021 Henrique Vianna <hvianna@gmail.com>
+ * Copyright (C) 2018-2023 Henrique Vianna <hvianna@gmail.com>
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as published by
@@ -19,7 +19,9 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
-var _VERSION = '21.1.1';
+'use strict';
+
+var _VERSION = '23.1';
 
 var cropper = [],
 	colorPresets;
@@ -269,22 +271,18 @@ function loadImage( obj, n ) {
  */
 function generateCalendar( month, year, canvas = null ) {
 
-	var ndays = [ 0, 31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31 ];
-
-	var html, holidayList, dow, prevMon, i, d,
-		ctx, calSize, cellSize, initialX, initialY, currLine, vAlign, hAlign; // auxiliary variables for canvas
-
+	const ndays = getMonthDays( year );
 	const initialWeekday = document.getElementById('week-start').value | 0;
 
 	// helper function for canvas calendar
 	const posX = dow => initialWeekday == 0 ? dow : dow >= initialWeekday ? dow - initialWeekday : 7 - initialWeekday + dow;
 
-	if ( ( year & 3 ) == 0 && ( ( year % 25 ) != 0 || ( year & 15 ) == 0 ) )
-		ndays[2]++; // leap year
+	let html, holidayList;
+	let ctx, calSize, cellSize, initialX, initialY, currLine, vAlign, hAlign; // auxiliary variables for canvas
 
-	prevMon = month > 1 ? month - 1 : 12;
+	let prevMon = month > 1 ? month - 1 : 12;
 
-	dow = ( new Date( year, month - 1, 1 ) ).getDay();
+	let dow = ( new Date( year, month - 1, 1 ) ).getDay();
 
 	if ( canvas ) {
 		ctx = canvas.getContext('2d');
@@ -393,7 +391,7 @@ function generateCalendar( month, year, canvas = null ) {
 	}
 
 	// display week days initials
-	i = initialWeekday;
+	let i = initialWeekday;
 	do {
 		if ( canvas && ! isNaN( calSize ) ) {
 			ctx.fillStyle = i == 0 ? document.getElementById('holiday-color').value : document.getElementById('text-color').value;
@@ -421,7 +419,7 @@ function generateCalendar( month, year, canvas = null ) {
 	}
 
 	// loop for the current month
-	for ( i = 1; i <= ndays[ month ]; i++ ) {
+	for ( let i = 1; i <= ndays[ month ]; i++ ) {
 		let holidays = checkHoliday( year, month, i );
 		if ( canvas ) {
 			ctx.fillStyle = ( dow == 0 || holidays.length ) ? document.getElementById('holiday-color').value : document.getElementById('text-color').value;
@@ -445,13 +443,13 @@ function generateCalendar( month, year, canvas = null ) {
 		else {
 			if ( holidays.length ) {
 				html += `<td class="holiday">${ i }<span class="holiday-name">`;
-				holidayList += `${ i } - `;
+				holidayList += `<span>${ i } - `;
 				holidays.forEach( ( name, idx ) => {
 					html += ( idx ? '<br>' : '' ) + name;
 					holidayList += ( idx ? ' / ' : '' ) + name;
 				});
 				html += '</span>';
-				holidayList += '<br>';
+				holidayList += '</span>';
 			}
 			else
 				html += `<td${ dow == 0 ? ' class="holiday"' : ''}>${ i }`;
@@ -493,7 +491,7 @@ function generateCalendar( month, year, canvas = null ) {
 		ctx.shadowOffsetX = ctx.shadowOffsetY = 0;
 	}
 	else { // fill remaining cells with next month's days
-		d = 1;
+		let d = 1;
 		if ( month < 12 )
 			month++;
 		else {
@@ -507,7 +505,7 @@ function generateCalendar( month, year, canvas = null ) {
 			dow = ++dow % 7;
 		}
 
-		html += `<tr class="holiday-list"><td colspan="7">${ holidayList }`;
+		html += `<tr class="holiday-list"><td colspan="7"><div class="flex-wrap">${ holidayList }</div>`;
 		html += '</table>';
 
 		return html;

js/holidays.js

@@ -72,6 +72,32 @@ function checkHoliday( year, month, day ) {
 			];
 			break;
 
+		case 'de':
+			holidays = [
+				{ date: '1-1', name: 'Neujahr' },
+				{ date: '1-6', name: 'Heilige Drei Könige' },
+				{ date: '3-8', name: 'Internationaler Frauentag' },
+				{ date: '5-1', name: 'Tag der Arbeit' },
+				{ date: '8-15', name: 'Mariä Himmelfahrt' },
+				{ date: '9-20', name: 'Weltkindertag' },
+				{ date: '10-3', name: 'Tag der Deutschen Einheit' },
+				{ date: '10-31', name: 'Reformationstag' },
+				{ date: '11-1', name: 'Allerheiligen' },
+				{ date: floatingDoW( 3, year, 11, 16 ), name: 'Buß- und Bettag' }, // Wednesday between November 16-22
+				{ date: '12-25', name: '1. Weihnachtsfeiertag' },
+				{ date: '12-26', name: '2. Weihnachtsfeiertag' }
+			];
+			easterHolidays = [
+				{ days: -2, name: 'Karfreitag' },
+				{ days: 0, name: 'Ostersonntag' },
+				{ days: 1, name: 'Ostermontag' },
+				{ days: 39, name: 'Christi Himmelfahrt' },
+				{ days: 49, name: 'Pfingstsonntag' },
+				{ days: 50, name: 'Pfingstmontag' },
+				{ days: 60, name: 'Fronleichnam' },
+			];
+			break;
+
 		case 'es':
 			holidays = [
 				{ date: '1-1', name: 'Año Nuevo' },
@@ -193,7 +219,7 @@ function checkHoliday( year, month, day ) {
 	if ( easterHolidays.length ) {
 		let easter = computus( year );
 		easterHolidays.forEach( d => {
-			let date = new Date( easter.getTime() + d.days * 86400000);
+			let date = dateAdd( easter, d.days );
 			holidays.push( { date: `${ date.getMonth() + 1 }-${ date.getDate() }`, name: d.name } );
 		});
 	}
@@ -258,13 +284,39 @@ function computus( year ) {
  */
 function floatingDoW( dow, year, month, day ) {
 
+	let ndays = getMonthDays( year );
+
 	while ( ( new Date( year, month - 1, day ) ).getDay() != dow ) {
 		day++;
+		if ( day > ndays[ month ] ) {
+			day = 1;
+			month++;
+			if ( month > 12 ) {
+				month = 1;
+				year++;
+				ndays = getMonthDays( year );
+			}
+		}
 	}
 
 	return `${month}-${day}`;
 }
 
+/**
+ * Returns an array with the number of days for each month of the given year
+ *
+ * @param {number} year
+ *
+ * @returns {array}
+ */
+function getMonthDays( year ) {
+	let ndays = [ 0, 31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31 ];
+	if ( ( year & 3 ) == 0 && ( ( year % 25 ) != 0 || ( year & 15 ) == 0 ) )
+		ndays[2]++; // leap year
+
+	return ndays;
+}
+
 /**
  * Calculates the observation date for a given holiday according to a country's rules
  *
@@ -309,11 +361,31 @@ function calcObservation( year, month, day, country ) {
 			break;
 	}
 
-	date = new Date( date.getTime() + diff * 86400000 );
+	return dateToMonthDay( dateAdd( date, diff ) );
+}
 
-	return `${date.getMonth()+1}-${date.getDate()}`;
+/**
+ * Adds (or subtracts) a given number of days to a Date object
+ *
+ * @param {Date} date
+ * @param {number} nDays
+ *
+ * @returns {Date}
+ */
+function dateAdd( date, nDays ) {
+	return new Date( date.getTime() + nDays * 86400000 );
 }
 
+/**
+ * Converts a given Date object to a 'month-day' string
+ *
+ * @param {Date} date
+ *
+ * @returns {string}
+ */
+function dateToMonthDay( date ) {
+	return `${ date.getMonth() + 1 }-${ date.getDate() }`;
+}
 
 /**
  * Reads custom holidays from local storage