javascript - Angularjs:想要在其各自的 "1st date"单元格上启动 "weekday"

Question

想要在 AngularJS 中相应的“工作日”单元格开始“第一次约会”。

嗨。我正在使用 AngularJS 创建自定义日历和日期选择器。面临一些挑战。

HTML, CSS and Angular Controller and Script below

angular.module('customcal', [])
  .controller('customCal', function($scope) {

    // we'll use the today object to test in the ng-class directive in html
    var d = new Date();
    $scope.today = {
      y: d.getFullYear(),
      m: d.getMonth(),
      d: d.getDate()
    };

    $scope.year = new Date().getFullYear();

    $scope.currentmonth = new Date().getMonth();

    function setSelectedDate() {
      return moment().format("Do MMM YYYY");
    }
    $scope.setSelDate = setSelectedDate();

    function getMonths() {
      return moment.monthsShort();
    }
    $scope.months = getMonths();

    function getWeeks() {
      return moment.weekdaysMin();
    }
    $scope.weeks = getWeeks();


    $scope.dateSelected = function($event, dt, month, year) {
      $scope.dtsel = 'dsel';
      $('.cc-dt').removeClass('dsel');
      angular.element(event.target).addClass('dsel');
    }

    $scope.changeDate = function(el, dt, month, year) {
      $scope.datesel = $scope.dateSelected(el, dt, month, year);
    };

    //$scope.datesel = $scope.dateSelected(null, moment().date(), moment().month(), moment().year());


    $scope.monthSelector = function($event, month, year) {

      // we'll use this to test in the ng-class also    
      $scope.month = (typeof month === 'number' ? month : $scope.months.indexOf(month));

      if ($event === null) $event = null;

      $('.cc-month').removeClass('msel');
      angular.element(event.target).addClass('msel');

      var dateCount = 1;
      var dates = [];

      // This block adds blanks to the beginning of the calendar
      // Because you send in number (2) and string ('Mar') for
      // month, we have to handle both cases. 
      var index = $scope.months.indexOf(month);

      var dayOfWeek = (new Date(year, (index === -1 ? month : index), 1)).getDay();
      while (dayOfWeek > 0) {
        dates.push(' ');
        dayOfWeek--;
      }

      var daysom = moment(year + "-" + month, "YYYY-MMM").daysInMonth();

      while (dateCount <= daysom) {
        dates.push(dateCount++);
      }

      return dates;
    };

    $scope.changeMonth = function(el, month, year) {
      $scope.daysofmonth = $scope.monthSelector(el, month, year);
    };

    $scope.daysofmonth = $scope.monthSelector(null, moment().month(), moment().year());

  });

.custom-calendar-wrapper {
  width: 100%;
  text-align: center;
  border: 1px solid #ccc;
}
.cal-wrapper {
  width: 240px;
  margin: 0 auto;
  text-align: center;
  font-size: 13px;
  font-family: arial;
}
.calender-container {
  text-align: center;
}
.cc-header {
  background: #E6E6E6;
}
.cc-year-header {
  position: relative;
}
.cc-year-header-today {
  position: absolute;
  top: 5px;
  right: 15px;
  color: #0044cc;
  font-size: 10px;
  cursor: pointer;
}
.cc-year {
  font-size: 15px;
  line-height: 16px;
  display: inline-block;
  padding: 5px 8px;
  color: #666;
}
.cc-month {
  cursor: pointer;
  padding: 3px 8px 2px 8px;
  font-size: 10px;
  text-transform: uppercase;
  color: #666;
  display: inline-block;
}
.cc-month:hover {
  background-color: #e0e0e0;
}
.cc-month.msel,
.cc-month.current-month {
  background-color: #666;
  color: #eee;
}
.cc-nav {
  display: inline-block;
  color: #666;
  cursor: pointer;
}
.cc-nav:hover {
  color: #0044cc;
}
.selected-date {
  font-size: 20px;
  color: #666;
  margin-bottom: 5px;
}
.cc-dates {
  text-align: left;
}
.cc-week {
  background: #D2D2D2;
}
.cc-week,
.cc-dates {
  list-style: none;
  padding: 0;
  margin: 0;
}
.cc-week li {
  padding: 2px 0;
}
.cc-week li,
.cc-dates li {
  display: inline-block;
  width: 33.233333px;
  text-align: center;
  border: 1px solid #ccc;
  margin: 0 0 -1px -1px;
}
.cc-dates li {
  border: 1px solid #ccc;
  height: 40px;
  white-space: pre;
}
.dsel {
  background-color: #ddd;
}
.cc-today {
  background-color: #F3B14E;
}

