Click here to Skip to main content
15,900,816 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
hi,
I am looking for a calender having holiday mention date wise.iCal-like Calendar Demo

HTML
<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
Updated 5-Feb-18 20:42pm
v4

XML
<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>
 
Share this answer
 
Comments
[no name] 24-May-13 1:30am    
thanks
but what if i want holiday's from database as i said in my Question.
in body part just add this:
<input type="text" id="date" />
 
Share this answer
 

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



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900