堆栈内存溢出
  繁体   English   中英

JavaScript渲染逻辑：水平动态预订日历

[英]JavaScript Render Logic : Horizontal Dynamic Booking Calendar

 原文  2013-09-02 01:44:43  1   2    javascript/ jquery/ ajax/ date/ calendar

问题描述

我有一个用Javascript生成的年日历，该日历将每个月连续，水平地作为一组表呈现。 根据获取当前的serverTime动态设置第一个月。 每个表是一个月。 这些表是： 

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

并且在注入DOM之后，每个月都会填充ID。 '13年10月的示例= 

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

我有一个JavaScript函数“ showBookingData（data） ”，该函数从服务器接收两个日期（startDate + endDate）进行预订，然后将其传递给渲染函数“ highlightBookTableMonthsChange（start，end） ”，以在日历上显示彩色的预定期。与开始日期和结束日期匹配。

此渲染函数计算日期差异，以便可以在预订的每一天中添加Class，以显示阻塞的时间段，并突出显示相关表。

render函数在以下JSON =中接收日期 

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

问题：

我的Render函数'highlightBookTableMonthsChange（start，end）'正确接收了日期，但似乎从这一点开始计算了不同的输出日期，从1900年代到2100年代，这取决于接下来六个月的预订-具体取决于客户端计算机！！！ 因此，我需要在某处绑定一种格式，以避免在客户端代码中进行某种假定的日期计算。

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

2 个解决方案

解决方案1
 1  2013-09-02 02:47:53

我知道这并不能回答您的问题，但是由于已经有大量可以重用的原因，您是在滚动自己的日历功能的任何原因吗？ 日期/时间可能会比较棘手。

如果您必须自己动手，请访问http://momentjs.com/ 。 它将允许您执行诸如获取两个日期之间的天数之类的操作，并且还可以为任何日期添加一天。

因此，您可以执行类似操作（无需查看库即可使用伪代码）： 

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

解决方案2
 1 已采纳  

我通过进一步测试找到了答案：

我想在左侧日期列中显示短格式年份以减小宽度，但是某些客户端系统通过使用短日期格式来使用19 **和短格式年份来计算日期。

因此，我将服务器的输出JSON流更改为日期格式（MM / dd / yyyyy）以强制使用整年。 这还将自动将表格中的日期ID从“ 10_1_13”格式更改为例如“ 2013年10月1日为” 10_1_2013”​​，并准确处理表格上的预订。 而且在第一个月栏中还会显示一整年。 因此，要纠正此问题，我在函数createMonthTable（monthCount，mth，year）中修剪了日期格式。 因此，新功能如下所示： 

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

现在，它可以完美运行！ 查看输出

对于任何需要客户端灵活的动态月份水平日历的人，它都可以通过JSON接收预订期。 这是一个快速的模型，使用一些CSS即可轻松设置样式。 如果有人也想要一个css文件-请给我发消息，我将发送一个。

图像-带有预订的水平布局

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 Javascript预订年日历 JavaScript动态日历 jQuery预订日历 纯JavaScript中的水平日历今天的日期突出显示 在jquery和javascript中创建自定义日历的逻辑 创建动态事件到JavaScript日历 酒店预订系统日历 使用Java的预订计算器 使用JavaScript或jQuery的JSP中的动态年份日历 Wordpress预订日历JS脚本冲突
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM