JavaScript的渲染逻辑:横向动力预订日历横向、逻辑、日历、动力

2023-09-11 01:12:32 作者:Agoni°暮念

我在Javascript中生成的年历每个月它呈现为一排,横向为一组表。正月动态设置的基础上获取当前serverTime。每个表是一个月。该表是:

 <表ID =M1>< /表>
<表ID =2>< /表>
<表ID =M3>< /表>
<表ID =M4>< /表>
<表ID =M5>< /表>
<表ID =M6>< /表>
<表ID =M7>< /表>
<表ID =M8>< /表>
<表ID =M9>< /表>
<表ID =M10>< /表>
<表ID =M11>< /表>
<表ID =M12>< /表>
<表ID =M13>< /表>
<表ID =M14>< /表>
 

和DOM注射后每个月的ID被填充。举例月'13 =

 <表ID =2>
< TBODY>< TR>< TD> 10月13 LT; / TD>
< TD>< / TD>< TD>< / TD>
&所述; TD类=无济于事ID =10_1_13→1&其中; / TD>
&所述; TD类=无济于事ID =10_2_13→2&其中; / TD>
&所述; TD类=无济于事ID =10_3_13→3&所述; / TD>
&所述; TD类=无济于事ID =10_4_13→4&所述; / TD>
&所述; TD类=无济于事ID =10_5_13→5&所述; / TD>
&所述; TD类=无济于事ID =10_6_13→6&所述; / TD>
< TD类=无济于事ID =10_7_13> 7< / TD>
&所述; TD类=无济于事ID =10_8_13→8&所述; / TD&GT;&所述; TD类=无济于事ID =10_9_13&GT; 9&所述; / TD&GT;&所述; TD类=无济于事ID = 10_10_13→10&所述; / TD&GT;&所述; TD类=无济于事ID =10_11_13&GT 11所述; / TD&GT;&所述; TD类=无济于事ID =10_12_13&GT 12所述; / TD&GT; &所述; TD类=无济于事ID =10_13_13&GT 13所述; / TD&GT;&所述; TD类=无济于事ID =10_14_13&GT 14所述; / TD&GT;&所述; TD类=无济于事ID = 10_15_13→15&所述; / TD&GT;&所述; TD类=无济于事ID =10_16_13&GT; 16&所述; / TD&GT;&所述; TD类=无济于事ID =10_17_13&GT; 17&所述; / TD&GT; &LT; TD类=无济于事ID =10_18_13&GT; 18&LT; / TD&GT;&LT; TD类=无济于事ID =10_19_13&GT; 19&LT; / TD&GT;&LT; TD类=无济于事ID = 10_20_13→20&所述; / TD&GT;&所述; TD类=无济于事ID =10_21_13&GT; 21&所述; / TD&GT;&所述; TD类=无济于事ID =10_22_13&GT; 22℃; / TD&GT; &所述; TD类=无济于事ID =10_23_13&GT; 23℃; / TD&GT;&所述; TD类=无济于事ID =10_24_13&GT; 24&所述; / TD&GT;&所述; TD类=无济于事ID = 10_25_13→25&所述; / TD&GT;&所述; TD类=无济于事ID =10_26_13&GT; 26&所述; / TD&GT;&所述; TD类=无济于事ID =10_27_13&GT; 27&所述; / TD&GT; &所述; TD类=无济于事ID =10_28_13&GT 28和; / TD&GT;&所述; TD类=无济于事ID =10_29_13&GT; 29&所述; / TD&GT;&所述; TD类=无济于事ID = 10_30_13→30&所述; / TD&GT;&所述; TD类=无济于事 id="10_31_13">31</td><td></td><td></td><td></td><td></td></tr></tbody></table>
 

我有一个JavaScript函数 showBook​​ingData(数据)接收两个日期从服务器(的startDate +结束日期)为我传递给渲染功能的预订 highlightBookTableMonthsChange(开始,结束)显示日历相匹配的开始和结束日期上的有色预订期。

Windows 10即将大改 聊聊未来比较靠谱的新变化

这使得函数计算的日期的差别,以便它可以AddClass每个预订显示一个封锁了一段日子的,并强调相关的表。

渲染功能,接收的日期下面的JSON =

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

的问题:

我的渲染功能highlightBookTableMonthsChange(开始,结束)'接收日期正确,但似乎从1900年代初期通过早期2100的各种担保,在未来六个月内该点起不同的输出日期来计算 - 取决于时间客户端计算机的格式!!!因此,我需要牵制格式某处,以免我相信这是某种假定日期计算中的code回事,在客户端的。

JavaScript函数:

 函数showBook​​ingData(数据){
    VAR的len = data.d.length;
    变种I = 0;
    对于(i = 0; I&LT; LEN;我++){
        VAR sptype = data.d [I] .__类型;
        VAR的startDate = data.d [I] .dataValueField;
        VAR结束日期= data.d [I] .dataValueField2;
//警报({开始日期:+的startDate +,结束日期:+结束日期+'})
        highlightBookTableMonthsChange(的startDate,结束日期)
    }
}

