仿facebook选时间段

中间参杂着php代码, 可以用js代替.(PHP代码用于生成格子, 核心代码为javescript)

 

<style>
    .timeClass{
        display: flex;
        justify-content: flex-start;
        margin: 0 auto;
    }
    .timeClass li{
        width: 18px;
        height: 30px;
        line-height: normal;
        margin-left: 1px;
        background: #eaf4fe;
        list-style: none;
    }
    .dateClass{
        font-size: 12px;
        margin: 0 auto;
        margin-top:3px;
        display: flex;
        justify-content: left;
    }
    .selected{
        background-color: #9cd6e5 !important;
    }
    .timeFlugClass{
        display: flex;
        justify-content: flex-start;
        margin: 0 auto;
        font-size: 12px;
    }
    .timeFlugClass li{
        width: 18px;
        line-height: normal;
        margin-left: 1px;
        list-style: none;
    }
    .allDayClass{
        display: flex;
        justify-content: flex-start;
        margin: 0 auto;
        font-size: 12px;
    }
    .allDayClass li{
        width: 16.7px;
        height: 30px;
        line-height: normal;
        margin-left: 1px;
        background: #fff;
        list-style: none;
        border: 1px solid #ddd;
    }
</style>
<script src="/vendor/laravel-admin/AdminLTE/plugins/jQuery/jQuery-2.1.4.min.js"></script>
<div class="dateClass">
    <div style="width: 80px;text-align: right;"> </div>
    <div style="width: 70%;">
        <ul class="timeFlugClass">
            <li>12am</li>
            <li></li>
            <li></li>
            <li>3am</li>
            <li></li>
            <li></li>
            <li>6am</li>
            <li></li>
            <li></li>
            <li>9am</li>
            <li></li>
            <li></li>
            <li>12pm</li>
            <li></li>
            <li></li>
            <li>3pm</li>
            <li></li>
            <li></li>
            <li>6pm</li>
            <li></li>
            <li></li>
            <li>9pm</li>
        </ul>
    </div>
</div>
    <?PHP
        $dateName = ['Monday','Tuesday','Wednesday','Thursday','Friday','Saturday','Sunday'];
        $allDay = null;
        for($y=0;$y<7;$y++){
    ?>

    <div class="dateClass">
        <div style="width: 80px;display: flex; justify-content: flex-end;">
                <span style="font-size: 12px;float: left;"><?=$dateName[$y]?></span>
        </div>
        <div style="width: 70%;">
            <ul class="timeClass">
                <?PHP
                for($i=0;$i<24;$i++){
                    $style = '';
                    if(($i+1)%3==0){
                        $style=' style="border-right:1px solid #898989"';
                    }
                    if($i<=23 && $y==0){
                        $allDay .="<li class='allDay allDay-{$i}' data-x='{$i}' ></li>";
                    }
                    echo "<li class='{$i}-{$y}' data-x='{$i}' data-y='{$y}' $style></li>";
                }
                ?>
            </ul>
        </div>
    </div>
    <?PHP } ?>
</div>

<div class="dateClass">
    <div style="width: 80px;text-align: right;">Every Day</div>
    <div style="width: 70%;">
        <ul class="allDayClass">
           <?=$allDay?>
        </ul>
    </div>
</div>

