如何制作一个带假日的简单日历？ [英] How to make a simple calendar with holiday?
本文介绍了如何制作一个带假日的简单日历？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在寻找一个明智假日提及日期的日历。 iCal-比如日历演示
I am looking for a calender having holiday mention date wise.iCal-like Calendar Demo
<html>
<head>
<title>iCal-like Calendar (CSS+jQuery)</title>
<link rel="stylesheet" href="css/master.css" type="text/css" media="screen" charset="utf-8" />
<script src="js/jquery-1.3.min.js" type="text/javascript"> </script>
<script src="js/coda.js" type="text/javascript"> </script>
</head>
<body>
<h1>iCal-like Calendar Demo</h1>
<table cellspacing="0">
<thead>
<tr>
<th>Mon</th><th>Tue</th><th>Wed</th>
<th>Thu</th><th>Fri</th><th>Sat</th>
<th>Sun</th>
</tr>
</thead>
<tbody>
<tr>
<td class="padding" colspan="3"></td>
<td> 1</td>
<td> 2</td>
<td> 3</td>
<td> 4</td>
</tr>
<tr>
<td> 5</td>
<td> 6</td>
<td> 7</td>
<td> 8</td>
<td class="today"> 9</td>
<td>10</td>
<td>11</td>
</tr>
<tr>
<td>12</td>
<td class="date_has_event">
13
<div class="events">
<ul>
<li>
<span class="title">Event 1</span>
<span class="desc">Lorem ipsum dolor sit amet, consectetu adipisicing elit.</span>
</li>
<li>
<span class="title">Event 2</span>
<span class="desc">Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span>
</li>
</ul>
</div>
</td>
<td>14</td>
<td>15</td>
<td>16</td>
<td>17</td>
<td>18</td>
</tr>
<tr>
<td>19</td>
<td>20</td>
<td>21</td>
<td class="date_has_event">
22
<div class="events">
<ul>
<li>
<span class="title">Event 1</span>
<span class="desc">Lorem ipsum dolor sit amet, consectetu adipisicing elit.</span>
</li>
<li>
<span class="title">Event 2</span>
<span class="desc">Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span>
</li>
</ul>
</div>
</td>
<td>23</td>
<td>24</td>
<td>25</td>
</tr>
<tr>
<td>26</td>
<td>27</td>
<td>28</td>
<td>29</td>
<td>30</td>
<td>31</td>
<td class="padding"></td>
</tr>
</tbody>
<tfoot>
<th>Mon</th><th>Tue</th><th>Wed</th>
<th>Thu</th><th>Fri</th><th>Sat</th>
<th>Sun</th>
</tfoot>
</table>
</body>
</html>
但是这里的事件代码是静态的我想要日期和数据来自 数据库
如13和
事件值
1- Lorem ipsum dolor sit amet，consectetu adipisicing elit。
2- Excepteur sint occaecat cupidatat non proident，sunt in culpa qui officia deserunt mollit anim id est laborum。
类似的东西。
如果有人有代码或建议请尽快回复。
谢谢
But here code of event is static i want the date and data come from database
like "13" and
events value
1- Lorem ipsum dolor sit amet, consectetu adipisicing elit.
2- Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Something similar to this.
If anyone have code or suggestion pls reply ASAP.
Thanks
推荐答案
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/smoothness/jquery-ui.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
<script type="text/javascript">
var holiDays = [[2013, 05, 01, 'Maharashtra Day'], [2013, 08, 15, 'Independence Day'], [2013, 08, 28, 'JANMASHTAMI'], [2013, 09, 09, 'GANESH CHATURTHI'], [2013, 10, 02, 'GANDHI JAYNTI'], [2013, 10, 13, 'DASARA'], [2013, 11, 03, 'LAXMI PUJAN'], [2013, 11, 04, 'DIWALI'], [2013, 11, 05, 'BHAUBEEJ'], [2014, 01, 26, 'REPUBLIC DAY '], [2014, 03, 17, 'HOLI']];
（function（）{
(function () {
（＃date）。datepicker（{
beforeShowDay：setHoliDays
}）;
//设置在beforeShowDay
函数中配置的假日函数setHoliDays（date）{
for（i = 0; i < ; holiDays.length; i ++） {
if （date.getFullYear（） = = holiDays [i] [0]
< span class =code-attribute> && date.getMonth() == holiDays[i][1] - 1
&& date.getDate() == holiDays[i][2]) {
return [true, 'holiday', holiDays[i][3]];
}
}
return [true, ''];
}
});
</script>
<style type=\"text/css\">
.ui-datepicker td.holiday a, .ui-datepicker td.holiday a:hover {
background: none #FFEBAF;
border: 1px solid #BF5A0C;
}
</style>
("#date").datepicker({ beforeShowDay: setHoliDays }); // set holidays function which is configured in beforeShowDay function setHoliDays(date) { for (i = 0; i < holiDays.length; i++) { if (date.getFullYear() == holiDays[i][0] && date.getMonth() == holiDays[i][1] - 1 && date.getDate() == holiDays[i][2]) { return [true, 'holiday', holiDays[i][3]]; } } return [true, '']; } }); </script> <style type="text/css"> .ui-datepicker td.holiday a, .ui-datepicker td.holiday a:hover { background: none #FFEBAF; border: 1px solid #BF5A0C; } </style>
这篇关于如何制作一个带假日的简单日历？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
