基于angular.js的全年日历作物操作甘特图

最新推荐文章于 2025-06-30 09:07:02 发布

原创

最新推荐文章于 2025-06-30 09:07:02 发布 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#angular.js #全年日历 #甘特图 #作物操作记录

本文介绍了一种使用Angular.js构建的全年日历甘特图，用于展示作物操作记录。通过提供的HTML结构和JavaScript代码示例，展示了如何配置并测试这个功能。最终呈现的效果图直观地显示了各个操作的时间分布。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

话不多说，直接上代码，css代码：

body,html{
    height: 100%;
}
body, div, ul, li, ol {
     margin: 0;
     padding: 0;
     border: none;
}
ul, ol {
     list-style: none;
}
.ntt_calendar_box{
    position: relative;
    width: 1400px;
    margin: 0 auto;
    border-bottom: 1px solid #fff;
    border-right: 1px solid #fff;
    
}
.ntt_calendar_box ul{
    -webkit-display: flex;
    -ms-display: flex;
    display: flex;
    width: 100%;
}
.ntt_calendar_box ul li{
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    color: #fff;
    height: 26px;
    line-height: 26px;
    border-left: 1px solid #fff;
    border-top: 1px solid #fff;
    box-sizing: border-box;
}
#main{
    height: 100%;
    padding-top: 100px;
    background: #010f4f;
}
.ntt_op{
    height:25px;
    line-height: 25px;
    position: absolute;
    color: #fff;
    background: rgba(3, 133, 79, 1);
    text-indent: 4px;
    box-sizing: border-box;
    border-left: 1px solid #fff;
}
.ntt_op:hover,.ntt_op:hover + .ntt_op{
    z-index: 2;
    background: #037d00;
}
.ntt_ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.text_left {
    text-align: left!important;
}
.text_center {
    text-align: center!important;
}

html结构

<div ng-app="myApp" id="main" class="ntt_login" ng-app="tyApp" ng-controller="loginControl"> <div class="ntt_calendar_box"> <ul class="clearfix"> <li class="float_l text_center"></li> <li class="float_l text_center" ng-repeat="d in days track