How to Display a Calendar in WordPress

WPTurbo » Snippets » How to Display a Calendar in WordPress
0

Created with:

Visibility: 

public

Creator: WPTurbo Team

Customize with WPTurbo AI
X

Add Snippet To Project

New Project
Add To Existing Project

Are you looking to incorporate a calendar into your website? Whether you’re planning to showcase upcoming events, schedule appointments, or simply want to provide a convenient way for users to keep track of dates, having a functional and visually appealing calendar is essential. In this article, we’ll guide you through the process of displaying a calendar on your WordPress website, exploring different options and highlighting the steps to seamlessly integrate it into your web development. Get ready to enhance your user experience with a beautifully designed and highly functional calendar.

					function wpturbo_display_calendar($month, $year) {
    // Get the first day of the month
    $firstDay = mktime(0, 0, 0, $month, 1, $year);
    
    // Get the number of days in the month
    $daysInMonth = date("t", $firstDay);
    
    // Start the calendar table
    $html = '<table>';
    $html .= '<thead>';
    $html .= '<tr>';
    $html .= '<th>Sun</th>';
    $html .= '<th>Mon</th>';
    $html .= '<th>Tue</th>';
    $html .= '<th>Wed</th>';
    $html .= '<th>Thu</th>';
    $html .= '<th>Fri</th>';
    $html .= '<th>Sat</th>';
    $html .= '</tr>';
    $html .= '</thead>';
    $html .= '<tbody>';
    
    // Start counting days from the first day of the month
    $dayCount = date("w", $firstDay);
    
    // Loop through the days of the month
    for ($day = 1; $day <= $daysInMonth; $day++) {
        // If it's the first day of the week, start a new row
        if ($dayCount == 0) {
            $html .= '<tr>';
        }
        
        // Add the day to the calendar
        $html .= '<td>' . $day . '</td>';
        
        // If it's the last day of the week, end the row
        if ($dayCount == 6) {
            $html .= '</tr>';
        }
        
        // Move to the next day and day of the week
        $day++;
        $dayCount++;
        $dayCount = $dayCount % 7;
    }
    
    // Close the table and return the calendar
    $html .= '</tbody>';
    $html .= '</table>';
    
    return $html;
}

echo wpturbo_display_calendar(9, 2021);
				

The code snippet above defines a function called wpturbo_display_calendar() that generates an HTML calendar for a given month and year. In this section, I will explain how the code works step by step.

First, the function takes two parameters: $month and $year. These parameters represent the desired month and year for the calendar.

The snippet starts by using the mktime() function to calculate the timestamp for the first day of the month. The mktime() function takes the hour, minute, second, month, day, and year as parameters, and it returns the timestamp for that specific date and time. In this case, we set the hour, minute, and second to 0 to indicate the beginning of the day.

Next, the snippet uses the date() function with the "t" format option to get the number of days in the month. The "t" option returns the number of days in the specified month, given the timestamp provided.

Afterwards, the snippet initializes the variable $html with an opening <table> tag and the table head section. The table head contains a row with the abbreviated names of the days of the week.

The snippet then continues by opening the table body section with the <tbody> tag.

To start filling in the calendar, the snippet uses a loop that iterates from 1 to the total number of days in the month ($daysInMonth). Inside the loop, it checks if the current day is the first day of the week ($dayCount == 0). If it is, a new row is started with the <tr> tag.

The snippet then adds a table cell (<td>) with the current day of the month ($day) to the calendar.

Next, it checks if the current day is the last day of the week ($dayCount == 6). If it is, the row is closed with the </tr> tag.

After each iteration, the variables $day and $dayCount are incremented to move to the next day and day of the week, respectively. The line $dayCount = $dayCount % 7 ensures that $dayCount stays within the range of 0-6, representing the days of the week (Sunday to Saturday).

Once the loop finishes, the snippet appends the closing tags </tbody> and </table> to complete the HTML structure of the calendar.

Finally, the function returns the generated calendar as an HTML string.

To generate and display the calendar for a specific month and year, the snippet uses the echo statement with the function call echo wpturbo_display_calendar(9, 2021). This will output the HTML code of the calendar for September 2021. You can change the values 9 and 2021 to generate the calendar for a different month and year.

By using this code snippet, you can easily generate a customizable calendar for any month and year in your WordPress website or application.

Register an account to save your snippets or go Pro to get more features.