stackoom
  简体   繁体   中英

Angular Calendar Logic Issue (+Plunker Help)

 原文  2016-06-16 01:55:58  7   1    javascript/ angularjs

Question

I've been trying to get some help on the calendar logic so only one cell can be selected at a time from the table, but the Plunker here: http://plnkr.co/edit/F0MIoZIQ3pkhuDgcH2wo?p=info doesn't seem to be working. Advice would be much appreciated - I've been stuck on this for way too long!

JS: 

var app = angular.module('bookerApp', []);

app.controller('BookerController', ['$scope', function($scope){

    $scope.days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];

    $scope.months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];

    $scope.rows = [
        [ 1,  2,  3,  4,  5,  6,  7],
        [ 8,  9, 10, 11, 12, 13, 14],
        [15, 16, 17, 18, 19, 20, 21],
        [22, 23, 24, 25, 26, 27, 28],
        [29, 30, 31, '', '', '', ''],
        ['', '', '', '', '', '', '']
        ];

    $scope.currDate = new Date();
    $scope.daysInMonth = 0;
    $scope.currDay = 0;
    $scope.monthStart = 0;
    $scope.monthEnd = 0;
    $scope.dayStart = 0;
    $scope.dif = 0;
    $scope.times = [];
    $scope.timeDate = new Date(1970, 1, 1, 0, 0, 0, 0);

    $scope.test;
    $scope.isChanged = [];
    $scope.lastChanged = '';
    $scope.isAnyActive = false;
    $scope.rowsArray = [''];

    $scope.idCount = 0;
    $scope.idNum = [[0,0],[0,0]];


    for (x=0; x<$scope.rows.length; x++){
        $scope.idNum[x] = [];
        for (y=0; y<$scope.rows[x].length; y++) {
            $scope.idNum[x][y] = $scope.idCount;
            $scope.isChanged[$scope.idCount] = false;
            $scope.idCount += 1;

        }
    }

    $scope.checkIs = function (id) {

            if ($scope.isChanged[id] == false && $scope.isAnyActive == false) {
                $scope.isChanged[id] = true;
                $scope.isAnyActive = true;
                $scope.lastChanged = id;
            }
            else if ($scope.isChanged[id] == true && $scope.isAnyActive == true){
                $scope.isChanged[id] = false;
                $scope.isAnyActive = false;
                $scope.lastChanged = '';
            }
            else if ($scope.isChanged[id] == false && $scope.isAnyActive == true) {
                $scope.isChanged[id] = true;
                $scope.isChanged[lastChanged] = false;
            }


    }

    $scope.calLayout = function(){

        for (x=0; x<$scope.rows.length; x++){
            for(y=0; y<$scope.rows[x].length; y++){
                if ($scope.rows[x][y] == 1) {
                    $scope.dif = y - $scope.monthStart.getDay();

                }
            }
        }



        for (x=0; x<$scope.rows.length; x++){
            for(y=0; y<$scope.rows[x].length; y++){
                $scope.rows[x][y] += $scope.dif;
            }
        }


        for (x=0; x<$scope.rows.length; x++){
            for(y=0; y<$scope.rows[x].length; y++){
                if ($scope.rows[x][y] <= 0){
                    $scope.rows[x][y] = '';
                }
            }
        }

        for (x=0; x<$scope.rows.length; x++){
            for(y=0; y<$scope.rows[x].length; y++){
                    if (($scope.rows[x][y] - $scope.dif) == $scope.daysInMonth){
                        for (i = -($scope.dif); i > 0; i--){
                            if (y+i > 6) {
                                $scope.rows[x+1][y-7+i] = ($scope.rows[x][y]+i);
                            }
                            else {
                                $scope.rows[x][y+i] = ($scope.rows[x][y]+i);
                            }
                        }
                    }


            }
        }
        $scope.idCount2 = 0;
        for (x=0; x<$scope.rows.length; x++){
            for(y=0; y<$scope.rows[x].length; y++){
                $scope.rowsArray[$scope.idCount2] = $scope.rows[x][y];
                $scope.idCount2 += 1;
            }
        }
    }


    $scope.getDaysInMonth = function () {
        monthStart = new Date($scope.currDate.getFullYear(), $scope.currDate.getMonth(), 1);
        monthEnd = new Date ($scope.currDate.getFullYear(), $scope.currDate.getMonth()+1, 1);
        $scope.monthStart = monthStart;
        $scope.monthEnd = monthEnd;
        $scope.daysInMonth = (monthEnd - monthStart)/(1000*60*60*24);
        $scope.calLayout();
    }

    $scope.getMonthStartDay = function (){
        $scope.currDay = $scope.currDate.getDate();
        return $scope.monthStart.getDay();
    }

    $scope.setActive = function(num) {
        $scope.activated = num;
    }

    $scope.isActive = function(num) {
        /*Insert if statement to disallow empty cells from being selected*/; 
        return $scope.activated === num;
    }

    $scope.nextMonth = function (){
        $scope.resetRows();
        $scope.currDate = new Date ($scope.currDate.getFullYear(), $scope.currDate.getMonth()+1, $scope.currDate.getDate());
        $scope.getDaysInMonth();
        $scope.getTimeList();
    }

    $scope.lastMonth = function (){
        $scope.resetRows();
        $scope.currDate = new Date ($scope.currDate.getFullYear(), $scope.currDate.getMonth()-1, $scope.currDate.getDate());
        $scope.getDaysInMonth();
    }

    $scope.isThisMonth = function (){
        var now = new Date;
        if ($scope.currDate.getMonth() == now.getMonth() && $scope.currDate.getFullYear() == now.getFullYear()){
            return false;
        } 
        else {
            return true;
        }
    }



    $scope.rowIsNotEmpty = function () {

        for (x=0; x<$scope.rows.length; x++) {

            var rowCount = 0;

            for (y=0; y<$scope.rows.length; y++) {
                if ($scope.rows[x][y] == '') {
                    rowCount += 1;
                }
            }

            if (rowCount == rows[x].length){
                return false;
            }

        }
    }

    $scope.resetRows = function (){

        $scope.rows = [
            [ 1,  2,  3,  4,  5,  6,  7],
            [ 8,  9, 10, 11, 12, 13, 14],
            [15, 16, 17, 18, 19, 20, 21],
            [22, 23, 24, 25, 26, 27, 28],
            [29, 30, 31, '', '', '', ''],
            ['', '', '', '', '', '', '']
            ];

    }

    $scope.getTimeList = function() {


        for (i=0; i < 48; i++) {
            $scope.times[i] = ($scope.timeDate.getTime())/(60*1000);
            $scope.timeDate += (30* 60* 1000);

        }
    }


}]);

