Logique de rendu JavaScript: calendrier de réservation dynamique horizontal

J'ai un calendrier d'année généré en version javascript qui rend chaque mois une ligne, horizontalement en tant que groupe de tables. Définir dynamiquement le premier mois en fonction de la mise à jour de serverTime. Chaque table est un mois. Les tableaux sont:

<table id="m1"></table> <table id="m2"></table> <table id="m3"></table> <table id="m4"></table> <table id="m5"></table> <table id="m6"></table> <table id="m7"></table> <table id="m8"></table> <table id="m9"></table> <table id="m10"></table> <table id="m11"></table> <table id="m12"></table> <table id="m13"></table> <table id="m14"></table> 

Et après l'injection DOM chaque mois, l'identifiant est rempli. Exemple pour octobre '13 =

 <table id="m2"> <tbody><tr><td>Oct 13</td> <td></td><td></td> <td class="avail" id="10_1_13">1</td> <td class="avail" id="10_2_13">2</td> <td class="avail" id="10_3_13">3</td> <td class="avail" id="10_4_13">4</td> <td class="avail" id="10_5_13">5</td> <td class="avail" id="10_6_13">6</td> <td class="avail" id="10_7_13">7</td> <td class="avail" id="10_8_13">8</td><td class="avail" id="10_9_13">9</td><td class="avail" id="10_10_13">10</td><td class="avail" id="10_11_13">11</td><td class="avail" id="10_12_13">12</td><td class="avail" id="10_13_13">13</td><td class="avail" id="10_14_13">14</td><td class="avail" id="10_15_13">15</td><td class="avail" id="10_16_13">16</td><td class="avail" id="10_17_13">17</td><td class="avail" id="10_18_13">18</td><td class="avail" id="10_19_13">19</td><td class="avail" id="10_20_13">20</td><td class="avail" id="10_21_13">21</td><td class="avail" id="10_22_13">22</td><td class="avail" id="10_23_13">23</td><td class="avail" id="10_24_13">24</td><td class="avail" id="10_25_13">25</td><td class="avail" id="10_26_13">26</td><td class="avail" id="10_27_13">27</td><td class="avail" id="10_28_13">28</td><td class="avail" id="10_29_13">29</td><td class="avail" id="10_30_13">30</td><td class="avail" id="10_31_13">31</td><td></td><td></td><td></td><td></td></tr></tbody></table> 

J'ai une fonction javascript " showBookingData (data) " qui reçoit deux dates du serveur (startDate + endDate) pour une réservation que je passe à une fonction de rendu " highlightBookTableMonthsChange (début et fin) " pour afficher une période réservée en couleur sur le calendrier Correspondant aux dates de début et de fin.

Cette fonction de rendu calcule la différence de dates afin de pouvoir ajouter AddClass à chaque jour de la réservation pour afficher une période bloquée et met en évidence le tableau correspondant.

La fonction de rendu reçoit les dates dans le JSON suivant =

 {"d":[{"__type":"booking+PropDates","dataValueField":"02/19/14","dataValueField2":"02/26/14"}]} 

Le problème:

La fonction Render "highlightBookTableMonthsChange (start, end)" reçoit correctement les dates, mais semble calculer à partir de ce moment différentes dates de sortie allant du début des années 1900 au début des années 2100 pour les réservations au cours des six prochains mois – selon le format horaire du Ordinateur client !!! J'ai donc besoin d'attacher un format quelque part pour éviter ce que je crois être une sorte de calculs de date supposés en cours dans le code côté client.

