jquery实现自适应时间计划安排表效果代码-html代码-BFW代码库

代码语言：html

代码描述：jquery实现自适应时间计划安排表效果代码，已经封装成一个插件，直接调用方法即可添加安排数据。

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">

  
  
  
<style>
@import url("https://fonts.googleapis.com/css?family=Roboto");
* {
  box-sizing: border-box;
  font-size: 13px;
}

body {
  background: #f7f7f7;
  margin: 0;
}

.centered {
  font-family: "Roboto", sans-serif;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
}

.info {
  width: 100%;
  max-width: 895px;
  margin: 50px auto;
}

.code {
  background: #dfdfdf;
  padding: 10px;
  color: #9e9e9e;
  font-size: 12px;
  border-radius: 3px;
}

#schedule {
  width: 100%;
  margin: 0 auto;
  max-width: 895px;
  background: #fff;
  font-family: "Roboto", sans-serif;
  display: flex;
  position: asbolute;
}

.s-legend {
  display: flex;
  position: relative;
  flex-direction: column;
  width: 150px;
}
.s-legend .s-head-info {
  height: 100%;
}
.s-legend .s-name {
  margin: 20px auto;
}
.s-legend .s-week-day {
  height: 100%;
  position: relative;
  box-shadow: inset 0 1px 0 0.5px #f5f5f5;
}
.s-legend .s-week-day .s-day {
  width: 100%;
  margin: 20px auto;
}

.s-head-info {
  font-weight: 900;
  max-height: 50px;
  position: relative;
  width: 100%;
}

.s-wrapper {
  display: flex;
}

.s-block {
  display: block;
  text-align: center;
}

.s-week-day {
  min-width: 50px;
  max-width: 150px;
  width: 100%;
}

.s-cell {
  text-align: center;
}

.s-container {
  width: 100%;
  overflow: auto;
}
.s-container .s-head-info {
  align-items: center;
  display: flex;
}
.s-container .s-head-info .s-head-hour {
  width: 100%;
  height: 55px;
  max-height: 55px;
  padding: 12px 0;
  min-width: 76.5px;
  border-left: 1.2px solid #e9e9e9;
}
.s-container .s-head-info .s-head-hour .s-number {
  font-size: 15px;
}
.s-container .s-head-info .s-head-hour .s-hourly-interval {
  color: #cccccc;
  font-size: 8px;
}
.s-container .s-rows-container {
  display: flex;
  position: relative;
}
.s-container .s-rows-container .s-activities {
  position: absolute;
  width: 100%;
  height: 100%;
}
.s-container .s-rows-container .s-activities .s-act-row {
  position: relative;
  height: 55px;
}
.s-container .s-rows-container .s-activities .s-act-row .green {
  background: linear-gradient(to right, #00b09b, #96c93d);
}
.s-container .s-rows-container .s-activities .s-act-row .orange {
  background: linear-gradient(to right, #F2994A, #F2C94C);
}
.s-container .s-rows-container .s-activities .s-act-row .red {
  background: linear-gradient(to right, #CB356B, #BD3F32);
}
.s-container .s-rows-container .s-activities .s-act-row .yellow {
  background: linear-gradient(to right, #fffc00, #fffc00);
}
.s-container .s-rows-container .s-activities .s-act-row .blue {
  background: linear-gradient(to right, #36D1DC, #5B86E5);
}
.s-container .s-rows-container .s-activities .s-act-row .pink {
  background: linear-gradient(to right, #834d9b, #d04ed6);
}
.s-container .s-rows-container .s-activities .s-act-row .black {
  background: linear-gradient(to right, #000428, #004e92);
}
.s-container .s-rows-container .s-activities .s-act-row .s-act-tab {
  height: 45px;
  padding: 15px;
  border-radius: 3px;
  position: absolute;
  top: 5px;
}
.s-container .s-rows-container .s-activities .s-act-row .s-act-tab .s-wrapper {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.s-container .s-rows-container .s-activities .s-act-row .s-act-tab .s-act-teacher, .s-container .s-rows-container .s-activities .s-act-row .s-act-tab .s-act-room, .s-container .s-rows-container .s-activities .s-act-row .s-act-tab .s-act-group {
  font-size: 7px;
  color: white;
  position: absolute;
  margin: 5px;
}
.s-container .s-rows-container .s-activities .s-act-row .s-act-tab .s-act-group {
  bottom: 0;
  left: 0;
}
.s-container .s-rows-container .s-activities .s-act-row .s-act-tab .s-act-name {
  color: white;
}
.s-container .s-rows-container .s-activities .s-act-row .s-act-tab .s-act-teacher {
  left: 0;
  top: 0;
}
.s-container .s-rows-container .s-activities .s-act-row .s-act-tab .s-act-room {
  top: 0;
  right: 0;
}

.s-hour-row {
  height: 100%;
  width: 100%;
  min-width: 76.5px;
}
.s-hour-row .s-hour-wrapper {
  display: flex;
}
.s-hour-row .s-hour-wrapper .s-half-hour:nth-child(2) {
  border-left: 0.5px solid #e9e9e9;
}
.s-hour-row .s-hour-wrapper .s-half-hour {
  width: 50%;
  height: 55px;
  border-left: 1.2px solid #e9e9e9;
}

@media only screen and (max-width: 480px) {
  .s-legend {
    width: 100px;
  }
}
</style>




</head>

<body >
  <div class='centered'>
  <div class='info'>
    <p>Try adding your own activity. Open the console and paste this command:</p>
    <div class='code'>schedule.activities.add(4,"Physics", "8.00-10.30", 102, "A", "B.Konon","pink");</div>
  </div>
  <div id='schedule'>
    <div class='s-legend'>
   .........完整代码请登录后点击上方下载按钮下载查看