HTML: 

<!doctype html>
<html ng-app='bookerApp'>
<head>
<link rel='stylesheet' href='css/bootstrap.min.css'>
<link rel='stylesheet' href='css/styles.css'>
<script src='js/angular.min.js'></script>
<script src='js/controllers/BookerController.js'></script>
</head>
<body ng-controller='BookerController' ng-init='getDaysInMonth()'>   
<div class='cal-top'>
    {{months[currDate.getMonth()]}}<br>
    {{currDate.getFullYear()}}
</div>
<table >
    <tr class='booker-head'>
        <th ng-repeat='day in days'>{{day}}</th>
    </tr>
    <tr ng-repeat='row in rows' ng-hide='rowIsNotEmpty()'>
        <td 
            ng-repeat='num in row track by $index' id='{{idNum[$parent.$index][$index]}}' 
            ng-click='checkIs(idNum[$parent.$index][$index])' ng-class='{active: isChanged[idNum[$parent.$index][$index]] && num}' 
            ng-hide='$parent.$index != 0 && !num'>{{num}}
        </td>
    </tr>
</table>

<button type='button' ng-click='lastMonth()' ng-show='isThisMonth()'><!--ShowIf-->Last Month</button>
<button type='button' ng-click='nextMonth()'>Next Month</button>


</body>
</html>

<pre>
    id: {{idNum}}
    isChanged: {{isChanged}}
    isAnyActive: {{isAnyActive}}
    rows: {{rows}}
    rowsArray: {{rowsArray}}
    lastChanged: {{lastChanged}}

</pre>

CSS: 

table {
margin: 0 auto;
}

th {
background-color: rgb(51,102,154);
color: white;
text-align: center;
}

tr, td {
text-align: center;
border: 1px solid black;
width: 100px;
height: 70px;
}

td:hover {
background-color: rgb(51, 102, 154);
color: white;
} 

.active {
background-color: black;
color: white;
}

.cal-top {
background-color: rgb(51, 102, 154);
margin: 20px auto 0;
width: 701px;
text-align: center;
font-size: 4em;
color: white;
font-weight: 700;
border: solid 1px black;
border-bottom: none;
}

1 answers

solution1
 1 ACCPTED  2016-06-16 04:01:19

