基于h5的Fullcalendar

最新推荐文章于 2022-07-01 16:29:52 发布

一期一会AI

最新推荐文章于 2022-07-01 16:29:52 发布

阅读量4.3k

点赞数 3

分类专栏： h5 文章标签： h5 fullcalendar web h5课表

本文链接：https://blog.csdn.net/rt940910a/article/details/79225557

版权

h5 专栏收录该内容

0 篇文章 1 订阅

订阅专栏

文章不怎么会排版,见谅.不多说,上干货.

效果图:

studentCalendar.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8"/>
    <title>学生端课表</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <link th:href="@{/website/app/style.css}" rel="stylesheet"/>
    <style>
        .container
    </style>
</head>
<body>
<div class="container">
    <div class="row">
        <div class="widget widget-nopad">
            <div class="widget-header">
            </div>
            <div class="widget-content">
                <div id='calendar'>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- Le javascript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script type="text/javascript" th:src="@{/website/app/jquery-1.7.2.min.js}"></script>
<script type="text/javascript" th:src="@{/website/app/fullcalendar.min.js}"></script>
<script th:inline="javascript">
    var studentId = [[${studentId}]];
    var version = [[${version}]];
    var type = [[${type}]];
    $(document).ready(function () {
        $('#calendar').fullCalendar({
            aspectRatio: 0.7,
//            contentHeight: 500,
            header: {
                left: 'prev,next today',
                center: 'title',
                right: 'agendaWeek'
            },
            monthNames: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
            monthNamesShort: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
            dayNames: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
            dayNamesShort: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
            today: ["今天"],
            firstDay: 1,
            buttonText: {
                today: '今天',
                month: '月',
                week: '周',
                day: '日',
                prev: '上一月',
                next: '下一月'
            },
            defaultView: 'agendaWeek',//默认显示周
//                    weekMode:'variable',
//                    theme: true,
            editable: false,//日历项拖拽
            allDaySlot: false,//不显示全天
            events: function (start, end, callback) {
                var events = [];
                $.ajax({
                    'url': 'studentList',
                    'data': {studentId: studentId,version:version,type:type},
                    'dataType': 'json',
                    'type': 'post',
                    'success': function (doc) {
                        $.each(doc.data, function (a, b) {
//                            console.log(doc.data)
                            var title = b.courseName;
                            var start = new Date(b.start);
                            var end = new Date(b.end);
                            events.push({
                                id: b.id,
                                title: title,
                                start: start,
                                scheduleId: b.scheduleId,
                                end: end,
                                allDay: false
                            });
                        });
                        callback(events);
                    }
                });
            },
            eventClick: function (event) {
                $.ajax({
                    'url': 'studentDetails',
                    'data': {id: event.id, scheduleId: event.scheduleId},
                    'dataType': 'json',
                    'type': 'post',
                    'success': function (doc) {
                        console.log(doc.data);
                        alert("课程名称: "+doc.data.courseName+"\n"+"班级名称: "+doc.data.clazzName+"\n"+"老师名称: "+doc.data.teacherName+"\n"+"课程简介: "+doc.data.introduction+"\n"+"开始时间: "+doc.data.start+"\n"+"结束时间: "+doc.data.end);
                    }
                });
            }

//             events: [
//                        {
//                            title: 'Meeting',
//                            start: new Date(y, m, d, 10, 30),
//                            allDay: false
//                        },
//                        {
//                            title: 'Lunch',
//                            start: new Date(y, m, d, 12, 0),
//                            end: new Date(y, m, d, 14, 0),
//                            allDay: false
//                        },
//                        {
//                            title: 'Birthday Party',
//                            start: new Date(y, m, d+1, 19, 0),
//                            end: new Date(y, m, d+1, 22, 30),
//                            allDay: false
//                        }
//             ]
        });
    });
</script>
<!-- /Calendar -->
</body>

</html>

style.css

/*------------------------------------------------------------------
Bootstrap Admin Template 
------------------------------------------------------------------*/



/*------------------------------------------------------------------
[1. Global]
*/

body {
   background: #f9f6f1;
   font: 13px/1.7em 'Open Sans';
}
    
p { 
   font: 13px/1.7em 'Open Sans';  
}
    
input,
button,
select,
textarea {
  font-family: 'Open Sans';
}

.dropdown .dropdown-menu {
   -webkit-border-radius: 6px;
   -moz-border-radius: 6px;
   border-radius: 6px;
}

.btn-icon-only {
   padding-right: 3px;
   padding-left: 3px;
}

.table td {
   vertical-align: middle;
}

