How to Add Calendar Widget in WordPress Dashboard using Code?
Tags: wordpress, beginners, tutorial, webdev
Published: 2023-09-26 04:37:45

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](https://wpadminify.com/how-to-add-menu-in-wordpress-admin-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**](https://dev.to/jemeeroy/custom-wordpress-dashboard-widget-16am) 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 ](https://calendar.google.com/calendar/u/0/r/settings?pli=1)and Click on `Add Calendar`, it will expand some new options just click on the `Create New Calendar` option. 


![Create new Calendar Option](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wnkoi4xd647381s58i1d.png)

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


![Add new Calendar Name, Description, and Time Zone](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vyszfmn97cofhrz7a0z1.png)

## 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. 


![Customize Calendar or Embed Code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qpmb936buge2x9nqz9e8.png)

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"`. 

![Width 100% in my calendar embed code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3rb4lt0wn63kkafbcrus.png)

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

![Add Calendar widget in WordPress Dashboard](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/31bgt5v5lhzt9k1onqtg.png)

**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.