Hi check the fiddle i added once condition inside the click so now only one date can select 

for (x=0; x<$scope.isChanged.length; x++){
                      if(x == id)
                      {
                            $scope.isChanged[x] = true;
                                $scope.isChanged[x] = true;
                      }
                      else
                      {
                            $scope.isChanged[x] = false;
                                $scope.isChanged[x] = false;
                      }

        }

HTML 

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.0.x" src="https://code.angularjs.org/1.0.8/angular.js" data-semver="1.0.8"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
   <div class='cal-top'>
        {{months[currDate.getMonth()]}}<br>
        {{currDate.getFullYear()}}
    </div>
    <table >
        <tr class='booker-head'>
            <th ng-repeat='day in days'>{{day}}</th>
        </tr>
        <tr ng-repeat='row in rows' >
            <td 
                ng-repeat='num in row ' id='{{idNum[$parent.$index][$index]}}' 
                ng-click='checkIs(idNum[$parent.$index][$index])' ng-class='{active: isChanged[idNum[$parent.$index][$index]] && num}' 
                ng-hide='$parent.$index != 0 && !num'>{{num}}
            </td>
        </tr>
    </table>

    <button type='button' ng-click='lastMonth()' ng-show='isThisMonth()'><!--ShowIf-->Last Month</button>
    <button type='button' ng-click='nextMonth()'>Next Month</button>


<pre>
        id: {{idNum}}
        isChanged: {{isChanged}}
        isAnyActive: {{isAnyActive}}
        rows: {{rows}}
        rowsArray: {{rowsArray}}
        lastChanged: {{lastChanged}}
        </pre>
  </body>

</html>