<link data-require="fontawesome@4.5.0" data-semver="4.5.0" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="http://momentjs.com/downloads/moment.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html lang="en" ng-app="customcal">

<head>
  <meta charset="utf-8" />
  <title>AngularJS Custom Calendar</title>
  <link data-require="fontawesome@4.5.0" data-semver="4.5.0" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.css" />
  <style>
    label {
      display: block;
    }
  </style>

</head>

<body>
  <div class="cal-wrapper">
    <div class="custom-calendar-wrapper" ng-controller="customCal">
      <div class="selected-date" ng-bind="setSelDate"></div>
      <div class="cc-header">
        <div class="cc-year-header">
          <span class="cc-nav-left cc-nav">
              <i class="fa fa-chevron-left"></i>
            </span>
          <span class="cc-year" ng-bind="year"></span>
          <span class="cc-nav-right cc-nav">
              <i class="fa fa-chevron-right"></i>
            </span>
          <span class="cc-year-header-today">Today</span>
        </div>
        <div class="cc-month-header">
          <span class="cc-month" ng-class="{ 'msel' : month == today.m }" ng-repeat="month in months track by $index" ng-bind="month" ng-click="changeMonth(this, month, year);"></span>
        </div>
      </div>
      <ul class="cc-week">
        <li ng-repeat="week in weeks" ng-bind="week"></li>
      </ul>
      <ul class="cc-dates">
        <li class="cc-dt" ng-class="{ 'cc-today' : dt == today.d && month == today.m && year == today.y }" ng-click="changeDate(this, dt, month, year);" ng-repeat="dt in daysofmonth track by $index" ng-bind="dt"></li>
      </ul>
    </div>
  </div>
</body>

</html>

你能帮我解决以下问题吗:

1. 浏览年份(< 2016 >)。
2. 突出显示当前月份。
3. 在每个日期下方添加一些信息(例如:100 美元)。

Answer 1

将您的 script.js 更改为:

$scope.monthSelector = function($event, month, year) {

    if($event === null) $event = null;

    $('.cc-month').removeClass('msel');
    angular.element(event.target).addClass('msel');

    var dateCount = 1;
    var dates = [];

    // This block adds blanks to the beginning of the calendar
    // Because you send in number (2) and string ('Mar') for
    // month, we have to handle both cases. 
    var index = $scope.months.indexOf(month);
    var dayOfWeek = (new Date(year, (index === -1 ? month : index), 1)).getDay();
    while(dayOfWeek > 0) {
      dates.push(' ');
      dayOfWeek--;
    }

    var daysom = moment(year+"-"+month, "YYYY-MMM").daysInMonth();

    while (dateCount <= daysom) {
        dates.push(dateCount++);
    }

    return dates;
};

在 css 中，改变这个:

.cc-dates li {
    border: 1px solid #ccc;
    height: 40px;
    white-space: pre; // <<<< this is the only change in css
}

更新:更新答案以显示突出显示今天日期的代码

在 css 中添加:

.cc-today {
  background-color: #F3B14E;
}

在 html 中更改为:

我们正在使用 ng-class="{ 'cc-today' : dt == today.d && month == today.m && year == today.y }" 来设置如果是今天的日期，则将单元格设置为不同的背景颜色。

在 script.js 中进行以下更改:

在 Controller 的开头:

// we'll use the today object to test in the ng-class directive in html
var d = new Date();
$scope.today = {
  y: d.getFullYear(),
  m: d.getMonth(),
  d: d.getDate()
};

// use this instead of assigning to 2016,
// it works no matter which year we run this code
$scope.year = new Date().getFullYear();

在 $scope.monthSelector 函数中添加这个，不管在哪里:

// we'll use this to test in the ng-class also    
$scope.month = (typeof month === 'number' ? month : $scope.months.indexOf(month));

对于所有的编辑，我深表歉意，但我没有 plunker 帐户。