使用javascript和Moment.js。星期一 - 星期天，本周只有节目

时间：2016-06-08 07:37:15

标签： javascript jquery css handlebars.js momentjs

我在使用Javascript时遇到了一些麻烦。在使用Javascript进行编程时，我并不是那么先进，所以我很难过。

我要做的是从头开始制作日历，我现在遇到的问题是让我的代码只显示本周，而且只在本周。然后当按下右箭头时，它应该显示下一周，或者当按下左箭头时，它应该显示下一个。

一切都是本地的。

网站上的所有内容都是丹麦语，但我用英语发表评论，并用英语命名变量，所以不要担心所有输出文本。

这里有一些代码

!!更新!! JSFIDDLE https://jsfiddle.net/b6n3d36a/ 根本不会显示的日子，请帮助

** !!更新2 !! * 我修好了它。我得到了同事的帮助。我们得到了它的工作。 感谢所有人对此进行调查。

指数文件 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no,initial-scale=1.0, minimum-scale=1.0, maximum-scale=2.0" />
    <title>Nikolaj kalender</title>
    <script src="js/libs/handlebars/handlebars-v4.0.5.js"></script>
    <script src="js/libs/moment/moment-with-locales.js"></script>
    <script src="js/libs/jquery-1.12.4.min.js"></script>
    <script src="js/core.js"></script>

    <!-- RESPONSIVE STYLESHEET -->
    <link rel="stylesheet" href="style/responsive/responsive.css">
    <!-- STANDARD STYLE SHEET -->
    <link rel="stylesheet" href="style/style.css">
</head>
<body>
<script>
    $(document).ready(function () {



        moment.locale('da');   //danish language
        startdate = moment("2016-06-07");  //todays date (yy-mm-dd-h:i:s) not sure if right format thought
        var new_date = moment(startdate, "DD").add(5, 'days');

        var day = new_date.format('ddd');
        // var month = new_date.format('MM');
        // var year = new_date.format('YYYY');

        var dataSet = {
            dates: []
        }


        var today = moment();
        var todayDay = today.format('ddd'); // get TODAY date (ex; 2nd)


        function generateDaterange() {
            var start = new Date();

            var dates = [];
            for (var i = 0; i < 7; i++) {
                var d = new Date(start.getTime());
                d.setDate(d.getDate() + i);
                console.log(d);
                var date = {
                    date: d,
                    date_human: moment(d).format('ddd'),
                    date_humanDays: moment(d).format('Do')
                    //date_human_today: moment(d).text("hello")
                }


                dates.push(date);
            }
            console.log(dates);
            console.log("heroppe ovenover")
            dataSet.dates = dates;

        }


//    var dataSetToday = dataSet[0];               //todays date in our array
//    var val_to_replace = ",";                    //this is what has to be replaced
//    var replace_with = "--";                     //this is what shall be there instead
//            $.each(dataSetToday, function(key, val){
//                dataSetToday[key] = val.replace(val_to_replace, replace_with);
//          }
//        console.log(dataSetToday);


        function init() {
            generateDaterange();
            buildDaterange();
        }


        init();

        function buildDaterange() {

            console.log('build')

            $.each(dataSet.dates, function (k, v) {

                var title =  String(v.date_human).substr(0, 1);

                if(dateIsToday(new Date(), v.date))
                    title = 'I DAG';


                $('.cal_header thead th').eq(k).text(title)
                $('.cal_header tbody td p').eq(k).text(v.date_humanDays)


            })

        }
        var startweek = moment().startOf('isoWeek');
        var endweek = moment().endOf('isoWeek');

        console.log("herunder er slut for ugen");
        console.log(endweek);

        function dateIsToday(date_a, date_b){

            return (
                    date_a.getDate() == date_b.getDate() &&
                    date_a.getMonth() == date_b.getMonth() &&
                    date_a.getFullYear() == date_b.getFullYear()

            )
        }

        function thisWeek(date_c, date_d){

        }


    });