Fonctions Javascript:

 function showBookingData(data) { var len = data.d.length; var i = 0; for (i = 0; i < len; i++) { var sptype = data.d[i].__type; var startDate = data.d[i].dataValueField; var endDate = data.d[i].dataValueField2; // alert("{'startdate':" + startDate + ",'enddate':'" + endDate + "'}") highlightBookTableMonthsChange(startDate, endDate) } } function highlightBookTableMonthsChange(start, end) { var start = new Date(start); var end = new Date(end); alert("{'startdate':" + start + ",'enddate':'" + end + "'}") var i = 1; $("#datesd").html($("#datesd").html()+'<br/>'+start + "" + end); var timeDiff = Math.abs(end.getTime() - start.getTime()); var diffDays = Math.ceil(timeDiff / (1000 * 3600 * 24)); diffDays++; while (start <= end) { var startMonth = start.getMonth() + 1; var startDate = start.getDate(); var year = start.getFullYear(); if (i == 1) { var prevClass = $("#" + parseInt(startMonth) + "_" + startDate + "_" + year).attr("class"); if (prevClass == "lastBook" || prevClass == "fullBook") { $("#" + parseInt(startMonth) + "_" + startDate + "_" + year).attr("class", "fullBook"); } else $("#" + parseInt(startMonth) + "_" + startDate + "_" + year).attr("class", "firstBook"); } else if (i == diffDays) { $("#" + parseInt(startMonth) + "_" + startDate + "_" + year).attr("class", "lastBook"); } else { $("#" + parseInt(startMonth) + "_" + startDate + "_" + year).attr("class", "fullBook"); } var newDate = start.setDate(start.getDate() + 1); start = new Date(newDate); i=i+1; } } function createYearCalander() { var i = 1; var startDates = new Date(calanderStartDate); var startMonth = startDates.getMonth(); var startYear = startDates.getFullYear(); if (country = "US") { startDatee = startMonth + "/1/" + startYear; } else { startDatee = "1/" + startMonth + "/" + startYear; } startMonth++; for (i = 1; i <= 12; i++) { //Number of Months on Grid createMonthTable(i, startMonth, startYear); if (startMonth == 12) { startMonth = 1; startYear++; } else startMonth++; } gerData(1); //Get Booking Date Data From Server } function createMonthTable(monthCount,mth,year) { var table1 = document.getElementById('m' + monthCount); var tblRow = tblRow = table1.insertRow(0); var tblCell = null; var dayys = countDaysOfMonth(mth, year); var startDates = new Date(mth + "/1/" + year) var firstDayOfMth = startDates.getDay(); //first day of month var dataStarts = firstDayOfMth; var dataEnds = firstDayOfMth + dayys; var i = 0; var tempDayStart = 1; for (i = 0; i <= 37; i++) { tblCell = tblRow.insertCell(i); if (i == 0) { tblCell.innerHTML = monthName(mth) + "," + year; } else if (i > dataStarts && i <= dataEnds) { $(tblCell).attr("class", "avail") tblCell.id = mth + "_" + tempDayStart + "_" + year; tblCell.innerHTML = tempDayStart; tempDayStart = tempDayStart + 1; } } if (monthCount == 12) { //Months displayed on table grid endDatee = mth + "/" + dayys + "/" + year; } } function countDaysOfMonth(m,y) { return (/8|3|5|10/.test(--m) ? 30 : m == 1 ? (!(y % 4) && y % 100) || !(y % 400) ? 29 : 28 : 31); } function monthName(month) { if (month == 1) return 'Jan' else if (month == 2) return 'Fab' else if (month == 3) return 'Mar' else if (month == 4) return 'Apr' else if (month == 5) return 'May' else if (month == 6) return 'Jun' else if (month == 7) return 'Jul' else if (month == 8) return 'Aug' else if (month == 9) return 'Sep' else if (month == 10) return 'Oct' else if (month == 11) return 'Nov' else if (month == 12) return 'Dec' } function getServerTime() { $.ajax({ type: "POST", //data: "{'propId':" + programId + "}", url: "svcs/booking.asmx/getServerDate", contentType: "application/json; charset=utf-8", dataType: "json", success: function (data) { calanderStartDate = data.d; createYearCalander(); SetPrpCal(); }, error: OnError }); } function gerData(programId) { Zzp = ($.super_cookie().read_value("propRz1", "zc")); $.ajax({ type: "POST", data: "{'cp':" + Zzp + ",'fDate':'" + startDatee + "','tDate':'" + endDatee + "'}", url: "svcs/booking.asmx/getPropertyBookings", contentType: "application/json; charset=utf-8", dataType: "json", success: function (data) { showBookingData(data) }, error: OnError }); } 

Je me rends compte que cela ne répond pas à votre question, mais pourquoi vous faites-vous rouler votre propre fonctionnalité de calendrier quand il y a déjà une tonne que vous pourriez réutiliser? La date / les heures peuvent être délicates.

Si vous devez rouler votre propre, consultez http://momentjs.com/ . Cela vous permettra de faire des choses comme obtenir le nombre de jours entre deux dates, et vous pouvez également ajouter un jour à n'importe quelle date.

Vous pouvez donc faire quelque chose comme (pseudocode sans regarder la bibliothèque):

 newDate = startDate; While ((newDate = newDate.addDay(1)) < endDate) { // highlight on calendar } 

J'ai trouvé la réponse à cela via de nouveaux tests:

Je souhaite afficher l'année de format court dans la colonne de la main gauche pour réduire la largeur, mais en utilisant un format de date abrégée, certains systèmes clients calculent les dates en utilisant 19 ** et l'année de format court.

J'ai donc changé le flux JSON de sortie du serveur au format de date (MM / jj / aaaa) pour forcer l'année complète. Cela modifie également automatiquement l'ID de la date dans les tableaux du format "10_1_13" par exemple à "10_1_2013" au 1er octobre 2013 et traite avec précision les réservations sur la table. Mais présente également une année complète dans la colonne du premier mois. Donc, pour corriger cela, j'ai coupé le format de date dans la fonction createMonthTable (monthCount, mth, year) . Donc, la nouvelle fonction ressemble à ceci:

 function createMonthTable(monthCount, mth, year) { var startYearShort = (year + '').substring(2, 4); //convert 2digit yy var table1 = document.getElementById('m' + monthCount); var tblRow = tblRow = table1.insertRow(0); var tblCell = null; var dayys = countDaysOfMonth(mth, year); var startDates = new Date(mth + "/1/" + year) var firstDayOfMth = startDates.getDay(); //first day of month var dataStarts = firstDayOfMth; var dataEnds = firstDayOfMth + dayys; var i = 0; var tempDayStart = 1; for (i = 0; i <= 37; i++) { tblCell = tblRow.insertCell(i); if (i == 0) { tblCell.innerHTML = monthName(mth) + " " + startYearShort; } else if (i > dataStarts && i <= dataEnds) { $(tblCell).attr("class", "avail") tblCell.id = mth + "_" + tempDayStart + "_" + year; tblCell.innerHTML = tempDayStart; tempDayStart = tempDayStart + 1; } } if (monthCount == 14) { //depends on table rows for #months endDatee = mth + "/" + dayys + "/" + year; //I Send startDatee & endDatee values as an AJAX GET to the server so that I get //returned a date array matching the calendar months grid only. } } 

Cela fonctionne maintenant parfaitement! Voir la sortie

Pour quiconque cherche un calendrier horizontal mensuel flexible et flexible qui reçoit des périodes de réservation via JSON. Il s'agit d'un modèle rapide avec un style CSS simple. Si quelqu'un veut un fichier css aussi – alors, envoyez-moi un message et je lui en enverrai un.

Image - Disposition horizontale avec réservations