Post
Ask Question

How to Build a Calendar in PHP?

In this article, we will guide you through the process of creating an aesthetically pleasing calendar using PHP and HTML. This calendar not only presents the days of the month but also emphasizes particular days, offering a useful and visually appealing feature. Our approach involves using HTML, CSS (for styling), and PHP for functionality.

CSS Styles

The styling of our calendar forms its foundation. We employ CSS to define the appearance of the table, headers, cells, and links. The selected colors and fonts contribute to a clean and easily readable design.

PHP Logic

The PHP script commences by fetching the current date through the getdate() function. We extract essential details such as the day, month, year, and weekday. To aid in organizing weekdays, we define constants for Sunday and Saturday.

Calendar Structure

Our calendar follows a table format, where rows represent weekdays and cells denote individual days. An array is initialized to store the weekdays for each day of the month.

Highlighting Days

A notable feature of our calendar is the ability to highlight specific days. This is achieved by defining an array of days to highlight and specifying a color for highlighting. The current day is distinguished with a unique color, enabling users to easily identify today's date.

Let's code it and then go through the code.

<table border='0' >
<?php 

// Define constants or variables for values that may change later

define("SUNDAY", 0);
define("SATURDAY", 6);
$daysToHighlight = array(3,4,10,11,17,18,24,25);
$highlightColor = "bg-green";
$currentDayColor = "bg-blue";

// Get the current date
$date = getdate();

// Get the value of day, month, year
$currentDay = $date['mday'];
$currentMonth = $date['mon'];
$currentWeekday = $date['wday'];
$month = $date['month'];
$year = $date['year'];

// Create an array to store the weekdays of each day in the current month
$days = array();

// Loop backwards from the current day to the first day of the month
// and assign the corresponding weekday to each day
$dayCount = $currentWeekday;
$day = $currentDay;

while($day > 0) {
	$days[$day--] = $dayCount--;
	if($dayCount < SUNDAY)
		$dayCount = SATURDAY;
}

// Loop forward from the current day to the last day of the month
// and assign the corresponding weekday to each day
$dayCount = $currentWeekday;
$day = $currentDay;

// Use the checkdate() function to determine the number of days in the current month
$lastDay = date("t", mktime(0, 0, 0, $currentMonth, 1, $year));

while($day <= $lastDay) {
	$days[$day++] = $dayCount++;
	if($dayCount > SATURDAY)
		$dayCount = SUNDAY;
}	

// Display the calendar header with the month and year
echo("<tr>");
echo("<th colspan='7' align='center'>$month $year</th>");
echo("</tr>");

// Display the calendar weekdays with different colors
echo("<tr>");
	echo("<td class='red bg-yellow'>Sun</td>");
	echo("<td class='bg-yellow'>Mon</td>");
	echo("<td class='bg-yellow'>Tue</td>");
	echo("<td class='bg-yellow'>Wed</td>");
	echo("<td class='bg-yellow'>Thu</td>");
	echo("<td class='bg-yellow'>Fri</td>");
	echo("<td class='bg-yellow'>Sat</td>");
echo("</tr>");

// Display the calendar days with different colors and links
$startDay = 0;
$d = $days[1];

echo("<tr>");
// Fill the empty cells before the first day of the month
while($startDay < $d) {
	echo("<td></td>");
	$startDay++;
}

// Use a function to generate the HTML code for each day cell
function displayDayCell($day, $currentDay, $daysToHighlight, $highlightColor, $currentDayColor) {
	// Check if the day is in the highlight array
	if (in_array($day, $daysToHighlight))
		$bg = $highlightColor;
	else
		$bg = "bg-white";
	// Check if the day is the current day
	if($day == $currentDay)
		echo("<td class='$currentDayColor'><a href='#' title='Detail of day'>$day</a></td>");
	else 
		echo("<td class='$bg'><a href='#' title='Detail of day'>$day</a></td>");
}

// Loop through the days of the month and display them
for ($d=1;$d<=$lastDay;$d++) {
	displayDayCell($d, $currentDay, $daysToHighlight, $highlightColor, $currentDayColor);
	$startDay++;
	// Start a new row after Saturday
	if($startDay > SATURDAY && $d < $lastDay){
		$startDay = 0;
		echo("</tr>");
		echo("<tr>");
	}
}
echo("</tr>");
?>
</table>

To enhance its appearance, simply include this CSS code before the table tag.

<style type="text/css">
	table  {
		border:1px solid #aaa;
		border-collapse:collapse;
		background-color:#fff;
		font-family: Verdana;
		font-size:12px;
	}
	
	th {
		background-color:#777;
		color:#fff;
		height:32px;
	}
	
	td {
		border:1px solid #ccc;
		height:32px;
		width:32px;
		text-align:center;
	}
	
	td.red {
		color:red;
	}
	
	td.bg-yellow {
		background-color:#ffffe0;
	}
	
	td.bg-orange {
		background-color:#ffa500;
	}
	
	td.bg-green {
		background-color:#90ee90;
	}
	
	td.bg-white {
		background-color:#fff;
	}
	
	td.bg-blue {
		background-color:#add8e6;
	}
	
	a {
		color: #333;
		text-decoration:none;
		
	}
</style>

Output

Calander using PHP

Let's go through the above code

The above PHP code generates a visually appealing calendar that highlights specific days, making it easy to identify them. Let's break down the code into simpler terms:

Constants and Variables

  • "SUNDAY" and "SATURDAY" are constants representing the weekdays.
  • "daysToHighlight" is an array containing specific days to be highlighted.
  • "highlightColor" and "currentDayColor" are strings defining the background colors for highlighted days.

Current Date

  • The "getdate()" function retrieves the current date and stores it in the "$date" variable.
  • Important details like the current day, month, weekday, month name, and year are extracted.

Array for Weekdays

  • An array called "$days" is created to store the weekdays for each day in the current month.

Assigning Weekdays

  • The code loops backward from the current day to the first day of the month, assigning weekdays to each day and storing them in the "$days" array.
  •  Another loop goes forward from the current day to the last day of the month, completing the assignment of weekdays.

Calendar Header and Weekdays

  • The code echoes HTML code to display the calendar header with the month and year.
  • Weekdays are displayed in a row, each with a different background color.

Displaying Days

  • The calendar days are displayed in a grid, starting with empty cells before the first day of the month.
  • A function called "displayDayCell" generates HTML code for each day cell, considering whether the day should be highlighted or is the current day.

Function for Day Cell

  • The "displayDayCell" function checks if the day is in the array of days to highlight. If yes, it uses the specified highlight color; otherwise, it uses a default background color.
  • If the day is the current day, it uses a different background color to make it stand out.

Looping Through Days

  • The code then loops through the days of the month, invoking the "displayDayCell" function for each day.
  • It starts a new row after Saturday to maintain the structure of the calendar.

Conclusion

Creating a calendar in PHP is a simple yet effective way to display and highlight days, providing users with a functional and visually appealing tool. By combining HTML for structure, CSS for styling, and PHP for logic, we've outlined a straightforward process. CSS allows us to define the calendar's appearance, making it clean and easily readable. Meanwhile, PHP logic enables us to fetch the current date, organize weekdays, and structure the calendar in a table format. The calendar's key feature is the ability to highlight specific days, enhancing its usability. By employing an array to store weekdays and assigning distinct colors, we've made it easy for users to identify today's date. By following these steps, you can build a practical and visually pleasing calendar that serves its purpose without unnecessary complexities. This approach ensures that your calendar remains user-friendly and accessible to all. Happy coding!


Similar Articles