</script>
<div class="create_form">

</div>

<div id="wrapper">

    <div id="header_for_cal">
        <div id="back_btn"><p><span> < </span>Tilbage</p></div>
        <div id="cal_header_title"><h3>Kalender</h3></div>
        <div><p>+</p></div>
        <div class="clear"></div>
    </div>

    <div class="contentForDate">
        <div class="dateHeader">
            <img src="images/content/header.jpg">
        </div>
        <div class="date_content">
            <div>
                <h3>Svømmehal</h3>
                <p>Aarup Svømmehal</p>
            </div>
            <div>
                <p>Tirsdag, 13 Juni, 2016</p>
                <p>10:00 - 12:00</p>
            </div>
            <div>
                <p>
                    ge Lorem Ipsum er, at teksten indeholder mere
                    eller mindre almindelig tekstopbygning
                    i modsætning til "Tekst her – og mere tekst her", mens det samtidigt ligner almindelig tekst.
                    Mange layoutprogrammer og we
                </p>
            </div>
        </div>
    </div>

</div>
<div class="cal_header">
    <div id="left_arrow">
        <p> < </p>
    </div>
    <div class="calendar">
        <table>
            <thead>
            <tr>
                <th></th>
                <th></th>
                <th></th>
                <th></th>
                <th></th>
                <th></th>
                <th></th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td><p></p></td>
                <td><p></p></td>
                <td><p></p></td>
                <td><p></p></td>
                <td><p></p></td>
                <td><p></p></td>
                <td><p></p></td>
            </tr>
            </tbody>
        </table>
    </div>
    <div id="right_arrow">
        <p> > </p>
    </div>
</div>
<div class="activities">
    <ul id="swimming">
        <li class="activi_time">KL 09:00</li>
        <li class="activi_title">Svømmehal
            <p class="title_sub">Aarup Svømmehal</p></li>
    </ul>
    <ul>
        <li class="activi_time">KL 10:00<p class="time_sub">KL 10:30</p></li>
        <li class="activi_title">Vaske tøj</li>
    </ul>
    <ul>
        <li class="activi_time">KL 13:00</li>
        <li class="activi_title">Lav Té</li>
    </ul>
    <ul>
        <li class="activi_time">KL 22:00</li>
        <li class="activi_title">Godnat</li>
    </ul>
</div>

</div>
<div class="clear"></div>

<div id="footer">
    <ul>
        <li>
            <img src="images/icons/calendar.png">
            <p>Kalendar</p>
        </li>
        <li>
            <img src="images/icons/walkthrough.png">
            <p>Gennemgange</p>
        </li>
        <li>
            <img src="images/icons/food.png">
            <p>Mad</p>
        </li>
        <li>
            <img src="images/icons/activities.png">
            <p>Aktiviteter</p>
        </li>
        <li>
            <img src="images/icons/more.png">
            <p>Mere</p>
        </li>
    </ul>
</div>
</body>
</html>

HERE＆＃39> CSS 

*{
    margin:0;
    padding:0;
    font-family:helvetica, arial, sans-serif;
}
body{
    background-color:lightgrey;
}
.clear{
    clear:both;
}
#wrapper{
    overflow:hidden;
    max-width:100%;
}
.contentForDate{
    width:100%;
    max-width:100%;
    position:absolute;
    background-color:white;
    right:-100%;
    z-index:9999;
}
.date_content{
    padding:0px 10px;
}
.contentForDate .dateHeader img{
    min-width:100%;
    max-width:100%;
}

.contentForDate div{
    max-width:100%;
    margin-bottom:20px;
}

.contentForcccDate div:nth-of-type(2){
    display:flex;
    justify-content: space-between;
}
.contentForDate div:nth-of-type(2) p{
    max-width:100%;
    color:grey;
    font-size:14px;
}
.contentForDate div:nth-of-type(3) p{
    color:grey;
    margin-top:7px;
    max-width:90%;
}
.cal_header{
    width:100%;
    min-height: 10px;
    background-color: #efeff4;
    display:flex;
    justify-content:space-between;
    position:relative;
    overflow:hidden;
}

