V 3.0.0

README.md

@@ -1,17 +1,26 @@
 ## Booking Calendars
-A very very lightweight JavaScript library to display calendars of your online reservations.
+A very very lightweight JavaScript library (only 2.34 KB !) to display calendars of your online reservations.
 This library is very fast and was designed to avoid exponential redundancies.
 
 **See on this page :**
+
 [How to use it](#how-to-use-it-)
+
 [App Documentation](#app-documentation-)
+
 [Example of the Options object](#example-of-the-options-object-)
+
 [About Booking Calendars CSS](#about-booking-calendars-css-)
+
 [Example](#example-)
+
 [License](#license-)
+
 [Disclaimer](#disclaimer-)
 
+###
 ![Booking Calendars in action](/images/Screenshot_1.png)
+###
 
 ### How to use it ?
 1. Copy or download **Booking_Calendars.min.js** in `dist/Booking_Calendars.min.js`
@@ -41,27 +50,27 @@ Object **Options = { };**
 | :--- | :--- |
 |`names_months`|An array containing the names of the months of the year, according to the desired language. ex.: `['January', 'February', 'March', 'April','May', 'June','July', 'August','September', 'October', 'November', 'December']` |
 `names_days` | An Array containing the first letters of the names of the days of the week, depending on the desired language. ex.: `['M', 'T', 'W', 'T', 'F', 'S', 'S']` |
-`months_range` | The desired monthly range, in array with 2 digits, if you want to display only a monthly range. ex. `[0,6]` to display only the first six months of the year. Pass here `false` as a parameter if you want to display all months of the year. |
+`months_range` | The desired monthly range, in array with 2 digits, if you want to display only a monthly range. ex. `[0,5]` to display only the first six months of the year. Pass here `false` as a parameter if you want to display all months of the year. **Note: the month range is managed as in JavaScript: 0 = January**|
 `year` | Year as a 4-character string ex. `'2024'` or `false` to display calendars for the current year. |
-`booked_dates` | An array of reserved date objects with 2 parameters: `date_start` and `date_end`, manage to obtain this data from your database, or pass it raw in the table ex.: `[ {date_start: '2024-03-01',date_end: '2024-03-04',},{start_date: '2024-03-04',date_end: '2024-03-08',}, ... ]`. **Note:** Dates formats must respect the `yyyy-mm-dd` format, like a classic date format in a database. |
+`booked_dates` | An array of reserved date objects with 2 parameters: `date_start` and `date_end`, manage to obtain this data from your database, or pass it raw in the array ex.: `[ {date_start: '2024-03-01',date_end: '2024-03-04',},{start_date: '2024-03-04',date_end: '2024-03-08',}, ... ]`. **Note:** Dates formats must respect the `yyyy-mm-dd` format, like a classic date format in a database. |
 
 ### Example of the Options object :
 ```
 var Options = {
     // set month names
-	names_months: [
-		'January', 'February', 'March', 'April',
-		'May', 'June', 'July', 'August',
-		'September', 'October', 'November', 'December'
-	],
-	// set day names
-	names_days: ['M', 'T', 'W', 'T', 'F', 'S', 'S'],
-	// false or array of numbers: ex. [0,6] -> only first 6 months
-	months_range: false, // [3,9] || false
-	// year to process: Year in string 'yyyy' OR false for current year
-	year: '2024', // 'yyyy' || false
-	// objects array of booked dates
-	booked_dates : [
+    names_months: [
+	'January', 'February', 'March', 'April',
+	'May', 'June', 'July', 'August',
+	'September', 'October', 'November', 'December'
+    ],
+    // set day names
+    names_days: ['M', 'T', 'W', 'T', 'F', 'S', 'S'],
+    // false or array of numbers: ex. [0,5] -> only first 6 months
+    months_range: false, // [0,5] || false
+    // year to process: Year in string 'yyyy' OR false for current year
+    year: '2024', // 'yyyy' || false
+    // objects array of booked dates
+    booked_dates : [
     {
       date_start : '2024-03-01',
       date_end : '2024-03-04',

dist/Booking_Calendars.css

@@ -1,13 +1,12 @@
-
-/* CSS CALENDARS */
+/* Booking_Calendars.css Version: 3.0.0 (13/05/2024) [dd/mm/yyyy] */
 #Booking_Calendars_Container {
 	margin: 0 auto;
 	display: flex;
 	width: 100%;
 	min-height: 100vh;
 	flex-direction: row;
 	flex-wrap: wrap;
-	align-content: center;
+	align-content: flex-start;
 	align-items: flex-start;
 	justify-content: center;
 	gap: 1em;

dist/Booking_Calendars.js

@@ -5,7 +5,7 @@
  * @Organisation SNS - Web et informatique
  * @Web www.sns.pm
  * Vanilla javaScript for display reserved dates in calendars
- * Version: 2.0.0 (07/05/2024)
+ * Version: 3.0.0 (13/05/2024) [dd/mm/yyyy]
  */
 
 
@@ -110,9 +110,10 @@ const Booking_calendars = (Element, Options) => {
 
 
 	// define a range of months with a range if necessary
+	// !note: slice() exclude the 2nd parameter
 	let Array_months = (!Options.months_range) ?
 		Options.names_months :
-		Options.names_months.slice(Options.months_range[0], Options.months_range[1]);
+		Options.names_months.slice(Options.months_range[0], Options.months_range[1] + 1);
 
 	let Current_month = Options.names_months.indexOf(Array_months[0]);
 	let Calendar,
@@ -134,7 +135,7 @@ const Booking_calendars = (Element, Options) => {
 		Booked;
 
 	// loop all months
-	for (var i = 0; i <= Array_months.length - 1; i++) {
+	for (var i = 0; i < Array_months.length; i++) {
 
 		// create one Calendar
 		Calendar = document.createElement('table');

example/CSS/Booking_Calendars.css

@@ -1,13 +1,12 @@
-
-/* CSS CALENDARS */
+/* Booking_Calendars.css Version: 3.0.0 (13/05/2024) [dd/mm/yyyy] */
 #Booking_Calendars_Container {
 	margin: 0 auto;
 	display: flex;
 	width: 100%;
 	min-height: 100vh;
 	flex-direction: row;
 	flex-wrap: wrap;
-	align-content: center;
+	align-content: flex-start;
 	align-items: flex-start;
 	justify-content: center;
 	gap: 1em;

example/JS/Booking_Calendars.js

@@ -5,7 +5,7 @@
  * @Organisation SNS - Web et informatique
  * @Web www.sns.pm
  * Vanilla javaScript for display reserved dates in calendars
- * Version: 2.0.0 (07/05/2024)
+ * Version: 3.0.0 (13/05/2024) [dd/mm/yyyy]
  */
 
 
@@ -110,9 +110,10 @@ const Booking_calendars = (Element, Options) => {
 
 
 	// define a range of months with a range if necessary
+	// !note: slice() exclude the 2nd parameter
 	let Array_months = (!Options.months_range) ?
 		Options.names_months :
-		Options.names_months.slice(Options.months_range[0], Options.months_range[1]);
+		Options.names_months.slice(Options.months_range[0], Options.months_range[1] + 1);
 
 	let Current_month = Options.names_months.indexOf(Array_months[0]);
 	let Calendar,
@@ -134,7 +135,7 @@ const Booking_calendars = (Element, Options) => {
 		Booked;
 
 	// loop all months
-	for (var i = 0; i <= Array_months.length - 1; i++) {
+	for (var i = 0; i < Array_months.length; i++) {
 
 		// create one Calendar
 		Calendar = document.createElement('table');

example/JS/main.js

@@ -1,11 +1,10 @@
-
 // here is a script to populate the Options.booked_dates array
 var year = 2024;
 var month = 0;
 var day = 1;
 
 var Booking_Dates = [];
-var Date_act = new Date( year, month, day )
+var Date_act = new Date(year, month, day)
 
 var rep = false;
 
@@ -14,43 +13,42 @@ var date_end;
 
 for (var i = 1; i <= 366; i++) {
 
-    if( i%1 == 0 ){
+	if (i % 1 == 0) {
 
-        Date_act = new Date( year, month, i );
+		Date_act = new Date(year, month, i);
 
-        let m = Date_act.getMonth();
+		let m = Date_act.getMonth();
 
-        m = m+1;
-        m = ( m < 10 ) ? '0'+m : ''+m;
-        // console.log( m );
+		m = m + 1;
+		m = (m < 10) ? '0' + m : '' + m;
+		// console.log( m );
 
-        let d = Date_act.getDate();
-        d = ( d < 10 ) ? '0'+d : ''+d;
-        // console.log( d );
+		let d = Date_act.getDate();
+		d = (d < 10) ? '0' + d : '' + d;
+		// console.log( d );
 
 
-        if( rep == false ){
+		if (rep == false) {
 
-          date_start = ''+year+'-'+m+'-'+d+'';
-          rep = true;
-        }
-        else{
+			date_start = '' + year + '-' + m + '-' + d + '';
+			rep = true;
+		} else {
 
-          date_end = ''+year+'-'+m+'-'+d+'';
-          rep = false;
+			date_end = '' + year + '-' + m + '-' + d + '';
+			rep = false;
 
-          Booking_Dates.push( {
-            date_start : date_start,
-            date_end : date_end,
-          } );
-        }
-    }
+			Booking_Dates.push({
+				date_start: date_start,
+				date_end: date_end,
+			});
+		}
+	}
 
 }
 // end example
 
 // show booking dates in the console
-console.log(Booking_Dates);
+// console.log(Booking_Dates);
 
 
 // HTML element to insert calendars into
@@ -62,46 +60,45 @@ var Element = document.getElementById('Booking_Calendars_Container');
  */
 var Options = {
 
-  // set month names
+	// set month names
 	names_months: [
 		'January', 'February', 'March', 'April',
 		'May', 'June', 'July', 'August',
 		'September', 'October', 'November', 'December'
 	],
 	// set day names
 	names_days: ['M', 'T', 'W', 'T', 'F', 'S', 'S'],
-	// false or array of numbers: ex. [0,6] -> only first 6 months
-	months_range: false, // [3,9] || false
+	// false or array of numbers: ex. [0,5] -> only first 6 months
+	months_range: false, // [0,5] || false
 	// year to process: Year in string 'yyyy' OR false for current year
 	year: '2024', // 'yyyy' || false
 	// objects array of booked dates
 	booked_dates: Booking_Dates,
-  // booked_dates : [
-  //   {
-  //     date_start : '2024-03-01',
-  //     date_end : '2024-03-04',
-  //   },
-  //   {
-  //     date_start : '2024-03-04',
-  //     date_end : '2024-03-08',
-  //   },
-  //   {
-  //     date_start : '2024-04-01',
-  //     date_end : '2024-04-04',
-  //   },
-  //   {
-  //     date_start : '2024-04-06',
-  //     date_end : '2024-04-09',
-  //   },
-  //   {
-  //     date_start : '2024-04-09',
-  //     date_end : '2024-04-14',
-  //   },
-  //   {
-  //     date_start : '2024-05-01',
-  //     date_end : '2024-05-08',
-  //   }
-  // ]
+	// booked_dates: [{
+	// 		date_start: '2024-03-01',
+	// 		date_end: '2024-03-04',
+	// 	},
+	// 	{
+	// 		date_start: '2024-03-04',
+	// 		date_end: '2024-03-08',
+	// 	},
+	// 	{
+	// 		date_start: '2024-04-01',
+	// 		date_end: '2024-04-04',
+	// 	},
+	// 	{
+	// 		date_start: '2024-04-06',
+	// 		date_end: '2024-04-09',
+	// 	},
+	// 	{
+	// 		date_start: '2024-04-09',
+	// 		date_end: '2024-04-14',
+	// 	},
+	// 	{
+	// 		date_start: '2024-05-01',
+	// 		date_end: '2024-05-08',
+	// 	}
+	// ]
 };
 /**
  * end Options for Booking_Calendars