
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<!DOCTYPE html> <html> <head> <title>Calendar in php | Code Affair</title> </head> <body> <?php if (function_exists('date_default_timezone_set')){ date_default_timezone_set('Asia/Calcutta'); } if(isset($_GET['year'])) $year=$_GET['year']; else $year=date("Y"); if(isset($_GET['month'])) $month=$_GET['month']; else $month=date("n"); echo print_calendar($month,$year); function print_calendar($month,$year){ // the function generating the calendar } ?> </body> </html> |
The calendar printing function
So far, we have done pretty good. We have made basic structure that gets what the user needs. We even have a function that provides us with a calendar according to the month,year the user provides us. So, let’s fill up the function with some code, shall we:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
function print_calendar($month,$year){ $temp="<table id='calendar'>"; $temp.="<tbody>"; $temp.="<tr><td>Su</td><td>Mo</td><td>Tu</td><td>We</td><td>Th</td><td>Fr</td><td>Sa</td></tr>"; $days=cal_days_in_month(CAL_GREGORIAN, $month, $year); $jd=GregorianToJD($month,1, $year); $first_day=jddayofweek($jd,0); for($i=0;$i<$days+$first_day;$i++){ $j=$i+1; if($j%7==1) $temp.="<tr>"; if($i>=$first_day){ $t=$i-$first_day+1; if($t==date('d')) $temp.="<td class='cur'>$t</td>"; else $temp.="<td>$t</td>"; } else $temp.="<td> </td>"; if($j%7==0) $temp.="</tr>"; } $temp.="</tbody>"; $temp.="</table>"; return $temp; } |
- We display a <tr> in the beginning which is decided by if($j%7==1).
- Similarly, we display a </tr> at the end of every row.
- We display the date as the variable proceeds if the counter is greater than/equal to the first day(obviously) and an empty cell if the counter is less than the first day. We give a class of cur to the td element if the date is today
DEMO
Su | Mo | Tu | We | Th | Fr | Sa |
1 | 2 | 3 | 4 | 5 | ||
6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 | 29 | 30 | 31 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
#calendar{ background:#4E4E4E; padding: 10px; display: inline-block; border-radius: 11px; border-collapse: separate; border-spacing: 10px 5px; } #calendar td{ padding: 5px; border-radius: 5px; cursor: pointer; color:white; font-family:calibri,verdana; } #calendar td:hover,#calendar td.cur{ background:#C09231; } |
DEMO
Su | Mo | Tu | We | Th | Fr | Sa |
1 | 2 | 3 | 4 | 5 | ||
6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 | 29 | 30 | 31 |
Download the Calendar Script
DownloadExtending this project
Firstly, this is barely a script let alone be a project. That said, a lot can be done to improve this script and a lot is already wrong with this. For example: The line that checks for the current date only checks the date and not month/year, so if you request a calendar for the previous month, it will still output the current date in bold. Sometimes you don’t want that.- We can add navigation to this so that we can easily navigate to the previous/next months/years.
- Using javascript the calendar can be made very interactive by adding notes, to-dos etc.
- We can make this a lot neater.
If you have any suggestions you are most welcome to share via comments/email.
Follow Us