.activities ul{
    background-color:white;
    list-style:none;
    border-bottom:2px solid lightgrey;
    z-index:8;
}
.activities ul li{
display:inline-block;
    font-size:15px;
    position:relative;
}
.activities ul li:first-of-type{
    margin-left:35px;
    padding:10px 10px 25px 0px;
    border-right:2px solid #0273b2;
    z-index:99;
}
.activities ul li p{
font-size:12px;
    position:absolute;
    width:100px;
}

.timerange li{
    display:block ;
    float:left;
}

table {
    width: 100%;
    border-collapse: collapse;
    border:none;

}
/* Zebra striping */
tr:nth-of-type(odd) {

}
th {
    background-color: #f6f6f6;
    padding:12px;
    text-transform: uppercase;
    font-weight:lighter;
}
tbody tr{
    border-top:1px solid grey;
}
td{
    width:20px;
}
td {
    padding: 6px;
    text-align: center;
    font-weight: lighter;
    font-size:14px;
}
td.currentDay{
    color:gray;
}
td p{
    padding:7px;
    width:20px;
    margin:0 auto;
}
p#selectedDate{
    background-color: #0273b2;
    color:white;
    border-radius: 50%;
}

.calendar{
    width: 100%;
}

#left_arrow, #right_arrow{
    width:40px;
    background-color:darkgrey;
    position:relative;
}
#left_arrow p, #right_arrow p{
    position:absolute;
    top: 35%;
    left: 40%;
    color:white;
    font-weight:lighter;
}

#header_for_cal{
    display:flex;
    width:100%;
    background-color:#0273b2;
    color:white;
    font-weight:lighter;
    padding:20px 0;
    z-index:99999;
}
#header_for_cal h3{
    font-weight:lighter;
    display:inline-block;
    font-size:21px;
}
#cal_header_title{
    flex-grow: 1;
}

#cal_header_title {
    text-align:right;
}

#header_for_cal div:nth-of-type(2){
    flex-grow:1;
}

#header_for_cal div:nth-of-type(3){
    flex-grow: 1;
}
#header_for_cal div:nth-of-type(3) p{
    float:right;
}

#header_for_cal p{
    display:inline-block;
    font-weight:lighter;
    font-size:17px;
}

#swimming{
    cursor:pointer;
}

#footer{
    width:100%;
    position:absolute;
    bottom:0;
    background-color:white;
    border-top:2px solid grey;
}

#footer ul{
    text-align:center;
}
#footer ul li{
    display: inline-block;

    padding:7px 10px;
    margin:0px 4px;
    color:#0273b2;
}
#footer ul li img{
    max-width:35px;
}

HERE＆＃39;一些动画片的观念代码（在这个时刻并不重要） 

$(document).ready(function() {

    $(".contentForDate").hide();

$(".cal_header p").click(function(e){

    $('.cal_header p#selectedDate').removeAttr('id');

    if($(e.target).is('.cal_header td p')){
        $(this).attr('id', 'selectedDate');

    }

    });

    $("#back_btn").hide();
    $("#swimming").click(function(){


        if ( $(".contentForDate" ).is( ":hidden")) {
            $(".contentForDate").show(200);
            var left = $('.contentForDate').offset().left;

            $(".contentForDate").css({left:left}).animate({"left":"0%"}, "fast");
                 $("#back_btn").show();
        }
    });

    $("#back_btn").click(function(){

        if($(".contentForDate").css("display", "block")){
            $(".contentForDate" ).hide(200);
            $("#back_btn").hide();
        }


    });

});

希望你能帮助我，我已经没有想法去做什么了，我已经尝试在这里搜索它，但似乎没有任何效果。所以这里什么都没有：）

0 个答案:

没有答案
相关问题
最新问题