How to Add Calendar Widget in WordPress Dashboard using Code?

in this blog post, I will guide you through the process of adding a calendar widget using code inside your WordPress Dashboard. I will use Google Calendar to get the calendar data, you can schedule your tasks & events in Google Calendar and preview them inside your WordPress Dashboard.

Why Add a Calendar Widget?

A calendar widget can be a valuable addition to your WordPress Dashboard for various reasons:

Efficient Scheduling: You can keep track of appointments, content publishing dates, and other important events conveniently.

Improved Productivity: Having a visual representation of your schedule can help you manage your time more effectively.

Customization: You can arrange the calendar widget to display the information that matters most to you.

Before jumping into the steps, I like to notify you that you can create Custom Admin menu in your WordPress Dashboard too.

Now, let's get started with the step-by-step guide on adding a calendar widget to your WordPress dashboard via code. Here I will show you how to create a simple plugin with one file for your Dashboard Calendar Widget.

If you like to use your function.php of your child theme instead of a new plugin, then I recommend you to check this How to create a Custom Dashboard Widget post.

Create a Custom Plugin

Start by creating a new folder in the wp-content/plugins directory of your WordPress installation. Give it a unique name, such as custom-dashboard-calendar.

Create the Plugin File:

Inside the plugin folder, create a PHP file, such as custom-dashboard-calendar.php, or index.php and add the following code:

<?php
/*
Plugin Name: Custom Dashboard Calendar
Description: Adds a calendar widget to the WordPress Dashboard.
Version: 1.0
Author: Your Name or Website 
*/

// Function to display the calendar widget
function custom_dashboard_calendar_widget() {
    // Your calendar HTML code goes here
    echo '<div id="custom-dashboard-calendar">Your Calendar Widget Content</div>';
}

// Function to add the calendar widget to the dashboard
function add_custom_dashboard_calendar_widget() {
    wp_add_dashboard_widget(
        'custom-dashboard-calendar-widget',
        'Custom Calendar',
        'custom_dashboard_calendar_widget'
    );
}

// Hook into the 'wp_dashboard_setup' action to add the widget
add_action('wp_dashboard_setup', 'add_custom_dashboard_calendar_widget');
?>

In this code, we define a plugin that adds a custom dashboard widget. You need to replace 'Your Calendar Widget Content' with your actual calendar HTML content, here I will use Google Calendar embed code.

Create a new Google Calendar

Visit this Google Calender Link and Click on Add Calendar, it will expand some new options just click on the Create New Calendar option.

Now you need to input your Calendar Name, Description, and Time Zone - Then click on the Create Calendar Button.

Caledar Customization and Copy Code

After creating the Calendar, you need to navigate to "Settings for my Calendars" option and select the calendar you just made.

Scroll down until you see "Embed Code" and "Customize Button". Now if you like to customize the Calendar, just click on the customize button or copy your Embed Code.

The embed code will look something like the following code. [I may delete this test calendar and the following embed code will not work for you] Search for Width="800" inside the embed code and replace 800 with 100%.

<iframe src="https://calendar.google.com/calendar/embed?src=2e06b2affc8616787ee4969ac41f99437063d456Fe3bbd0143f8bb39%40group.calendar.google.com&ctz=America%2FNew_York" style="border: 0" width="800" height="600" frameborder="0" scrolling="no"></iframe>

Here I set the width to 100% in my code and past it properly inside my code. You need to put this Google Calendar Iframe inside the code where I mentioned "Your Calendar Widget Content".

Here is the preview of Google Calendar in the WordPress Dashboard Widget.

Note:

• Write proper calendar name, if you like to display this inside your calendar.
• In my code, I used "Custom Calendar" as the Calendar widget name - make sure to replace it with your own.

I hope you got a proper idea of How to add a Calendar in the WordPress Dashboard Widget by creating a simple plugin. If you face any problems, feel free to comment.