Angularjs:想要在其各自的“工作日”单元格上开始“第一个约会”
Angularjs: Want to start "1st date" on its respective "weekday" cell
想要在AngularJS中各自的"工作日"单元格上开始"第一个日期"。
你好。我正在使用AngularJS创建自定义日历和日期选择器。面临一些挑战。
HTML,CSS和Angular Controller and Script如下
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 美元)。
将脚本.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 }" 将单元格设置为不同的背景颜色(如果是今天的日期)。
在脚本中.js进行以下更改:
在控制器的开头:
// 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 帐户。
相关文章:
- 使用jquery在单击时在单元格中输入值
- CSS-若窗口太小,滚动条会出现在“表格”单元格上
- 可以'我不明白为什么;t将行和单元格添加到表中
- 如何在Angular中的表的所有单元格中添加链接
- 表中单元格的总和
- ExtJS网格单元格编辑器,防止焦点松动问题
- 有没有一种方法可以仅使用HTML/CSS来隐藏基于特定值的数据单元格
- 区分电子表格中的空单元格和0值
- ui网格将单元格显示为选择标记
- 单元格的工具提示或标题不显示超过2000个字符
- ui网格日期单元格过滤器,过滤日期格式导致显示错误的日期
- 允许表单元格内容水平展开
- 如何将jQuery/AAJAX结果放入表格单元格
- 使用jQuery只返回选中复选框后的第一个表单元格值
- jQuery-通过AJAX调用动态添加具有值的表单元格
- 需要将单元格值复制到html表中的其他单元格中
- 从Javascript中选定的行中获取特定单元格的值
- 使用JavaScript获取Gridview单元格值
- jQuery如何获取td单元格值
- Angularjs:想要在其各自的“工作日”单元格上开始“第一个约会”