Rajeshkrathor Ответов: 2

Как сделать простой календарь с праздником?

привет,
Я ищу календарь, имеющий дату упоминания праздника мудро.на iCal-календарь демо

<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.

Что - то похожее на это.
Если у кого-то есть код или предложение, пожалуйста, ответьте как можно скорее.
Спасибо

2 Ответов

Рейтинг:
2

Jignesh Khant

в части тела просто добавьте это:
в <тип входного="текст" идентификатор="дата" /&ГТ;

Рейтинг:
1

Jignesh Khant 

<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 () {
           $("#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>

[no name]

спасибо
но что делать, если я хочу, чтобы Холидей был из базы данных, как я уже сказал в своем вопросе.