想要在 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>
你能帮我解决以下问题吗:
- 浏览年份(< 2016 >)。
- 突出显示当前月份。
- 在每个日期下方添加一些信息(例如:100 美元)。
最佳答案
将您的 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 帐户。
关于javascript - Angularjs:想要在其各自的 "1st date"单元格上启动 "weekday",我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36092077/