|
||||||||||||||
|
||||||||||||||
In this tutorial you will learn how to build your own web based calendar using PHP. This calendar is made from two parts. On top there are the links to the previous and the next month, and below them is the calendar itself. It will show the selected month name with the year following and the days of the month bellow in a table view. You will need a good PHP editor to help you with your development or if you are experienced enough you can use a plain text editing software such as Notepad.
At the begining we have to decide how we are going to pass our parameters. We can use either 'hidden' input fields in out html code or pass them in the URL. In this tutorial we will use the second approach. We are going to need two parameters - one for the "month" and one for the "year". We will also need an array with month names:
First we need to check if we have set up our parameters already. If we have not, we set them to the current month and year. (For detailed explanation of date() function please refer to PHP Manual ).
Lets also set the variables that we are going to use in our calandar:
$prev_month = $cMonth-1;
$next_month = $cMonth+1;
if ($prev_month == 0 ) {
$prev_month = 12;
$prev_year = $cYear - 1;
}
if ($next_month == 13 ) {
$next_month = 1;
$next_year = $cYear + 1;
}
?>
We create a table that will hold our calendar and add the links in one row. Then we add a table in a new row that will hold the days. We also include the month name and the year in the first on the new table. But because arrays are zero based, we need to subtract one from the "month" parameter value to get the correct name.
Now we have to set the proper dates for our calendar. We have to make integer representation of the date so we can easily operate with it. Then we get the number of days of the selected month and the number representation (0 for Sunday through 6 for Saturday) of the first day of the month. All of these functions are fully explained in PHP Manual. Our loop that is going to print the dates starts at 0, because the days of the week start from 0 (Sunday). It has to loop through the number of days plus the offset of the first day of the month. We have to print new row for each week. We check this by modulus of the number of days in one week 7. If it equals 0 then it is the begining of the week and we print open row tag <tr> and if it is the end of the week 6 we print close tag for this week </tr>. All we need to do is to check if the day that we print is before $startday. In this case we print empty tag. Otherwise we have to print the date. We make it by subtracting the $startday. we have to add one because we don't want our dates to start from 0.
for ($i=0; $i<($maxday+$startday); $i++) {
if(($i % 7) == 0 ) echo "<tr>\n";
if($i < $startday) echo "<td></td>\n";
else echo "<td align='center' valign='middle' height='20px'>". ($i - $startday + 1) . "</td>\n";
if(($i % 7) == 6 ) echo "</tr>\n";
}
?>
Now we add just the finishing touches of the html and we have finished the calendar.
You can preview the calendar or download calendar script. Remember that we have some very nice calendars that you can use on your websites - Flash Calendar & Web Calendar
| Comments |
| Jim posted on August 28, 2010, 5:35 am |
| How do you highlight the current day? or maybe offset the time for those in a different TZ JD |
| jeremy posted on August 1, 2010, 9:58 am |
| nice script.very useful.how can you add an event per day? |
| ashish posted on July 28, 2010, 8:42 am |
| how to make this calender compatible if user select month and year then it print particulur month of user request... |
| arvind hathiya posted on July 22, 2010, 12:32 pm |
| this is very excellent calendar |
| babatunde lateef posted on July 16, 2010, 4:42 pm |
| THANKS A LOT, BUT HOW DO I MAKE IT TO DISPLAY CURRENT DATE DATE.(TODAY'S DATE) |
| Dusan posted on July 8, 2010, 1:34 pm |
| Hello Doug, you should change line 61 in this script: else echo "<td align='center' valign='middle' height='20px'>".($i - $startday + 1)."</td>n"; If you want every date to link to the same page then change that line with this one: else echo "<td align='center' valign='middle' height='20px'><a href=somepage.php>".($i - $startday + 1)."</a></td>n"; If you want every page to link to another page then change it with this one: else echo "<td align='center' valign='middle' height='20px'><a href=".$monthNames[$cMonth-1].($i - $startday + 1).".php>".($i - $startday + 1)."</a></td>n"; If you have any more questions ask me on email. DS |
| pido posted on March 21, 2010, 7:33 pm |
| THX for the codes! It really Helps me a lot.. Just Got 1 question. How can i add link to a certain date so that i can post the events on that date.. |
| Adam posted on March 3, 2010, 4:03 pm |
| To make the links clickable I came up with this. Pain in the arse but it works and yet so simple. Don't know if there's a better way of doing it. <?php $timestamp = mktime(0,0,0,$cMonth,1,$cYear); $maxday = date("t",$timestamp); $thismonth = getdate ($timestamp); $startday = $thismonth['wday']; $newdate = date('Y-m-j',$timestamp); $newdate = strtotime ( '-1 day' , strtotime ( $newdate ) ) ; $newdate = date('Y-m-j',$newdate); for ($i=0; $i<($maxday+$startday); $i++) { if(($i % 7) == 0 ) echo "<tr>\n"; if($i < $startday) echo "<td></td>\n"; else { $newdate = strtotime ( '+1 day' , strtotime ( $newdate ) ) ; $newdate = date ( 'Y-m-j' , $newdate ); echo "<td align='center' valign='middle' style='height:20px'>"; echo "<a href='".$newdate."'>".($i - $startday + 1) ."</a>"; echo "</td>\n"; } if(($i % 7) == 6 ) echo "</tr>\n"; } ?> |
| Daniels posted on January 29, 2010, 1:38 pm |
| Script is awesome, but i have one question : how to add link to date |
| SLAYER posted on January 29, 2010, 1:01 pm |
| Thank you! I used this tutorial to make a bookings system for a room rental service. This script was so useful because it's just a basic calendar, so i could extend it myself with all the functions i needed.. THX again! |