Как создать простой, красивый календарь на PHP, используя CSS?
SoftMaker.kzЗдравствуйте, уважаемые читатели нашего блога! Мы уже говорили, как выбрать одно или несколько случайных значений из массива. Также уже было написано о том, как добавить изображение в базу данных MySQL и как потом получить изображение из БД MySQL. А сегодня мы создадим скрипт календаря на PHP. Итак, приступим.
Перед тем, как мы начнем, вы можете посмотреть на этот клендарь, нажав на кнопку ниже.
Пункт 1.
Прежде всего попробуем собрать необходимую информацию, которая нужна, чтобы показать текущий месяц и день. Кроме того, нужно вывести текущий год и месяц. Для этого нам нужно:
- Текущий день
- Первый день текущего месяца
- Последний день текущего месяца
Имея сведения, перечисленные выше мы сможем определить, какой первый день месяца , какова длинна месяца и определить текущий день.
Пункт 2.
Чтобы получить информацию, упомянутую в 1 пункте мы воспользуемся функцией getdate(). Если мы не указываем никаких параметров в функции, то она возвратит информацию о текущем дате в виде массива:
Array ( [seconds] => 40 [minutes] => 58 [hours] => 21 [mday] => 17 [wday] => 2 [mon] => 6 [year] => 2003 [yday] => 167 [weekday] => Tuesday [month] => June [0] => 1055901520 )
Чтобы получить последний день месяца мы воспользуемся функцией mktime (int hour, int minute, int second, int month, int day, int year [, int is_dst]), которая получает UNIX timestamp даты. Для этого пятый аргумент функции будет иметь значение 0. Поэтому код будет выглядеть следующим образом:
<?php $today = getdate(); $firstDay = getdate(mktime(0,0,0,$today['mon'],1,$today['year'])); $lastDay = getdate(mktime(0,0,0,$today['mon']+1,0,$today['year'])); ?>
Пункт 3.
Чтобы показать календарь нам нужно вывести таблицу с 7 столбцами для 7 дней недели. Число строк таблицы зависит от количества дней месяца. Также необходимо вывести заголовок, в котором отразится информация о месяце и годе. А также подзаголовок с названием дня.
<?php // Создадим таблицу с заголовками echo '<table>'; echo ' <tr><th colspan="7">'.$today['month']." - ".$today['year']."</th></tr>"; echo '<tr class="days">'; echo ' <td>Mo</td><td>Tu</td><td>We</td><td>Th</td>'; echo ' <td>Fr</td><td>Sa</td><td>Su</td></tr>';
Пункт 4.
Сейчас у нас есть заголовок таблицы. Давайте попробуем заполнить первую строку. Это сделать непросто, так как Вы не можете записать 1 в первую ячейку, 2 во вторую и т.д. Это получится, если первый день месяца понедельник, но если нет? Что бы решить эту задачу, нам нужен индекс wday (см. пункт 1, массив) из массива firstDay. Эта информация поможет нам заполнить пустые дни в календаре пробелами. Посмотрите следующий код:
<?php
echo '<tr>';
$actday=0;
for($i=1;$i<=7;$i++)
{
if ($i == $curDay ){ $class = ' class="cur_td"';}
else{ $class = ''; }
if ($DayNameNum <= $i)
{
if ($DayNameNum==$i)
{
$actday++;
}
if ($actday!==0)
{
echo "<td$class>$actday";
$actday++;
}
} else {
echo "<td$class> </td>";
}
}
echo '</tr>';
$actday = $StartDay;
?>
Пункт 5.
Следующим шагом будет заполнение остальных строк в календаре. Это сделать легче, нам только нужно знать сколько полных недель в текущем месяце:
<?php
$fullWeeks = floor(($lastDay['mday']-$actday)/7);
for ($i=0;$i<$fullWeeks;$i++){
echo '<tr>';
for ($j=0;$j<7;$j++){
$actday++;
echo "$actday";
}
echo '</tr>';
}
?>
Пункт 6.
В этом пункте нам нужно добавить оставшиеся дни месяца в последние строки таблицы:
<?php
//Покажем последние дни месяца
if($actday < $lastDay['mday']){
echo echo '<tr>';
for($i=0;$i<7;$i++){
$actday++;
if($actday==$today['mday']){$class=' class="cur_td"';
} else {
$class = '';
if($actday <= $lastDay['mday'])
{
echo"<td$class>$actday";
} else {
echo'<td> </td>';
}
}
}
echo '</tr>';
echo "</table>";
}
?>
Пункт 7.
Чтобы наш календарь выглядел красивее мы создадим CSS таблицу. CSS будет простым:
table {
background : #E0FFFF;
width : 210px;
border: 1px solid #888;
}
td {
border: 1px solid Black;
text-align : center;
font-weight : bold;
font-size : 12px;
}
.cur_td{
background : #FFEBCD;
text-decoration : blink;
}
th {
ont-family: Verdana;
font-weight : bold;
font-size : 14px;
background : #E9ECEF;
}
.actday{
background-color: #c22;
font-weight:bold;
}
Пункт 8.
Полный код календаря на PHP, используя таблицу каскадных стилей CSS:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
<html>
<head>
<link href="style/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<?php
function showCalendar(){
// Получим информацию о днях.
// Нам нужен текущий, первый и последний день месяца.
$today = getdate();
$firstDay = getdate(mktime(0,0,0,$today['mon'],1,$today['year']));
$lastDay = getdate(mktime(0,0,0,$today['mon']+1,0,$today['year']));
// Создадим таблицу с заголовком
echo '<table>';
echo ' <tr><th colspan="7">'.$today['month']." - ".$today['year'].
"</th></tr>";
echo '<tr class="days">';
echo ' <td>Mo</td><td>Tu</td><td>We</td><td>Th</td>';
echo ' <td>Fr</td><td>Sa</td><td>Su</td></tr>';
// Покажем первую строку календаря
echo '<tr>';
for($i=1;$i<$firstDay['wday'];$i++){
echo '<td> </td>';
}
$actday = 0;
for($i=$firstDay['wday'];$i<=7;$i++){
$actday++;
if ($actday == $today['mday']) {
$class = ' class="actday"';
} else {
$class = '';
}
echo "<td$class>$actday</td>";
}
echo '</tr>';
// Получим количество полных недель текущего месяца
$fullWeeks = floor(($lastDay['mday']-$actday)/7);
for ($i=0;$i<$fullWeeks;$i++){
for ($j=0;$j<7;$j++){
$actday++;
if ($actday == $today['mday']) {
$class = ' class="actday"';
} else {
$class = '';
}
echo "<td$class>$actday</td>";
}
echo '</tr>';
}
//Покажем последние дни месяца
if ($actday < $lastDay['mday']){
echo '<tr>';
for ($i=0; $i<7;$i++){
$actday++;
if ($actday == $today['mday']) {
$class = ' class="actday"';
} else {
$class = '';
if ($actday <= $lastDay['mday']){
echo "<td$class>$actday</td>";
}
else {
echo '<td> </td>';
}
}
echo '</tr>';
}
echo '</table>';
}
showCalendar();
?>
</body>
</html>
Источник: www.phptoys.com
SoftMakerKz
SoftMaker.kz
SoftMaker.kz