× {{alert.msg}} Never ask again
Get notified about new tutorials RECEIVE NEW TUTORIALS

How to build yearly calendar with PHP

Walid Ajaj
Oct 13, 2014
<p>We will create a yearly calendar that highlighted the current day.</p><p>Our calendar will be displayed as 4X3 boxes.</p><p>First, we should define some vars that we will use in our code:</p><pre><code class="language-php">$months=array('January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'); $current_month=date('n'); $current_year=date('Y'); $current_day=date('d'); $month=0;</code></pre><p> Now, we will start our table that will contain 4 columns and 3 rows (total 12 months)</p><pre><code class="language-php">echo '&lt;table class="calendar"&gt;'; echo '&lt;th colspan="4" class="year"&gt;'.$current_year.'&lt;/th&gt;'; // Table of months echo '&lt;/table&gt;';</code></pre><p>OK, now we will start building "Table of months", we will loop for the <span style="color:rgb(95, 99, 102); font-family:lato,sans-serif">columns:</span></p><pre><code class="language-php">for ($row=1; $row&lt;=3; $row++) { echo '&lt;tr&gt;'; for ($column=1; $column&lt;=4; $column++) { echo '&lt;td class="month"&gt;'; $month++; // Month Cell echo '&lt;/td&gt;'; } echo '&lt;/tr&gt;'; }</code></pre><p>Inside the second loop (Month Cell), we should start printing the month's calendar, now we should know the total days for that month, and what is the first day in that month:</p><pre><code class="language-php"> $first_day_in_month=date('w',mktime(0,0,0,$month,1,$current_year)); $month_days=date('t',mktime(0,0,0,$month,1,$current_year)); // in PHP, Sunday is the first day in the week with number zero (0) // to make our calendar works we will change this to (7) if ($first_day_in_month==0){ $first_day_in_month=7; }</code></pre><p>Start the table of that month:</p><pre><code class="language-php"> echo '&lt;table&gt;'; echo '&lt;th colspan="7"&gt;'.$months[$month-1].'&lt;/th&gt;'; echo '&lt;tr class="days"&gt;&lt;td&gt;Mo&lt;/td&gt;&lt;td&gt;Tu&lt;/td&gt;&lt;td&gt;We&lt;/td&gt;&lt;td&gt;Th&lt;/td&gt;&lt;td&gt;Fr&lt;/td&gt;'; echo '&lt;td class="sat"&gt;Sa&lt;/td&gt;&lt;td class="sun"&gt;Su&lt;/td&gt;&lt;/tr&gt;'; echo '&lt;tr&gt;';</code></pre><p>Print out blank cells for the days from previous month:</p><pre><code class="language-php"> for($i=1; $i&lt;$first_day_in_month; $i++) { echo '&lt;td&gt; &lt;/td&gt;'; }</code></pre><p>Now we will print out the days of that month, we will give Saturdays and Sundays the "sat' and "sun" classes, also we will give our carrent day (if exists in that month) the "current" class.</p><pre><code class="language-php"> for($day=1; $day&lt;=$month_days; $day++) { $pos=($day+$first_day_in_month-1)%7; $class = (($day==$current_day) &amp;&amp; ($month==$current_month)) ? 'today' : 'day'; $class .= ($pos==6) ? ' sat' : ''; $class .= ($pos==0) ? ' sun' : ''; echo '&lt;td class="'.$class.'"&gt;'.$day.'&lt;/td&gt;'; if ($pos==0) echo '&lt;/tr&gt;&lt;tr&gt;'; }</code></pre><p>Almost done, the last step is to <span style="color:rgb(95, 99, 102); font-family:lato,sans-serif">close the table of that month:</span></p><pre><code class="language-php"> echo '&lt;/tr&gt;'; echo '&lt;/table&gt;';</code></pre><p>That's all, just put all codes together in PHP file and you should have the calendar online.</p><p>You can style the calendar with CSS. I did that and I will share it with you :)</p><pre><code class="language-css">.calendar { width: 700px; } .calendar, .calendar table { border: 0; margin: 0; } .calendar, .calendar table, .calendar td { text-align: center; } .calendar .year{ font-family:Verdana; font-size:18pt; color:#ff9900; } .calendar .month{ width: 25%; vertical-align: top; } .calendar .month table{ font-size:8pt; font-family:Verdana; } .calendar .month th{ text-align: center; font-size:12pt; font-family:Arial; color:#666699; } .calendar .month td{ font-size:8pt; font-family:Verdana; } .calendar .month .days td{ color:#666666; font-weight: bold; } .calendar .month .sat{ color:#0000cc; } .calendar .month .sun{ color:#cc0000; } .calendar .month .today{ background:#ff0000; color: #ffffff; }</code></pre><p> </p>
comments powered by Disqus