Click here to Skip to main content
Rate this: bad
good
Please Sign up or sign in to vote.
See more: PHP MySQL jQuery
hi,
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>

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
Posted 22-May-13 23:46pm
Edited 25-May-13 1:48am
v4
Rate this: bad
good
Please Sign up or sign in to vote.

Solution 1

<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>
  Permalink  
Comments
Rajeshkrathor at 24-May-13 1:30am
   
thanks
but what if i want holiday's from database as i said in my Question.
Rate this: bad
good
Please Sign up or sign in to vote.

Solution 2

in body part just add this:
<input type="text" id="date" />
  Permalink  

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS
0 OriginalGriff 385
1 Sergey Alexandrovich Kryukov 329
2 CPallini 270
3 DamithSL 214
4 Maciej Los 192
0 OriginalGriff 5,515
1 DamithSL 4,451
2 Maciej Los 3,902
3 Kornfeld Eliyahu Peter 3,480
4 Sergey Alexandrovich Kryukov 3,175


Advertise | Privacy | Mobile
Web02 | 2.8.141216.1 | Last Updated 25 May 2013
Copyright © CodeProject, 1999-2014
All Rights Reserved. Terms of Service
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100