角度カレンダーロジック号（+ Plunkerヘルプ）

私は一つだけのセルがテーブルから一度に選択できるカレンダーのロジックにいくつかの助けを得るためにしようとしてきたが、ここPlunker：http://plnkr.co/edit/F0MIoZIQ3pkhuDgcH2wo?p=infoはしていないようです働いている。アドバイスは非常に高く評価されます - 私はこの方法に長続きしてきました！角度カレンダーロジック号（+ Plunkerヘルプ）

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

出典

2016-06-16 MoSheikh

フィダルを作成すると簡単に修正できます –

@gayathri https://jsfiddle.net/o6ovp6qy/ – MoSheikh

こんにちは私は今だけ1日は

を選択することができますクリックし内側条件たら追加フィドルをチェック

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="[email protected]" 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>

と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, '', '', '', ''], 
       ['', '', '', '', '', '', ''] 
       ]; 

     } 
});

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

参照用https://plnkr.co/edit/zGuDSuqdRiYsWB2ZKlgO?p=preview

ここにあなたのCSSを入れて

出典

2016-06-16 04:01:19

ありがとうございました！この場合、私のロジックがうまくいかなかった理由を説明してもらえますか？ – MoSheikh

こんにちはのみ添加（X = 0; X <$ scope.isChanged.lengthあり; x ++）{ \t \t \t \t \t IF（X == ID） \t \t \t \t \t { \t \t \t \t \t \t $ scope.isChanged [x] = true; \t \t \t \t \t \t \t $ scope.isChanged [x] = true; \t \t \t \t \t} \t \t \t \t他\t \t \t \t \t \t { \t \t \t \t \t \t $ scope.isChanged [X] =偽。 \t \t \t \t \t \t \t $ scope.isChanged [x] = false; \t \t \t \t \t} iは角度ライブラリが欠落しているとonclickのIDがアレイ内部一致する場合、私は追加のロジックは、次に私は –

ハッピーコーディング@MoSheikhを除去し、残りのクラスを追加変更 –

角度カレンダーロジック号（+ Plunkerヘルプ）

答えて

関連する問題