iCal-Like - Un tutorial pour recréer un calendrier iCal en jQuery

Recréez le calendrier made in Apple, iCal, grâce à ce tutorial jQuery et CSS.

Ce tutorial provient du site Stefanoverna

Voici comment recréer le calendrier iPhone en quelques lignes de code:

HTML

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

Un peu de CSS pour rendre le tout plus design:

table {
    border-collapse: separate;
    border: 1px solid #9DABCE;
    border-width: 0px 0px 1px 1px;
    margin: 10px auto;
    font-size: 20px;
}
td, th {
    width: 81px;
    height: 81px;
    text-align: center;
    vertical-align: middle;
    background: url(../img/cells.png);
    color: #444;
    position: relative;
}
th {
    height: 30px;
    font-weight: bold;
    font-size: 14px;
}
td:hover, th:hover {
    background-position: 0px -81px;
    color: #222;
}
td.date_has_event {
    background-position: 162px 0px;
    color: white;
}
td.date_has_event:hover {
    background-position: 162px -81px;
}
td.padding {
    background: url(../img/calpad.jpg);
}
td.today {
    background-position: 81px 0px;
    color: white;
}
td.today:hover {
    background-position: 81px -81px;
}
.events {
	position: relative;
}
.events ul {
	text-align: left;
	position: absolute;
	display: none;
	z-index: 1000;
	padding: 15px;
	background: #E7ECF2 url(../img/popup.png) no-repeat;
	color: white;
	border: 1px solid white;
	font-size: 15px;
	width: 200px;
	-moz-border-radius: 3px;
	-khtml-border-radius: 3px;
	-webkit-border-radius: 3px;
	-border-radius: 3px;
	list-style: none;
	color: #444444;
	-webkit-box-shadow: 0px 8px 8px #333;
}
.events li {
	padding-bottom: 5px;
}
.events li span {
	display: block;
	font-size: 12px;
	text-align: justify;
	color: #555;
}
.events li span.title {
	font-weight: bold;
	color: #222;
}

Et enfin, le jQuery qui permettra d'animer les bulles d'évènements:

$(function () {
    $('.date_has_event').each(function () {
        // options
        var distance = 10;
        var time = 250;
        var hideDelay = 500;
 
        var hideDelayTimer = null;
 
        // tracker
        var beingShown = false;
        var shown = false;
 
        var trigger = $(this);
        var popup = $('.events ul', this).css('opacity', 0);
 
        // set the mouseover and mouseout on both element
        $([trigger.get(0), popup.get(0)]).mouseover(function () {
            // stops the hide event if we move from the trigger to the popup element
            if (hideDelayTimer) clearTimeout(hideDelayTimer);
 
            // don't trigger the animation again if we're being shown, or already visible
            if (beingShown || shown) {
                return;
            } else {
                beingShown = true;
 
                // reset position of popup box
                popup.css({
                    bottom: 20,
                    left: -76,
                    display: 'block' // brings the popup back in to view
                })
 
                // (we're using chaining on the popup) now animate it's opacity and position
                .animate({
                    bottom: '+=' + distance + 'px',
                    opacity: 1
                }, time, 'swing', function() {
                    // once the animation is complete, set the tracker variables
                    beingShown = false;
                    shown = true;
                });
            }
        }).mouseout(function () {
            // reset the timer if we get fired again - avoids double animations
            if (hideDelayTimer) clearTimeout(hideDelayTimer);
 
            // store the timer so that it can be cleared in the mouseover if required
            hideDelayTimer = setTimeout(function () {
                hideDelayTimer = null;
                popup.animate({
                    bottom: '-=' + distance + 'px',
                    opacity: 0
                }, time, 'swing', function () {
                    // once the animate is complete, set the tracker variables
                    shown = false;
                    // hide the popup entirely after the effect (opacity alone doesn't do the job)
                    popup.css('display', 'none');
                });
            }, hideDelay);
        });
    });
});

Il ne vous restera plus qu'à rendre toute cette interface dynamique en la couplant à du PHP et une base MySQL pour afficher dynamiquement les jours, et les évènements !

Rendu final