好久没写博客了,今天做完了公司的行事历,决定静下来总结一下,虽然不难,但是也花了好几天时间。
简单说一下实现的功能:
1.当月的日历,按照星期排列,每星期七天,不满的留空
2.显示农历二十四节气,包括节假日
3.不同的类型显示不同的背景颜色,如补班为黄色,休假为紫色等
4.每一天都应该再对应的周次内
5.鼠标悬浮显示当天的注意事项
6.双击弹出模态框,可以修改保存注意事项
大体思路为:拿到后台的数据后,先遍历,生成一个只含有周数的数组;
然后ng-repeat生成行,再在行里ng-repeat生成列,让行的周数和列的周数相等的日期显示就可以了;再根据属性加内容和颜色;最后用$modal生成模态框,数据绑定一下;点击保存传入绑定的数据。
数据格式大致为[{date:1,color:”red”…},{}…,{}…]
下面是html代码:
<div class="row" style="font-size:12px;">
<div class="col-md-12">
<table class="table table-bordered" style="table-layout:fixed;">
<caption class="text-center" style="background:#d9edf7;font-weight:900;color:black;" >二月行事历</caption>
<thead>
<tr>
<th>Week</th>
<th>Sun</th>
<th>Mon</th>
<th>Tue</th>
<th>Wed</th>
<th>Thu</th>
<th>Fri</th>
<th>Sat</th>
</tr>
</thead>
<tbody style="text-align:center;">
<tr ng-repeat="week in layoutVm.calendarWeeks">
<td style="background:#d9edf7;">
{
{
week}}
</td>
<td style="background:{
{
item.DateColor}};padding-left:0;padding-right:0;" ng-repeat="item in layoutVm.calendarDatas"
ng-show="item.YearWeekNumber=={
{
week}}" title="{
{
item.tips}}" ng-dblclick="operate.editItem(item)">