JSDM

HTML

 
1
<table>
2
  <tr>
3
    <th class="day-name">Sun</th>
4
    <th class="day-name">Mon</th>
5
    <th class="day-name">Tue</th>
6
    <th class="day-name">Wed</th>
7
    <th class="day-name">Thu</th>
8
    <th class="day-name">Fri</th>
9
    <th class="day-name">Sat</th>
10
  </tr>
11
  <tr>
12
    <td class="day"><span class="number">31</span></td>
13
    <td class="day"><span class="number">1</span><span class="event"></span><span class="event"></span></td>
14
    <td class="day"><span class="number">2</span></td>
15
    <td class="day"><span class="number">3</span><span class="event event-multiday-start"></span></td>
16
    <td class="day"><span class="number">4</span><span class="event event-multiday"></span><span class="event event-multiday-start eventclass" style="background-color:#5a9ab2;"></span><span class="event"></td>
17
    <td class="day"><span class="number">5</span><span class="event event-multiday-finish"></span><span class="event event-multiday eventclass" style="background-color:#5a9ab2;"></span></td>
18
    <td class="day"><span class="number">6</span><span class="event event-ghost"></span><span class="event event-multiday-finish eventclass" style="background-color:#5a9ab2;"></span></td>
19
  </tr>
20
  <tr>
21
    <td class="day"><span class="number">7</span></td>
22
    <td class="day"><span class="number">8</span><span class="event"></span></td>
23
    <td class="day"><span class="number">9</span></td>
24
    <td class="day"><span class="number">10</span></td>
25
    <td class="day"><span class="number">11</span></td>
26
    <td class="day"><span class="number">12</span></td>
27
    <td class="day"><span class="number">13</span></td>
28
  </tr>
29
  <tr>
30
    <td class="day"><span class="number">14</span></td>
31
    <td class="day"><span class="number">15</span></td>
32
    <td class="day"><span class="number">16</span><span class="event"></span></td>
33
    <td class="day"><span class="number">17</span><span class="event"></span></td>
34
    <td class="day"><span class="number">18</span></td>
35
    <td class="day"><span class="number">19</span></td>
36
    <td class="day"><span class="number">20</span></td>
37
  </tr>
38
  <tr>
39
    <td class="day"><span class="number">21</span></td>
40
    <td class="day"><span class="number">22</span></td>
41
    <td class="day"><span class="number">23</span></td>
42
    <td class="day"><span class="number">24</span></td>
43
    <td class="day"><span class="number">25</span></td>
44
    <td class="day"><span class="number">26</span></td>
45
    <td class="day"><span class="number">27</span><span class="event event-multiday-start" style="background-color:#da5f5f;"></td>
46
  </tr>
47
  <tr>
48
    <td class="day"><span class="number">28</span><span class="event event-multiday" style="background-color:#da5f5f;"></td>
49
    <td class="day today"><span class="number">29</span><span class="event event-multiday-finish" style="background-color:#da5f5f;"></td>
50
    <td class="day"><span class="number">30</span></td>
51
    <td class="day"><span class="number">1</span></td>
52
    <td class="day"><span class="number">2</span></td>
53
    <td class="day"><span class="number">3</span></td>
54
    <td class="day"><span class="number">4</span></td>
55
  </tr>
56
  <tr>
57
    <td class="day"><span class="number">5</span></td>
58
    <td class="day"><span class="number">6</span><span class="event"></span></td>
59
    <td class="day"><span class="number">7</span></td>
60
    <td class="day"><span class="number">8</span></td>
61
    <td class="day"><span class="number">9</span></td>
62
    <td class="day"><span class="number">10</span></td>
63
    <td class="day"><span class="number">11</span></td>
64
  </tr>
65
</table>

CSS

x
 
1
body { margin: 0; }
2
3
table { width: 100%; box-sizing: border-box; box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,0.1); font-family: 'Ubuntu'; /*border-collapse: collapse;*/ border-spacing: 0; background-color: #333333; }
4
5
th, td { border: 1px solid rgba(255,255,255,0.1); box-sizing: border-box; }
6
7
th { text-transform: uppercase; font-size:10px; font-weight:700; padding: 10px 0; color: rgba(255,255,255,0.5); background-color: #292929; letter-spacing: 1px; }
8
9
td { width: 14.285%; transition: all 0.3s; font-size: 14px; color: rgba(255,255,255,0.6); font-weight: 400; font-size: 14px; padding: 1.5% 1.5% 5%; vertical-align: initial; padding: 1.5% 0 ; height: 75px; }
10
11
.day:hover { background-color: rgba(0,0,0,0.1); cursor:pointer; }
12
13
.today { color: #FFF; background-color: rgba(0,0,0,.25) !important; }
14
15
span.number { margin-left: 10% }
16
17
span.event { height: 4px; background-color: rgba(0,0,0,.3); display: block; margin: 5px 10%; border-radius: 2px; background-color: #91c33b; }
18
19
span.event-multiday { margin: 5px -2px; border-radius: 0; }
20
span.event-multiday-start { margin-right: -4px;  }
21
span.event-multiday-finish { margin-left: -4px;  }
22
23
span.event-ghost { background-color:transparent; }
24
? ?
? ?
必须是有效的URL
+ 添加另一个资源

JS

xxxxxxxxxx
1
 
1
必须是有效的URL
+ 添加另一个资源
Close

文件管理 点击文件查看URL

图片

  1. 暂无文件

CSS

  1. 暂无文件

JavaScript

  1. 暂无文件

其他

  1. 暂无文件
拖动文件到上面的区域或者:
加载中 ..................