and JS 

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
    $scope.days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];

        $scope.months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];

        $scope.rows = [
            [ 1,  2,  3,  4,  5,  6,  7],
            [ 8,  9, 10, 11, 12, 13, 14],
            [15, 16, 17, 18, 19, 20, 21],
            [22, 23, 24, 25, 26, 27, 28],
            [29, 30, 31, '', '', '', ''],
            ['', '', '', '', '', '', '']
            ];

        $scope.currDate = new Date();
        $scope.daysInMonth = 0;
        $scope.currDay = 0;
        $scope.monthStart = 0;
        $scope.monthEnd = 0;
        $scope.dayStart = 0;
        $scope.dif = 0;
        $scope.times = [];
        $scope.timeDate = new Date(1970, 1, 1, 0, 0, 0, 0);

        $scope.test;
        $scope.isChanged = [];
        $scope.lastChanged = '';
        $scope.isAnyActive = false;
        $scope.rowsArray = [''];

        $scope.idCount = 0;
        $scope.idNum = [[0,0],[0,0]];


        for (x=0; x<$scope.rows.length; x++){
            $scope.idNum[x] = [];
            for (y=0; y<$scope.rows[x].length; y++) {
                $scope.idNum[x][y] = $scope.idCount;
                $scope.isChanged[$scope.idCount] = false;
                $scope.idCount += 1;

            }
        }

        $scope.checkIs = function (id) {

                if ($scope.isChanged[id] == false && $scope.isAnyActive == false) {
                    $scope.isChanged[id] = true;
                    $scope.isAnyActive = true;
                }
                else if ($scope.isChanged[id] == true && $scope.isAnyActive == true){
                    $scope.isChanged[id] = false;
                    $scope.isAnyActive = false;
                }
                else if ($scope.isChanged[id] == false && $scope.isAnyActive == true) {
                    $scope.isChanged[id] = true;
                }
                else
                {
                  $scope.isChanged = false;
                }
                    for (x=0; x<$scope.isChanged.length; x++){
                      if(x == id)
                      {
                            $scope.isChanged[x] = true;
                                $scope.isChanged[x] = true;
                      }
                      else
                      {
                            $scope.isChanged[x] = false;
                                $scope.isChanged[x] = false;
                      }

        }


        }

        $scope.calLayout = function(){

            for (x=0; x<$scope.rows.length; x++){
                for(y=0; y<$scope.rows[x].length; y++){
                    if ($scope.rows[x][y] == 1) {
                        $scope.dif = y - $scope.monthStart.getDay();

                    }
                }
            }



            for (x=0; x<$scope.rows.length; x++){
                for(y=0; y<$scope.rows[x].length; y++){
                    $scope.rows[x][y] += $scope.dif;
                }
            }


            for (x=0; x<$scope.rows.length; x++){
                for(y=0; y<$scope.rows[x].length; y++){
                    if ($scope.rows[x][y] <= 0){
                        $scope.rows[x][y] = '';
                    }
                }
            }

            for (x=0; x<$scope.rows.length; x++){
                for(y=0; y<$scope.rows[x].length; y++){
                        if (($scope.rows[x][y] - $scope.dif) == $scope.daysInMonth){
                            for (i = -($scope.dif); i > 0; i--){
                                if (y+i > 6) {
                                    $scope.rows[x+1][y-7+i] = ($scope.rows[x][y]+i);
                                }
                                else {
                                    $scope.rows[x][y+i] = ($scope.rows[x][y]+i);
                                }
                            }
                        }


                }
            }
            $scope.idCount2 = 0;
            for (x=0; x<$scope.rows.length; x++){
                for(y=0; y<$scope.rows[x].length; y++){
                    $scope.rowsArray[$scope.idCount2] = $scope.rows[x][y];
                    $scope.idCount2 += 1;
                }
            }
        }


        $scope.getDaysInMonth = function () {
            monthStart = new Date($scope.currDate.getFullYear(), $scope.currDate.getMonth(), 1);
            monthEnd = new Date ($scope.currDate.getFullYear(), $scope.currDate.getMonth()+1, 1);
            $scope.monthStart = monthStart;
            $scope.monthEnd = monthEnd;
            $scope.daysInMonth = (monthEnd - monthStart)/(1000*60*60*24);
            $scope.calLayout();
        }

        $scope.getMonthStartDay = function (){
            $scope.currDay = $scope.currDate.getDate();
            return $scope.monthStart.getDay();
        }

        $scope.setActive = function(num) {
            $scope.activated = num;
        }

        $scope.isActive = function(num) {
            /*Insert if statement to disallow empty cells from being selected*/; 
            return $scope.activated === num;
        }

        $scope.nextMonth = function (){
            $scope.resetRows();
            $scope.currDate = new Date ($scope.currDate.getFullYear(), $scope.currDate.getMonth()+1, $scope.currDate.getDate());
            $scope.getDaysInMonth();
            $scope.getTimeList();
        }

        $scope.lastMonth = function (){
            $scope.resetRows();
            $scope.currDate = new Date ($scope.currDate.getFullYear(), $scope.currDate.getMonth()-1, $scope.currDate.getDate());
            $scope.getDaysInMonth();
        }

        $scope.isThisMonth = function (){
            var now = new Date;
            if ($scope.currDate.getMonth() == now.getMonth() && $scope.currDate.getFullYear() == now.getFullYear()){
                return false;
            } 
            else {
                return true;
            }
        }



        $scope.rowIsNotEmpty = function () {

            for (x=0; x<$scope.rows.length; x++) {

                var rowCount = 0;

                for (y=0; y<$scope.rows.length; y++) {
                    if ($scope.rows[x][y] == '') {
                        rowCount += 1;
                    }
                }

                if (rowCount == rows[x].length){
                    return false;
                }

            }
        }

        $scope.resetRows = function (){

            $scope.rows = [
                [ 1,  2,  3,  4,  5,  6,  7],
                [ 8,  9, 10, 11, 12, 13, 14],
                [15, 16, 17, 18, 19, 20, 21],
                [22, 23, 24, 25, 26, 27, 28],
                [29, 30, 31, '', '', '', ''],
                ['', '', '', '', '', '', '']
                ];

        }
});

and css

/* Put your css in here */ 

table {
margin: 0 auto;
}

th {
background-color: rgb(51,102,154);
color: white;
text-align: center;
}

tr, td {
text-align: center;
border: 1px solid black;
width: 100px;
height: 70px;
}

td:hover {
background-color: rgb(51, 102, 154);
color: white;
} 

.active {
background-color: black;
color: white;
}

.cal-top {
background-color: rgb(51, 102, 154);
margin: 20px auto 0;
width: 701px;
text-align: center;
font-size: 4em;
color: white;
font-weight: 700;
border: solid 1px black;
border-bottom: none;
}

for reference https://plnkr.co/edit/zGuDSuqdRiYsWB2ZKlgO?p=preview

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question Angular JS not working in plunker Angular - load version 4 beta to a plunker How to build an Angular Plunker locally primeNg Schedule (calendar) Issue loading the Calendar for Angular Problems getting Plunker running for Angular Angular UI calendar rendering issue Could you help resolve this logic issue? Gradient linear css issue (plunker attached Why does Angular 4 plunker works on Safari but not on Chrome Angular-Scroll: same as example, but not working (Plunker)
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM