From dd3270e114fba07811ecaa3a1db483d34bc9e8bb Mon Sep 17 00:00:00 2001 From: Raf-sns Date: Mon, 13 May 2024 12:23:54 +0200 Subject: [PATCH] V 3.0.0 --- README.md | 41 +++++++----- dist/Booking_Calendars.css | 5 +- dist/Booking_Calendars.js | 7 +- dist/Booking_Calendars.min.css | 3 +- dist/Booking_Calendars.min.js | 4 +- example/CSS/Booking_Calendars.css | 5 +- example/JS/Booking_Calendars.js | 7 +- example/JS/main.js | 105 +++++++++++++++--------------- 8 files changed, 92 insertions(+), 85 deletions(-) diff --git a/README.md b/README.md index 097b177..46cdb71 100644 --- a/README.md +++ b/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', diff --git a/dist/Booking_Calendars.css b/dist/Booking_Calendars.css index 1fda695..e21967e 100644 --- a/dist/Booking_Calendars.css +++ b/dist/Booking_Calendars.css @@ -1,5 +1,4 @@ - -/* CSS CALENDARS */ +/* Booking_Calendars.css Version: 3.0.0 (13/05/2024) [dd/mm/yyyy] */ #Booking_Calendars_Container { margin: 0 auto; display: flex; @@ -7,7 +6,7 @@ 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; diff --git a/dist/Booking_Calendars.js b/dist/Booking_Calendars.js index 95deb16..fe08bc5 100644 --- a/dist/Booking_Calendars.js +++ b/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'); diff --git a/dist/Booking_Calendars.min.css b/dist/Booking_Calendars.min.css index 00e4f6e..e112293 100644 --- a/dist/Booking_Calendars.min.css +++ b/dist/Booking_Calendars.min.css @@ -1 +1,2 @@ -#Booking_Calendars_Container {margin: 0 auto;display: flex;width: 100%;min-height: 100vh;flex-direction: row;flex-wrap: wrap;align-content: center;align-items: flex-start;justify-content: center;gap: 1em;}table.BC-style_calendar {width: auto;border: 1px solid #7c7c7c;border-collapse: collapse;border-spacing: 0;box-sizing: border-box;}th.BC-month_name {background: #707070;color: #fefefe;border: 1px solid #7c7c7c;text-align: center;width: 40px;height: 40px;font-size: 1em;font-weight: 400;padding: 0.2em 0.3em;}td.BC-days_names {background: #707070;color: #fefefe;border: 1px solid #7c7c7c;text-align: center;width: 40px;height: 40px;font-size: 0.9em;padding: 0;}td.BC-day {background: lightgreen;color: #2e2e2e;border: 1px solid #7c7c7c;text-align: center;width: 40px;height: 40px;font-size: 0.9em;padding: 0;}td.BC-day_left {color: rgb(35 35 35 / 36%);}td.BC-booked {background: orange;}td.BC-booked.BC-start {background-image: linear-gradient(to left, orange 50%, lightgreen 50%);}td.BC-booked.BC-end {background-image: linear-gradient(to right, orange 50%, lightgreen 50%);} +/* 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: flex-start;align-items: flex-start;justify-content: center;gap: 1em;}table.BC-style_calendar {width: auto;border: 1px solid #7c7c7c;border-collapse: collapse;border-spacing: 0;box-sizing: border-box;}th.BC-month_name {background: #707070;color: #fefefe;border: 1px solid #7c7c7c;text-align: center;width: 40px;height: 40px;font-size: 1em;font-weight: 400;padding: 0.2em 0.3em;}td.BC-days_names {background: #707070;color: #fefefe;border: 1px solid #7c7c7c;text-align: center;width: 40px;height: 40px;font-size: 0.9em;padding: 0;}td.BC-day {background: lightgreen;color: #2e2e2e;border: 1px solid #7c7c7c;text-align: center;width: 40px;height: 40px;font-size: 0.9em;padding: 0;}td.BC-day_left {color: rgb(35 35 35 / 36%);}td.BC-booked {background: orange;}td.BC-booked.BC-start {background-image: linear-gradient(to left, orange 50%, lightgreen 50%);}td.BC-booked.BC-end {background-image: linear-gradient(to right, orange 50%, lightgreen 50%);} diff --git a/dist/Booking_Calendars.min.js b/dist/Booking_Calendars.min.js index 392dff0..591b2a1 100644 --- a/dist/Booking_Calendars.min.js +++ b/dist/Booking_Calendars.min.js @@ -5,6 +5,6 @@ * @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] */ -const Booking_calendars=(e,t)=>{t.year=t.year?t.year:(new Date).getFullYear();const a=e=>{let t=e.split("-"),a=new Date(parseInt(t[0]),parseInt(t[1])-1,parseInt(t[2]));return a.setHours(0,0,0,0),a};let n=0;const d=e=>{let d=[];for(;ns.getTime()&&e.getTime()e.getTime())break}return-1!=d.indexOf("BC-start")&&-1!=d.indexOf("BC-end")&&(d.length=0,d.push("BC-booked")),d};let s,r,o,l,m,i,c,h,g,p,C,u,y,_,B,T,f,D=t.months_range?t.names_months.slice(t.months_range[0],t.months_range[1]):t.names_months,E=t.names_months.indexOf(D[0]);for(var b=0;b<=D.length-1;b++){s=document.createElement("table"),s.classList.add("BC-style_calendar"),m=document.createElement("tr"),i=document.createElement("th"),i.setAttribute("colspan","7"),i.classList.add("BC-month_name"),i.innerText=D[b]+" "+t.year,m.appendChild(i),s.appendChild(m),g=document.createElement("tr"),s.appendChild(g);for(var k=0;k0;x--)B=new Date(t.year,E,c-x),B.setHours(0,0,0,0),u=document.createElement("td"),u.classList.add("BC-day","BC-day_left"),u.innerText=B.getDate(),C.appendChild(u);for(;E==l;){if(u=document.createElement("td"),u.classList.add("BC-day"),u.innerText=h.getDate(),f=d(h),0!=f.length&&f.forEach(((e,t)=>{u.classList.add(e)})),C.appendChild(u),s.appendChild(C),c++,h.setDate(c),h.setHours(0,0,0,0),l!=h.getMonth()&&0!=r){_=7-r;for(var L=0;L<_;L++)T=new Date(t.year,l,c+L),T.setHours(0,0,0,0),u=document.createElement("td"),u.classList.add("BC-day","BC-day_left"),u.innerText=T.getDate(),C.appendChild(u)}l=h.getMonth(),r=h.getDay(),1==r&&(C=document.createElement("tr"))}E++,e.appendChild(s)}}; +const Booking_calendars=(e,t)=>{t.year=t.year?t.year:(new Date).getFullYear();const a=e=>{let t=e.split("-"),a=new Date(parseInt(t[0]),parseInt(t[1])-1,parseInt(t[2]));return a.setHours(0,0,0,0),a};let n=0;const d=e=>{let d=[];for(;ns.getTime()&&e.getTime()e.getTime())break}return-1!=d.indexOf("BC-start")&&-1!=d.indexOf("BC-end")&&(d.length=0,d.push("BC-booked")),d};let s,r,o,l,m,i,c,h,g,p,C,u,y,_,B,T,f,D=t.months_range?t.names_months.slice(t.months_range[0],t.months_range[1]+1):t.names_months,E=t.names_months.indexOf(D[0]);for(var b=0;b0;x--)B=new Date(t.year,E,c-x),B.setHours(0,0,0,0),u=document.createElement("td"),u.classList.add("BC-day","BC-day_left"),u.innerText=B.getDate(),C.appendChild(u);for(;E==l;){if(u=document.createElement("td"),u.classList.add("BC-day"),u.innerText=h.getDate(),f=d(h),0!=f.length&&f.forEach(((e,t)=>{u.classList.add(e)})),C.appendChild(u),s.appendChild(C),c++,h.setDate(c),h.setHours(0,0,0,0),l!=h.getMonth()&&0!=r){_=7-r;for(var L=0;L<_;L++)T=new Date(t.year,l,c+L),T.setHours(0,0,0,0),u=document.createElement("td"),u.classList.add("BC-day","BC-day_left"),u.innerText=T.getDate(),C.appendChild(u)}l=h.getMonth(),r=h.getDay(),1==r&&(C=document.createElement("tr"))}E++,e.appendChild(s)}}; diff --git a/example/CSS/Booking_Calendars.css b/example/CSS/Booking_Calendars.css index 1fda695..e21967e 100644 --- a/example/CSS/Booking_Calendars.css +++ b/example/CSS/Booking_Calendars.css @@ -1,5 +1,4 @@ - -/* CSS CALENDARS */ +/* Booking_Calendars.css Version: 3.0.0 (13/05/2024) [dd/mm/yyyy] */ #Booking_Calendars_Container { margin: 0 auto; display: flex; @@ -7,7 +6,7 @@ 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; diff --git a/example/JS/Booking_Calendars.js b/example/JS/Booking_Calendars.js index 95deb16..fe08bc5 100644 --- a/example/JS/Booking_Calendars.js +++ b/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'); diff --git a/example/JS/main.js b/example/JS/main.js index 924d200..36b2182 100644 --- a/example/JS/main.js +++ b/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,7 +60,7 @@ 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', @@ -70,38 +68,37 @@ var Options = { ], // 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