<script>
    $(function(){
        let isMove = false;
        let isDeleteClass = false;
        let isAllDay = false;

        let startX=null;
        let startY=null;

        let endX= null
        let endY=null

        ////除去选择文字的bug
        $(document).bind("selectstart",function(){return false;});


        $(document).on('mouseup',function () {
            console.log('Up');
            isMove = false;
            isDeleteClass = false;
            isAllDay = false;
            startX = null;
            startY = null;
            return false;
        })
        $('ul li').on('mousedown',function () {


            isMove = true;
            if($(this).hasClass('selected')){
                isDeleteClass = true;
                $(this).removeClass('selected');
            }else{
                $(this).addClass('selected');
            }
            isAllDay = false;

            if($(this).hasClass('allDay')){
                isAllDay = true;
            }

            if(isAllDay){
                var allDayX = $(this).data('x');
                for(var vy=0;vy<=6;vy++){
                    if(!isDeleteClass){
                        $('.'+allDayX+'-'+vy).addClass('selected');
                    }else{
                        $('.'+allDayX+'-'+vy).removeClass('selected')
                    }
                    // console.log('.'+allDayX+'-'+vy);
                }


                $('ul li').on('mouseover',function () {
                    if($(this).hasClass('allDay')){
                        isAllDay = true;
                    }
                    if(isMove && isAllDay){
                        if(!isDeleteClass){
                            $(this).addClass('selected');
                        }else{
                            $(this).removeClass('selected')
                        }

                        var allDayEndX = $(this).data('x');
                        for(var vy=0;vy<=6;vy++){
                            if(!isDeleteClass){
                                $('.'+allDayEndX+'-'+vy).addClass('selected');
                            }else{
                                $('.'+allDayEndX+'-'+vy).removeClass('selected')
                            }
                            // console.log('.'+allDayX+'-'+vy);
                        }
                    }
                })

                // return false;
            }else{
                startX = $(this).data('x');
                startY = $(this).data('y');
                // console.log('startX:'+startX+', startY:'+startY)


                $('ul li').on('mouseover',function () {
                    console.log(isMove);

                    if($(this).hasClass('allDay')){
                        isAllDay = true;
                    }

                    if(isMove){
                        var endX = $(this).data('x');
                        var endY = $(this).data('y');
                        // console.log(endX+','+endY);
                        // console.log('Over');

                        //计算矩形
                        if(endY!=startY){
                            //获得行数
                            var rY = parseInt(endY)-parseInt(startY)
                            console.log('endY:'+endY+' startY:'+startY+' rY:'+rY)
                            //获取endX
                            var rX = parseInt(endX)
                            //循环获取矩阵内的所有点
                            if(rY>=0){
                                for(var vY=0;vY<=rY;vY++){

                                    var viY =startY+vY;
                                    console.log('startX:'+startX+' startY:'+startY)
                                    for(var vi=startX;vi<=rX;vi++){

                                        var isAllDayY = false;
                                        if(!isDeleteClass){
                                            $('.'+vi+'-'+viY).addClass('selected');
                                        }else{
                                            $('.'+vi+'-'+viY).removeClass('selected')
                                        }


                                        for(var viallY=0;viallY<7;viallY++){
                                            var isAllDayY = false;
                                            //判断是否已选择了全天
                                            if($('.'+vi+'-'+viallY).hasClass('selected')){
                                                isAllDayY = true;
                                            }else{
                                                break;
                                            }
                                            // console.log('viallY: '+viallY+'allDay-'+vi+' isTrue:'+isAllDayY);
                                        }
                                        if(isAllDayY){
                                            $('.allDay-'+vi).addClass('selected');
                                        }else{
                                            $('.allDay-'+vi).removeClass('selected');
                                        }

                                        console.log('.'+vi+'-'+viY);
                                    }
                                }
                            }



                        }
                        //起点记录x
                        //终点记录X,Y
                        if(!isDeleteClass){
                            $(this).addClass('selected');
                        }else{
                            $(this).removeClass('selected')
                        }



                        var upX = $(this).data('x');

                        console.log('upX: '+upX+' endX:'+endX);
                        for(var viallY=0;viallY<7;viallY++){
                            var isAllDayY = false;
                            //判断是否已选择了全天
                            if($('.'+upX+'-'+viallY).hasClass('selected')){
                                isAllDayY = true;
                            }else{
                                break;
                            }
                            // console.log('viallY:'+viallY+' allDay-'+upX+' isTrue:'+isAllDayY);
                        }
                        if(isAllDayY){
                            $('.allDay-'+upX).addClass('selected');
                        }else{
                            $('.allDay-'+upX).removeClass('selected');
                        }

                    }
                })
            }

            var upX = $(this).data('x');
            for(var viallY=0;viallY<7;viallY++){
                var isAllDayY = false;
                //判断是否已选择了全天
                if($('.'+upX+'-'+viallY).hasClass('selected')){
                    isAllDayY = true;
                }else{
                    break;
                }
                // console.log('viallY: '+viallY+'allDay-'+upX+' isTrue:'+isAllDayY);
            }
            if(isAllDayY){
                $('.allDay-'+upX).addClass('selected');
            }else{
                $('.allDay-'+upX).removeClass('selected');
            }

        });
        // $(document).mousedown(function(){
        //     console.log('mouse down!');
        // });
        // $(document).onmouseup
        // $(document).on('mouseDown',function(){
        // $('ul li').onmouseover

        // });

    })
</script>