功能highlightBookTableMonthsChange(起点,终点){

    VAR开始=新的日期(开始);
    VAR结束=新的日期(结束);
    警报({开始日期:+启动+,结束日期:+端+'})
    变种I = 1;
    $(#datesd)HTML($(#datesd)HTML()+'&LT; BR /&GT;+启动++端);
    变种timeDiff测量= Math.abs(end.getTime() -  start.getTime());
    VAR diffDays = Math.ceil(timeDiff测量/(1000 * 3600 * 24));
    diffDays ++;
    同时(开始&LT; =结束){
        变种startMonth = start.getMonth()+ 1;
        变种的startDate = start.getDate();
        VAR年= start.getFullYear();
        如果(ⅰ== 1){
            VAR prevClass = $(#+ parseInt函数(startMonth)+_+的startDate +_+年).attr(类);
            如果(prevClass ==lastBook|| prevClass ==fullBook)
            {$(#+ parseInt函数(startMonth)+_+的startDate +_+年).attr(类,fullBook); }
            其他
                $(#+ parseInt函数(startMonth)+_+的startDate +_+年).attr(类,firstBook);
        }
        否则,如果(我== diffDays){
            $(#+ parseInt函数(startMonth)+_+的startDate +_+年).attr(类,lastBook);
        }
        其他 {
            $(#+ parseInt函数(startMonth)+_+的startDate +_+年).attr(类,fullBook);
        }
        变种newDate = start.setDate(start.getDate()+ 1);
        启动=新的日期(newDate);
        I = I + 1;
    }
}

功能createYearCalander(){
    变种I = 1;
    VAR startDates =新的日期(calanderStartDate);
    变种startMonth = startDates.getMonth();
    变种startYear = startDates.getFullYear();
    如果(国家=美国){
        startDatee = startMonth +/ 1 /+ startYear;
    }
    其他 {
        startDatee =1 /+ startMonth +/+ startYear;
    }
    startMonth ++;
    对于(i = 1; I&LT; = 12;我++)网格月{//数
        createMonthTable(我,startMonth,startYear);
        如果(startMonth == 12){
            startMonth = 1;
            startYear ++;
        }
        其他
            startMonth ++;
    }

    gerData(1); //获取预订日期数据从服务器
}

功能createMonthTable(monthCount,月,年){
    无功表1 =的document.getElementById('M'+ monthCount);
    变种tblRow = tblRow = table1.insertRow(0);
    VAR tblCell = NULL;
    VAR dayys = countDaysOfMonth(第m个,年);
    VAR startDates =新的日期(第m +/ 1 /+年)
    变种firstDayOfMth = startDates.getDay(); //每个月的1日
    VAR dataStarts = firstDayOfMth;
    VAR dataEnds = firstDayOfMth + dayys;
    变种I = 0;
    变种tempDayStart = 1;
    对于(i = 0; I&LT; = 37;我++){
        tblCell = tblRow.insertCell(ⅰ);
        如果(我== 0){
            tblCell.innerHTML = MONTHNAME(第m)+,+年;
        }
        否则,如果(I&GT; dataStarts和放大器;&安培; I&LT; = dataEnds){
             $(tblCell).attr(类,无济于事)
             tblCell.id =第m +_+ tempDayStart +_+年;
            tblCell.innerHTML = tempDayStart;
            tempDayStart = tempDayStart + 1;
        }

    }
    如果(monthCount == 12){//显示在表网格月
        endDatee =第m +/+ dayys +/+年;
    }
}


功能countDaysOfMonth(M,Y)
{
    ?回报(/8|3|5|10/.test(--m)30:M = = 1 ||(Y%400)?((Y%4)及;&放Y%100!)!? 29:28:31);
}


函数MONTHNAME(月)
{
    如果(月== 1)
        回归简
    否则,如果(月== 2)
        回归晶圆厂
    否则,如果(月== 3)
        返回'月'
    否则,如果(月== 4)
        回归四月
    否则,如果(月== 5)
        回报'五一'
    否则,如果(月== 6)
        返回'君'
    否则,如果(月== 7)
        回归七月
    否则,如果(月== 8)
        回报'八月'
    否则,如果(月== 9)
        回归九月
    否则,如果(月== 10)
        回归十月
    否则,如果(月== 11)
        回归十一月
    否则,如果(月== 12)
        回归十二月
}
传播getServerTime(){
    $阿贾克斯({
        键入:POST,
        //数据:{'PROPID':+ programId +},
        网址:SVCS / booking.asmx / getServerDate
        的contentType:应用/ JSON的;字符集= UTF-8,
        数据类型:JSON,
        成功:功能(数据){
            calanderStartDate = data.d;
            createYearCalander();
            SetPrpCal();
        },
        错误:的OnError
    });
}

功能gerData(programId){
    ZZP =($ .super_cookie()read_value(propRz1,ZC)。);
    $阿贾克斯({
        键入:POST,
        数据:{CP':+ ZZP +,FDATE':'+ startDatee +','tDate':'+ endDatee +'},
        网址:SVCS / booking.asmx / getPropertyBookings
        的contentType:应用/ JSON的;字符集= UTF-8,
        数据类型:JSON,
        成功:功能(数据){
            showBook​​ingData(数据)
        },
        错误:的OnError
    });
}
 

解决方案

我通过进一步测试发现这个问题的答案:

我想在左手日期栏显示的简短格式年保持宽度下降,但通过使用短日期格式,某些客户端系统的计算使用19 **和短期的日期格式的一年。

所以,我从服务器上改变了JSON输出流的日期格式(MM / DD / YYYYY)强制全年。这也自动改变表中的时间的ID从10_1_13格式例如为10_1_2013​​为10月的第1次2013年,准确地对表处理预订。但也presents整整一年的第一个月列。因此,要解决这个我修剪的功能createMonthTable中的日期格式(monthCount,月,年)。因此,新的功能是这样的:

 函数createMonthTable(monthCount,月,年){
    变种startYearShort =(年+').substring(2,4); //转换2DIGIT YY
    无功表1 =的document.getElementById('M'+ monthCount);
    变种tblRow = tblRow = table1.insertRow(0);
    VAR tblCell = NULL;
    VAR dayys = countDaysOfMonth(第m个,年);
    VAR startDates =新的日期(第m +/ 1 /+年)
    变种firstDayOfMth = startDates.getDay(); //每个月的1日
    VAR dataStarts = firstDayOfMth;
    VAR dataEnds = firstDayOfMth + dayys;
    变种I = 0;
    变种tempDayStart = 1;
    对于(i = 0; I&LT; = 37;我++){
        tblCell = tblRow.insertCell(ⅰ);
        如果(我== 0){
            tblCell.innerHTML = MONTHNAME(第m)++ startYearShort;
        }
        否则,如果(I&GT; dataStarts和放大器;&安培; I&LT; = dataEnds){
            $(tblCell).attr(类,无济于事)
            tblCell.id =第m +_+ tempDayStart +_+年;
            tblCell.innerHTML = tempDayStart;
            tempDayStart = tempDayStart + 1;
        }

    }
    如果(monthCount == 14){//取决于为#months表行
        endDatee =第m +/+ dayys +/+年;
    //我发送startDatee和放大器; endDatee值作为一个AJAX获取到服务器,这样我得到
    //返回日期数组只匹配日历月的网格。
    }
}
 

这现在完美的作品! 看到输出

有关任何人寻找一个客户端灵活的动态月份水平的日历,它接收通过JSON预订周期。这是一个快速的模型利用一点点CSS轻松样式。 如果有人想要一个CSS文件太 - 然后给我发短信,我必须发送一个

I have a year calendar generated in Javascript which renders each month as a row, horizontally as a group of tables. Dynamically setting the first month based on getting current serverTime. Each table is a month. The tables are:

<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>

and after DOM injection each month id is populated. Example for October '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>

I have a javascript function "showBookingData(data)" which receives two dates from the server (startDate + endDate) for a booking which I pass to a render function "highlightBookTableMonthsChange(start, end)" to show a colored booked period on the calendar matching the start and end dates.

This render function calculates the difference in dates so that it can AddClass to each of the days of the booking to show a blocked out period, and highlights the relevant table.

The render function receives the dates in the following JSON =

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

The Problem:

My Render function 'highlightBookTableMonthsChange(start, end)' receives the dates correctly but seems to calculate from this point onwards different output dates varying from the early 1900's through to early 2100's for bookings in the next six months - depending on the time format of the client computer !!! So I need to tie down a format somewhere to avoid what I believe is some sort of assumed date calculations going on within the code at client side.

Javascript Functions:

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
    });
}

解决方案

I found the answer to this via further testing:

I want to display the short format year in the left hand date column to keep the width down, but by using short date format, some client systems calculate the dates using 19** and the short format year.

So I changed the output JSON stream from the server to the date format (MM/dd/yyyyy) to force full year. This also automatically changes the date ID in the tables from "10_1_13" format for example to "10_1_2013" as the Oct 1st 2013 and accurately processes the bookings on the table. But also presents a full year in the first month column. So to correct this I trimmed the date format within the function createMonthTable(monthCount, mth, year). So the new function looks like this:

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.
    }
}

This now works perfectly ! See the output

For anybody looking for a client side flexible dynamic month horizontal calendar, which receives booking periods via JSON. This is a fast model easily styled using a little CSS. If anybody wants a css file too - then message me and I shall send one.

 
精彩推荐
图片推荐