.table-bordered th {
   background: #E9E9E9;
   background:-moz-linear-gradient(top, #FAFAFA 0%, #E9E9E9 100%); /* FF3.6+ */
   background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#FAFAFA), color-stop(100%,#E9E9E9)); /* Chrome,Safari4+ */
   background:-webkit-linear-gradient(top, #FAFAFA 0%,#E9E9E9 100%); /* Chrome10+,Safari5.1+ */
   background:-o-linear-gradient(top, #FAFAFA 0%,#E9E9E9 100%); /* Opera11.10+ */
   background:-ms-linear-gradient(top, #FAFAFA 0%,#E9E9E9 100%); /* IE10+ */
   background:linear-gradient(top, #FAFAFA 0%,#E9E9E9 100%); /* W3C */
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FAFAFA', endColorstr='#E9E9E9');
   -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#FAFAFA', endColorstr='#E9E9E9')";
   
   font-size: 10px;
   color: #444;
   text-transform: uppercase;
}







/*------------------------------------------------------------------
[2. Navbar / .navbar]
*/

.navbar .container {
   position: relative;
}

.navbar-inner {
   padding: 7px 0;
   
   background: #00ba8b !important;
   
   -moz-border-radius: 0;
   -webkit-border-radius: 0;
   border-radius: 0;
}

.navbar-fixed-top {
   position: static;
}

.navbar .nav a {
   font-size: 11px;
}
.navbar .nav>li>a { color:#fff !important;}
.navbar .brand {
   font-weight: 600;
   position: relative;
   top: 2px;
}

.navbar .search-query {
   background-color: #444;
   width: 150px;
   font-size: 11px;
   font-weight: bold;
}

.navbar .search-query::-webkit-input-placeholder {
    color: #666;
}

.navbar .search-query:-moz-placeholder {
    color: #666;
}

.navbar-search .search-query { background:#008866; border:0; color:#fff; line-height:normal;}

.copyrights{
   text-indent:-9999px;
   height:0;
   line-height:0;
   font-size:0;
   overflow:hidden;
}
/*------------------------------------------------------------------
[3. Subnavbar / .subnavbar]
*/

.subnavbar {
       margin-bottom: 2.5em;
    }
    
.subnavbar-inner {
   height: 60px;
   background: #fff;
   border-bottom: 1px solid #d6d6d6;
}

.subnavbar .container > ul {
   display: inline-block;
   
   height: 80px;
   padding: 0;
   margin: 0;
   
}

.subnavbar .container > ul > li {
   float: left;
   
   min-width: 90px;
   height: 60px;
   padding: 0;
   margin: 0;
   
   text-align: center;
   list-style: none;
   
   border-left: 1px solid #d9d9d9;
   
   
}

.subnavbar .container > ul > li > a {
   display: block;
   
   height: 100%;
   padding: 0 15px;
   
   font-size: 12px;
   font-weight: bold;
   color: #b2afaa;
}

.subnavbar .container > ul > li > a:hover {
   color: #888;
   text-decoration: none;
}

.subnavbar .container > ul > li > a > i {
   display: inline-block;
   
   width: 24px;
   height: 24px;
   margin-top: 11px;
   margin-bottom: -3px;
   font-size: 20px;
}

.subnavbar .container > ul > li > a > span {
   display: block;
   
}


.subnavbar .container > ul > li.active > a {
   
   border-bottom:3px solid #ff7f74;
   color: #383838;
}
    

.subnavbar .dropdown .dropdown-menu a {
   font-size: 12px;
}

    
.subnavbar .dropdown .dropdown-menu {
       text-align: left;
       
      -webkit-border-top-left-radius: 0;
      -webkit-border-top-right-radius: 0;
      -moz-border-radius-topleft: 0;
      -moz-border-radius-topright: 0;
      border-top-left-radius: 0;
      border-top-right-radius: 0;
    }
    
    
    
.subnavbar .dropdown-menu::before {
   content: '';
   display: inline-block;
   border-left: 7px solid transparent;
   border-right: 7px solid transparent;
   border-bottom: 7px solid #CCC;
   border-bottom-color: rgba(0, 0, 0, 0.2);
   position: absolute;
   top: -7px;
   left: 9px;
}

.subnavbar .dropdown-menu::after {
   content: '';
   display: inline-block;
   border-left: 6px solid transparent;
   border-right: 6px solid transparent;
   border-bottom: 6px solid white;
   position: absolute;
   top: -6px;
   left: 10px;
}


.subnavbar .caret {
   margin-top: 4px;
   
   border-top-color: white;
   border-bottom-color: white;
}

.subnavbar .dropdown.open .caret {
   display: none;
}





/*------------------------------------------------------------------
[4. Main / .main]
*/

.main {
   padding-bottom: 2em;
   
   border-bottom: 1px solid #000;
}



/*------------------------------------------------------------------
[5. Extra / .extra]
*/

.extra {

   border-top: 1px solid #585858;
   border-bottom: 1px solid #000;

}

.extra-inner {
   padding: 20px 0;
   
   font-size: 11px;
   color: #BBB;
   
   background: #1A1A1A;
}

.extra a {
   color: #666;
}

.extra h4 {
   margin-bottom: 1em;
   
   font-weight: 400;
}

.extra ul {
   padding: 0;
   margin: 0;
}

.extra li {
   margin-bottom: .6em;
   
   list-style: none;
}




/*------------------------------------------------------------------
[6. Footer/ .footer]
*/

.footer {
   margin-top: 0;
   
   border-top: 1px solid #292929;
}

.footer-inner {
   padding: 15px 0;
   
   font-size: 12px;
   background: #111;
   color: #999;
}

.footer a {
   color: #999;
}

.footer a:hover {
   color: #FFF;
   text-decoration: none;
}


/*------------------------------------------------------------------
[6. Widget / .widget]
*/

.widget {
   
   position: relative;
   clear: both;
   
   width: auto;
   
   margin-bottom: 2em;
      
   overflow: hidden;
}
   
.widget-header {
   
   position: relative;
   
   height: 40px;
   line-height: 40px;
   
   background: #f9f6f1;
   background:-moz-linear-gradient(top, #f9f6f1 0%, #f2efea 100%); /* FF3.6+ */
   background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#f9f6f1), color-stop(100%,#f2efea)); /* Chrome,Safari4+ */
   background:-webkit-linear-gradient(top, #f9f6f1 0%,#f2efea 100%); /* Chrome10+,Safari5.1+ */
   background:-o-linear-gradient(top, #f9f6f1 0%,#f2efea 100%); /* Opera11.10+ */
   background:-ms-linear-gradient(top, #f9f6f1 0%,#f2efea 100%); /* IE10+ */
   background:linear-gradient(top, #f9f6f1 0%,#f2efea 100%); /* W3C */
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f9f6f1', endColorstr='#f2efea');
   -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#f9f6f1', endColorstr='#f2efea')";
   
   
   border: 1px solid #d6d6d6;
   
   
   -webkit-background-clip: padding-box;
}  
   
   .widget-header h3 {
      
      position: relative;
      top: 2px;
      left: 10px;
      
      display: inline-block;
      margin-right: 3em;
      
      font-size: 14px;
      font-weight: 800;
      color: #525252;
      line-height: 18px;
      
      text-shadow: 1px 1px 2px rgba(255,255,255,.5);
   }
   
      .widget-header [class^="icon-"], .widget-header [class*=" icon-"] {
         
         display: inline-block;
         margin-left: 13px;
         margin-right: -2px;
         
         font-size: 16px;
         color: #555;
         vertical-align: middle;
         
         
         
      }




.widget-content {
   padding: 20px 15px 15px;
   
   background: #FFF;
   
   
   border: 1px solid #D5D5D5;
   
   -moz-border-radius: 5px;
   -webkit-border-radius: 5px;
   border-radius: 5px;
}

.widget-header+.widget-content {
   border-top: none;
   
   -webkit-border-top-left-radius: 0;
   -webkit-border-top-right-radius: 0;
   -moz-border-radius-topleft: 0;
   -moz-border-radius-topright: 0;
   border-top-left-radius: 0;
   border-top-right-radius: 0;
}

.widget-nopad .widget-content {
   padding: 0;
}

/* Widget Content Clearfix */  
.widget-content:before,
.widget-content:after {
    content:"";
    display:table;
}

.widget-content:after {
    clear:both;
}

/* For IE 6/7 (trigger hasLayout) */
.widget-content {
    zoom:1;
}

/* Widget Table */

.widget-table .widget-content {
   padding: 0;
}

.widget-table .table {
   margin-bottom: 0;
   
   border: none;
}

.widget-table .table tr td:first-child {
   border-left: none;
}

.widget-table .table tr th:first-child {
   border-left: none;
}


/* Widget Plain */

.widget-plain {
   
   background: transparent;
   
   border: none;
}

.widget-plain .widget-content {
   padding: 0;
   
   background: transparent;
   
   border: none;
}


/* Widget Box */

.widget-box {  
   
}

.widget-box .widget-content {  
   background: #E3E3E3;   
   background: #FFF;
}




/*------------------------------------------------------------------
[7. Error / .error-container]
*/

.error-container {
   margin-top: 4em;
   margin-bottom: 4em;
   text-align: center;
}

.error-container h1 {
   margin-bottom: .5em;
   
   font-size: 120px;
   line-height: 1em;
}

.error-container h2 {
   margin-bottom: .75em;
   font-size: 28px;
}

.error-container .error-details {
   margin-bottom: 1.5em;
   
   font-size: 16px;
}

.error-container .error-actions a {
   margin: 0 .5em;
}



/* Message layout */


ul.messages_layout {
   position: relative;
   margin: 0;
   padding: 0
}
ul.messages_layout li {
   float: left;
   list-style: none;
   position: relative
}
ul.messages_layout li.left {
   padding-left: 75px
}
ul.messages_layout li.right {
   padding-right: 75px
}
ul.messages_layout li.right .avatar {
   right: 0;
   left: auto
}
ul.messages_layout li.right .message_wrap .arrow {
   right: -12px;
   left: auto;
   background-position: 0 -213px;
   height: 15px;
   width: 12px
}
ul.messages_layout li.by_myself .message_wrap {
   border: 1px solid #b3cdf8
}
ul.messages_layout li.by_myself .message_wrap .info a.name {
   color: #4a8cf7
}
ul.messages_layout li a.avatar {
   position: absolute;
   left: 0;
   top: 0
}
ul.messages_layout li a.avatar img {
   -webkit-border-radius: 5px;
   -moz-border-radius: 5px;
   border-radius: 5px
}
ul.messages_layout li .message_wrap {
   -webkit-border-radius: 3px;
   -moz-border-radius: 3px;
   border-radius: 3px;
   position: relative;
   border: 1px solid #e9e9e9;
   padding: 10px;
   border: 1px solid #cbcbcb;
   margin-bottom: 20px;
   float: left;
   background: #fefefe;
   -webkit-box-shadow: rgba(0,0,0,0.1) 0 1px 0px;
   -moz-box-shadow: rgba(0,0,0,0.1) 0 1px 0px;
   box-shadow: rgba(0,0,0,0.1) 0 1px 0px
}
ul.messages_layout li .message_wrap .arrow {
   background-position: 0 -228px;
   height: 15px;
   width: 12px;
   height: 15px;
   width: 12px;
   position: absolute;
   left: -12px;
   top: 13px
}
ul.messages_layout li .message_wrap .info {
   float: left;
   width: 100%;
   border-bottom: 1px solid #fff;
   line-height: 23px
}
ul.messages_layout li .message_wrap .info .name {
   float: left;
   font-weight: bold;
   color: #483734
}
ul.messages_layout li .message_wrap .info .time {
   float: left;
   font-size: 11px;
   margin-left: 6px
}
ul.messages_layout li .message_wrap .text {
   float: left;
   width: 100%;
   border-top: 1px solid #cfcfcf;
   padding-top: 5px
}

ul.messages_layout .dropdown-menu  li{ width:100%; font-size:11px;}


/* Full Calendar */

.fc {
   direction: ltr;
   text-align: left;
   position: relative
}
.fc table {
   border-collapse: collapse;
   border-spacing: 0
}
html .fc, .fc table {
   font-size: 1em
}
.fc td, .fc th {
   padding: 0;
   vertical-align: top
}
.fc-header td {
   white-space: nowrap;
   background: none
}
.fc-header-left {
   width: 100%;
   text-align: left;
   position: absolute;
   left: 0;
   top: 6px
}
.fc-header-left .fc-button {
   margin: 0;
   position: relative
}
.fc-header-left .fc-button-prev, .fc-header-left .fc-button-next {
   float: left;
   border: none;
   padding: 14px 10px;
   opacity: 0.5
}
.fc-header-left .fc-button-prev .fc-button-inner, .fc-header-left .fc-button-next .fc-button-inner {
   border: none
}
.fc-header-left .fc-button-prev .fc-button-inner .fc-button-content, .fc-header-left .fc-button-next .fc-button-inner .fc-button-content {
   display: none
}
.fc-header-left .fc-button-prev.fc-state-hover, .fc-header-left .fc-button-next.fc-state-hover {
   opacity: 1
}
.fc-header-left .fc-button-prev.fc-state-down, .fc-header-left .fc-button-next.fc-state-down {
   background: none !important;
   margin-top: -1px
}
.fc-header-left .fc-button-prev .fc-button-inner {
   background-position: 0 -351px;
   height: 16px;
   width: 11px
}
.fc-header-left .fc-button-next {
   float: right
}
.fc-header-left .fc-button-next .fc-button-inner {
   background-position: 0 -367px;
   height: 16px;
   width: 11px
}
.fc-header-center {
   text-align: center
}
.fc-header-right {
   text-align: right;
   position: absolute;
   top: -34px;
   right: 10px
}
.fc-header-title {
   display: inline-block;
   vertical-align: top
}
.fc-header-title h2 {
   margin-top: 0;
   white-space: nowrap;
   font-size: 1.1rem;
   color: #6C737F;
   line-height: 55px;
}
.fc .fc-header-space {
   padding-left: 10px
}
.fc-header .fc-button {
   margin-bottom: 1em;
   vertical-align: top
}
.fc-header .fc-button {
   margin-right: -1px
}
.fc-header .fc-corner-right {
   margin-right: 1px
}
.fc-header .ui-corner-right {
   margin-right: 0
}
.fc-header .fc-state-hover, .fc-header .ui-state-hover {
   z-index: 2
}
.fc-header .fc-state-down {
   z-index: 3
}
.fc-header .fc-state-active, .fc-header .ui-state-active {
   z-index: 4
}
.fc-content {
   clear: both;
   background: #f9f9f9
}
.fc-view {
   width: 100%;
   overflow: hidden
}
.fc-view thead {
   background:#e9ecf1;
   line-height: 35px
}
.fc-widget-header, .fc-widget-content {
   border: 1px solid #ccc
}
.fc-state-highlight {
   background: #F4F3E6
}
.fc-cell-overlay {
   background: #9cf;
   opacity: .2;
   filter: alpha(opacity=20)
}
.fc-button {
   position: relative;
   display: inline-block;
   cursor: pointer
}
.fc-button-today{margin-top: 8px !important;}
.fc-state-default {
   border-style: solid;
   border-width: 1px 0
}
.fc-button-inner {
   position: relative;
   float: left;
   overflow: hidden
}
.fc-state-default .fc-button-inner {
   border-style: solid;
   border-width: 0 1px
}
.fc-button-content {
   position: relative;
   float: left;
   height: 1.9em;
   line-height: 1.9em;
   padding: 0 .6em;
   white-space: nowrap
}
.fc-button-content .fc-icon-wrap {
   position: relative;
   float: left;
   top: 50%
}
.fc-button-content .ui-icon {
   position: relative;
   float: left;
   margin-top: -50%;
*margin-top:0;
*top:-50%
}
.fc-state-default .fc-button-effect {
   position: absolute;
   top: 50%;
   left: 0
}
.fc-state-default .fc-button-effect span {
   position: absolute;
   top: -100px;
   left: 0;
   width: 500px;
   height: 100px;
   border-width: 100px 0 0 1px;
   border-style: solid;
   border-color: #fff;
   background: #444;
   opacity: .09;
   filter: alpha(opacity=9)
}
.fc-state-default, .fc-state-default .fc-button-inner {
   border-style: solid;
   border-color: #ccc #bbb #aaa;
   color: #000
}
.fc-state-hover, .fc-state-hover .fc-button-inner {
   border-color: #999
}
.fc-state-down {
   border-color: #555;
   background: #777
}
.fc-state-active, .fc-state-active .fc-button-inner {
   border-color: #555;
   background: #777;
   color: #fff
}
.fc-state-disabled, .fc-state-disabled .fc-button-inner {
   color: #999;
   border-color: #ddd
}
.fc-state-disabled {
   cursor: default
}
.fc-state-disabled .fc-button-effect {
   display: none
}
.fc-event {
   border-style: solid;
   border-width: 0;
   font-size: .85em;
   cursor: default
}
a.fc-event, .fc-event-draggable {
   cursor: pointer
}
a.fc-event {
   text-decoration: none
}
.fc-rtl .fc-event {
   text-align: right
}
.fc-event-skin {
   border-color: #3f85f5;
   background-color: #5e96ea;
   color: #fff
}
.fc-event-inner {
   position: relative;
   width: 100%;
   height: 100%;
   border-style: solid;
   border-width: 0;
   overflow: hidden
}
.fc-event-time, .fc-event-title {
   padding: 0 1px
}
.fc .ui-resizable-handle {
   display: block;
   position: absolute;
   z-index: 99999;
   overflow: hidden;
   font-size: 300%;
   line-height: 50%
}
.fc-event-hori {
   border-width: 1px 0;
   margin-bottom: 1px
}
.fc-event-hori .ui-resizable-e {
   top: 0 !important;
   right: -3px !important;
   width: 7px !important;
   height: 100% !important;
   cursor: e-resize
}
.fc-event-hori .ui-resizable-w {
   top: 0 !important;
   left: -3px !important;
   width: 7px !important;
   height: 100% !important;
   cursor: w-resize
}
.fc-event-hori .ui-resizable-handle {
   _padding-bottom: 14px
}
.fc-corner-left {
   margin-left: 1px
}
.fc-corner-left .fc-button-inner, .fc-corner-left .fc-event-inner {
   margin-left: -1px
}
.fc-corner-right {
   margin-right: 1px
}
.fc-corner-right .fc-button-inner, .fc-corner-right .fc-event-inner {
   margin-right: -1px
}
.fc-corner-top {
   margin-top: 1px
}
.fc-corner-top .fc-event-inner {
   margin-top: -1px
}
.fc-corner-bottom {
   margin-bottom: 1px
}
.fc-corner-bottom .fc-event-inner {
   margin-bottom: -1px
}
.fc-corner-left .fc-event-inner {
   border-left-width: 1px
}
.fc-corner-right .fc-event-inner {
   border-right-width: 1px
}
.fc-corner-top .fc-event-inner {
   border-top-width: 1px
}
.fc-corner-bottom .fc-event-inner {
   border-bottom-width: 1px
}
table.fc-border-separate {
   border-collapse: separate
}
.fc-border-separate th, .fc-border-separate td {
   border-width: 1px 0 0 1px
}
.fc-border-separate th.fc-last, .fc-border-separate td.fc-last {
   border-right-width: 1px
}
.fc-border-separate tr.fc-last th, .fc-border-separate tr.fc-last td {
   border-bottom-width: 0px
}
.fc-first {
   border-left-width: 0 !important
}
.fc-last {
   border-right-width: 0 !important
}
.fc-grid th {
   text-align: center
}
.fc-grid .fc-day-number {
   float: right;
   padding: 0 2px
}
.fc-grid .fc-other-month .fc-day-number {
   opacity: 0.3;
   filter: alpha(opacity=30)
}
.fc-grid .fc-day-content {
   clear: both;
   padding: 2px 2px 1px
}
.fc-grid .fc-event-time {
   font-weight: bold
}
.fc-rtl .fc-grid .fc-day-number {
   float: left
}
.fc-rtl .fc-grid .fc-event-time {
   float: right
}
.fc-agenda table {
   border-collapse: separate
}
.fc-agenda-days th {
   text-align: center
}
.fc-agenda .fc-agenda-axis {
   width: 60px !important;
   padding: 0 4px;
   vertical-align: middle;
   text-align: right;
   white-space: nowrap;
   font-weight: normal
}
.fc-agenda .fc-day-content {
   padding: 2px 2px 1px
}
.fc-agenda-days .fc-agenda-axis {
   border-right-width: 1px
}
.fc-agenda-days .fc-col0 {
   border-left-width: 0
}
.fc-agenda-allday th {
   border-width: 0 1px
}
.fc-agenda-allday .fc-day-content {
   min-height: 34px;
   _height: 34px
}
.fc-agenda-divider-inner {
   height: 2px;
   overflow: hidden
}
.fc-widget-header .fc-agenda-divider-inner {
   background: #eee
}
.fc-agenda-slots th {
   border-width: 1px 1px 0
}
.fc-agenda-slots td {
   border-width: 1px 0 0;
   background: none
}
.fc-agenda-slots td div {
   height: 20px
}
.fc-agenda-slots tr.fc-slot0 th, .fc-agenda-slots tr.fc-slot0 td {
   border-top-width: 0
}
.fc-agenda-slots tr.fc-minor th, .fc-agenda-slots tr.fc-minor td {
   border-top-style: dotted
}
.fc-agenda-slots tr.fc-minor th.ui-widget-header {
*border-top-style:solid
}
.fc-event-vert {
   border-width: 0 1px
}
.fc-event-vert .fc-event-head, .fc-event-vert .fc-event-content {
   position: relative;
   z-index: 2;
   width: 100%;
   overflow: hidden
}
.fc-event-vert .fc-event-time {
   white-space: nowrap;
   font-size: 10px
}
.fc-event-vert .fc-event-bg {
   position: absolute;
   z-index: 1;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: #fff;
   opacity: .3;
   filter: alpha(opacity=30)
}
.fc .ui-draggable-dragging .fc-event-bg, .fc-select-helper .fc-event-bg {
   display: none\9
}
.fc-event-vert .ui-resizable-s {
   bottom: 0 !important;
   width: 100% !important;
   height: 8px !important;
   overflow: hidden !important;
   line-height: 8px !important;
   font-size: 11px !important;
   font-family: monospace;
   text-align: center;
   cursor: s-resize
}
.fc-agenda .ui-resizable-resizing {
   _overflow: hidden
}
.fc-header-left .fc-button-prev .fc-button-inner {background: url('../app/icons-sa7c41345d9.png') no-repeat; background-position: 0 -351px;
height: 16px;
width: 11px;}

.fc-header-left .fc-button-next .fc-button-inner {background: url('../app/icons-sa7c41345d9.png') no-repeat; background-position: 0 -367px;
height: 16px;
width: 11px;}

/*------------------------------------------------------------------
[8. Miscellaneous]
*/

.chart-holder {
   width: 100%;
   height: 250px;
}

.dropdown-menu li>a:hover, .dropdown-menu .active>a, .dropdown-menu .active>a:hover { background:#00ba8b;}

.accordion-heading { background:#e5e5e5;  }
.accordion-heading a { color:#545454; text-decoration:none; font-weight:bold; }

.btn-facebook-alt i {
color: #23386a;
}
.btn-twitter-alt i {
color: #0098d0;
}
.btn-google-alt i {
color: #b6362d;
}
.btn-linkedin-alt i {
color: #0073b2;
}
.btn-pinterest-alt i {
color: #ab171e;
}
.btn-github-alt i {
color: #333;
}

.all-icons li { list-style:none;}

.ML0 { margin-left:0}
.MR0 { margin-right:0;}



/*------------------------------------------------------------------
[1. Max Width: 480px]
*/

@media (max-width: 480px) {
   
   .error-container h1 {
      font-size: 72px;
   }
   
}





/*------------------------------------------------------------------
[1. Max Width: 767px]
*/

@media (max-width: 767px) {
       
   #main {
      padding: 0 10px;
      margin-right: -20px;
      margin-left: -20px;    
   }
   
   
   .subnavbar {
      margin-left: -20px;
      margin-right: -20px;   
   }
   
   
   .subnavbar-inner {
      height: auto;
   }
   
   .subnavbar .container > ul {
      width: 100%;
      height: auto;
      
      border: none;
   }
   
   .subnavbar .container > ul > li {
      width: 33%;
      height: 70px;
      margin-bottom: 0;
      
      border: none;
   }
   
    
    
    .subnavbar .container > ul > li.active > a {
      font-size: 11px;
       background: transparent;
    }
   
   .subnavbar .container > ul > li > a > i {  
      display: inline-block; 
      margin-bottom: 0;
      
      font-size: 20px;
   }
   
   
   .subnavbar-open-right .dropdown-menu {
      left: auto;
      right: 0;
   }
   
   .subnavbar-open-right .dropdown-menu:before {
      left: auto;
      right: 12px;
   }
   .subnavbar-open-right .dropdown-menu:after {
      left: auto;
      right: 13px;
   }
   
   .extra {
      margin-right: -20px;
      margin-left: -20px;
   }
   
   .extra .container {
      padding: 0 20px;
   }
   
   .footer {
      margin-right: -20px;
      margin-left: -20px;
   }
   
   .footer .container {
      padding: 0 20px;
   }
   
   .footer .footer-terms {
      text-align: left;
   }
   
   .footer .footer-terms a {
      margin-left: 0;
      margin-right: 1em;
   }

}
    




/*------------------------------------------------------------------
[3. Max Width: 979px]
*/

@media (max-width: 979px) {
   
   .navbar-fixed-top {
      position: static;
      
      margin-bottom: 0;
   }
   
   .subnavbar {
   }
   
   .subnavbar .container {       
      width: auto;
   }
}






/*------------------------------------------------------------------
[2. Max Width: 1200px]
*/

@media (min-width: 1200px) {
   .navbar .search-query {
      width: 200px;
   }
   
}

AppCalendarController.java

package com.bag.controller.web;

import com.bag.domain.result.AppCalendar;
import com.bag.domain.result.ResultApp;
import com.bag.domain.result.ResultAppOne;
import com.bag.service.CourseService;
import com.bag.service.RedisService;
import io.swagger.annotations.ApiOperation;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.servlet.ModelAndView;

import javax.servlet.http.HttpServletRequest;
import java.util.*;

/**
 * @Author: 任涛涛
 * @Date: 14:10 2018/1/30
 */
@Controller
@RequestMapping("calendar")
public class AppCalendarController extends BaseController {

    @Autowired
    private RedisService redisService;

    @Autowired
    private CourseService courseService;

    @ApiOperation(value = "学生端首页")
    @RequestMapping("student")
    public ModelAndView login(int id,String version,int type) throws Exception {
        String viewName = "web/studentCalendar";
        ModelAndView modelAndView = new ModelAndView(viewName);
        modelAndView.addObject("studentId", id);
        modelAndView.addObject("version", version);
        modelAndView.addObject("type", type);
        return modelAndView;
    }

    @ApiOperation(value = "列表")
    @ResponseBody
    @RequestMapping(value = "studentList", method = RequestMethod.POST)
    public ResultApp schoolOrderList(@RequestParam("studentId") int studentId,@RequestParam("version") String version,@RequestParam("type") int type) throws Exception {
//        ResultApp result = loginVerificationToken(request.getHeader("token"));
        ResultApp result = new ResultApp();
//        if(result.getCode()==2){//token
//            return result;
//        }
//        String version = request.getHeader("version");
//        int appversion = 0;
//        String type = "type";
//        if (request.getHeader(type) != null) {
//            int typeApp = Integer.parseInt(request.getHeader("type"));
            //接口状态（1正常，2需更新，3强制更新）
            int appversion = redisService.getAppVersion(version, type, 1);
//        }
//        else {
//            appversion = 2;
//        }
        if (appversion == 2 || appversion == 3) {
            Map map = new HashMap();
            map.put("id", studentId);
            List<AppCalendar> list = courseService.getAPPCalendarList(map);
            for(AppCalendar ac:list){
                StringBuilder sb = new StringBuilder();
                StringBuilder sb2 = new StringBuilder();
                sb.append(ac.getCourseDate());
                sb.append(" ");
                sb.append(ac.getStartDate());
                sb2.append(ac.getCourseDate());
                sb2.append(" ");
                sb2.append(ac.getEndDate());
                ac.setStart(sb.toString());
                ac.setEnd(sb2.toString());
            }
            if (list == null) {
                list = new ArrayList<>();
            }
            result.setData(list);
        }else if (appversion == 1) {
            Map map = new HashMap();
            map.put("id", studentId);
            List<AppCalendar> list = courseService.getAPPCalendarList(map);
            for(AppCalendar ac:list){
                StringBuilder sb = new StringBuilder();
                StringBuilder sb2 = new StringBuilder();
                sb.append(ac.getCourseDate());
                sb.append(" ");
                sb.append(ac.getStartDate());
                sb2.append(ac.getCourseDate());
                sb2.append(" ");
                sb2.append(ac.getEndDate());
                ac.setStart(sb.toString());
                ac.setEnd(sb2.toString());
            }
            if (list == null) {
                list = new ArrayList<>();
            }
            result.setData(list);
        }
        return result;
    }

    @ApiOperation(value = "详情")
    @ResponseBody
    @RequestMapping(value = "studentDetails", method = RequestMethod.POST)
    public ResultAppOne schoolOrderList(@RequestParam("id") int  id,@RequestParam("scheduleId") int  scheduleId) throws Exception {
        ResultAppOne result = new ResultAppOne();
        AppCalendar app = courseService.getAPPCalendar(id,scheduleId);
        StringBuilder sb = new StringBuilder();
        StringBuilder sb2 = new StringBuilder();
        sb.append(app.getCourseDate());
        sb.append(" ");
        sb.append(app.getStartDate());
        sb2.append(app.getCourseDate());
        sb2.append(" ");
        sb2.append(app.getEndDate());
        app.setStart(sb.toString());
        app.setEnd(sb2.toString());
        result.setData(app);
        return result;
    }




    @ApiOperation(value = "老师端首页")
    @RequestMapping("teacher")
    public ModelAndView login2(int id,String version,int type) throws Exception {
        String viewName = "web/teacherCalendar";
        ModelAndView modelAndView = new ModelAndView(viewName);
        modelAndView.addObject("teacherId", id);
        modelAndView.addObject("version", version);
        modelAndView.addObject("type", type);
        return modelAndView;
    }

    @ResponseBody
    @ApiOperation(value = "老师课表")
    @RequestMapping(value = "teacherList", method = RequestMethod.POST)
    public ResultApp teacherList(@RequestParam("teacherId")int teacherId,@RequestParam("version") String version,@RequestParam("type") int type) throws Exception{
//        ResultApp result=loginVerificationToken(request.getHeader("token"));
        ResultApp result = new ResultApp();
//        if(result.getCode()==2){//token
//            return result;
//        }
//        String version=request.getHeader("version");
//        int appversion=0;
//        if(request.getHeader("type")!=null){
//            int typeApp=Integer.parseInt(request.getHeader("type"));
            int appversion=redisService.getAppVersion(version,type,2);//接口状态（1正常，2需更新，3强制更新）
//        }else{
//            appversion=1;
//        }
        if(appversion==2||appversion==3){
            Map map = new HashMap();
            map.put("id", teacherId);
            List<AppCalendar> list = courseService.getAPPCalendarTeacherList(map);
            for(AppCalendar ac:list){
                StringBuilder sb = new StringBuilder();
                StringBuilder sb2 = new StringBuilder();
                sb.append(ac.getCourseDate());
                sb.append(" ");
                sb.append(ac.getStartDate());
                sb2.append(ac.getCourseDate());
                sb2.append(" ");
                sb2.append(ac.getEndDate());
                ac.setStart(sb.toString());
                ac.setEnd(sb2.toString());
            }
            if (list == null) {
                list = new ArrayList<>();
            }
            result.setData(list);
        }else if(appversion==1){
            Map map = new HashMap();
            map.put("id", teacherId);
            List<AppCalendar> list = courseService.getAPPCalendarTeacherList(map);
            for(AppCalendar ac:list){
                StringBuilder sb = new StringBuilder();
                StringBuilder sb2 = new StringBuilder();
                sb.append(ac.getCourseDate());
                sb.append(" ");
                sb.append(ac.getStartDate());
                sb2.append(ac.getCourseDate());
                sb2.append(" ");
                sb2.append(ac.getEndDate());
                ac.setStart(sb.toString());
                ac.setEnd(sb2.toString());
            }
            if (list == null) {
                list = new ArrayList<>();
            }
            result.setData(list);
        }

        return result;
    }


    @ApiOperation(value = "详情")
    @ResponseBody
    @RequestMapping(value = "teacherDetails", method = RequestMethod.POST)
    public ResultAppOne teacherDetails(@RequestParam("id") int  id,@RequestParam("scheduleId") int  scheduleId,@RequestParam("teacherId")int teacherId) throws Exception {
        ResultAppOne result = new ResultAppOne();
        AppCalendar app = courseService.getAPPCalendarTeacher(id,scheduleId,teacherId);
        StringBuilder sb = new StringBuilder();
        StringBuilder sb2 = new StringBuilder();
        sb.append(app.getCourseDate());
        sb.append(" ");
        sb.append(app.getStartDate());
        sb2.append(app.getCourseDate());
        sb2.append(" ");
        sb2.append(app.getEndDate());
        app.setStart(sb.toString());
        app.setEnd(sb2.toString());
        result.setData(app);
        return result;
    }


    public ResultApp loginVerificationToken(String token) throws Exception {
        ResultApp result = new ResultApp();
        result.setMsg("error");
        result.setCode(2);
        List list = new ArrayList();
        result.setData(list);
        if (token == null || "".equals(token)) {//
            return result;
        }
//        kUserLogon logon = userLogonService.getUserLogonByUser(id, 2);
        boolean logon = redisService.verificationLoginByToken(token);

        if (logon) {//修改登录验证时间
            result.setMsg("success");
            result.setCode(1);
        } else {
            result.setMsg("用户信息过期，请重新登录！");
        }
        return result;
    }






}

一期一会AI

关注

3
点赞
踩
3

收藏

觉得还不错? 一键收藏
4
评论
基于h5的Fullcalendar

文章不怎么会排版,见谅.不多说,上干货.效果图:studentCalendar.htmlhtml>html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">head> meta charset="utf-8"/> title>学生端课表t
复制链接

扫一扫