From there, head over to Appearance \u2192 Widgets from the WordPress dashboard. You’re looking for a widget called Events Calendar.<\/em><\/strong> Click on the “+” button\/”Add Block,” and then search for the widget. Careful, because this could be easily confused with the Calendar<\/strong> widget, which is packaged with WordPress and not related to The Events Calendar at all.<\/p>\n\n\n\n See the Events Calendar widget? Drag it over to the sidebar widget area of your choice, then save your settings.<\/p>\n\n\n\n There we have it. Now we can go to the front end of our website and see the Mini Calendar in all its mini and mighty glory.<\/p>\n\n\n\n First thing you might notice when adding the widget to the sidebar is that there are a few options that allow us to customize things a bit. These are the available options:<\/p>\n\n\n\n When using the Block Editor, you can add the Mini Calendar as a block instead. Simply search for Mini Calendar under blocks and you’ll find all of the same available options.<\/p>\n\n\n\n Another awesome thing about the Events Calendar widget is that it can be embedded on any page or post outside<\/em> of the sidebar. In other words, we can place it anywhere we want!<\/p>\n\n\n\n Embedding the widget can be as easy as pasting this shortcode into any page or post:<\/p>\n\n\n\n Of course, the calendar widget also comes complete with an advanced set of filtering options, and these can also be used with the shortcode. Here’s an example that looks for events in the party<\/em> category:<\/p>\n\n\n We can supply a list of several categories or tag slugs (we just need to separate them with commas), and we can also use IDs by prefixing them with the #<\/strong> symbol:<\/p>\n\n\n Note how we used categories<\/em> (plural), there. Singular and plural forms are interchangeable – and the same goes for tags. Last but not least, we can use the count attribute to control how many events are listed below the mini calendar:<\/p>\n\n\n You can also add a tax-operand attribute to the calendar so that multiple categories or tags can display at once:<\/p>\n\n\n Note: <\/strong>You can also embed the regular calendar Month View with the shortcode [tribe_events view=\u201cmonth\u201d]<\/p>\n\n\n\n Sometimes the calendar widget is larger than your sidebars. Commonly this is because the theme\u2019s stylesheet has added padding to all table cells. This can be countered by adding a rule that strips that padding back out of our mini calendar grids specifically. <\/p>\n\n\n If you find that the mini calendar grids are still too big on iPad sized screens and would like to shrink it, you can reduce the font size with this:<\/p>\n\n\n That will target the mini calendar grids font size after the screen size of the viewing device is below 850px in width. You can change that number to whatever size you would like. In addition, you may have to add more selectors to that CSS to get it to work with your theme.<\/p>\n\n\n\n <\/p>\n\n\n\n You can apply custom CSS to the Events Calendar widget. The widget’s styles are loaded from For guidance on where to add custom CSS and how widget stylesheets work, see our Customizing CSS<\/a> guide.<\/p>\n\n\n\n The Events Calendar Widget will take styles from the main calendar Month View, so any template changes that you make to the Month View will impact the widget as well.<\/p>\n\n\n\n If you’d like to make changes, you can create a template override of the corresponding Month View template<\/a>.<\/p>\n<\/div><\/div>\n\n\n\n The ‘View Calendar’ link in the Events Calendar widget defaults to the main events archive page set under Events > Settings > General > Viewing. By default, this is the If you have created a custom page to display your calendar using a shortcode, or if you’ve simply changed the main calendar slug, you’ll need to update this link to point to your new URL.<\/p>\n\n\n\n This guide provides a simple code snippet to update the destination URL for the ‘View Calendar’ link in the Events Calendar widget.<\/p>\n\n\n\n This snippet uses jQuery to select the ‘View More’ link in the Events Calendar widget ( Replace the URL:<\/strong> Change the dummy URL Add the snippet:<\/strong><\/p>\n\n\n\n Clear any site cache (plugin, server, or CDN) to ensure the new code is loaded on the front end.<\/p>\n\n\n\n For more information, please see our guide on the best practices for implementing custom code snippets<\/a>.<\/p>\n\n\n\n This approach is simpler than overriding the widget’s template file<\/a>, and ensures the ‘View Calendar’ link points to your custom URL.<\/p>\n\n\n\n You can completely disable the link using a PHP snippet. Add the following code to your theme’s This method removes the link from the HTML entirely, so it won\u2019t be rendered on the frontend. <\/p>\n\n\n\n If you’d rather keep the markup and just visually hide the link, you can use this CSS snippet instead. Use this method if you prefer a non-invasive method that only affects the visual display.<\/p>\n\n\n\n You can add the CSS code in one of the following ways:<\/p>\n\n\n\n Let’s say we have placed the Events Calendar widget in the sidebar of a page. We can expect to see a lot of information about our events, including the dates, times, location, and more, depending on our widget settings.<\/p>\n\n\n\n That’s nice and dandy, but what if we want to include a little more information about our events? Specifically, let’s find a way to add the event’s excerpt below the dates.<\/p>\n\n\n\n The key here is that we can use the default WordPress function for the_excerpt()<\/a> to display content from the event directly in the widget. For this use case, we will be changing the mobile view templates, so please note that this will affect the widget and<\/em> the mobile month view of your calendar. <\/p>\n\n\n\n This will require a template override. If you’re new to overriding calendar templates, then it’s a good idea to check out our Themer’s Guide<\/a>, which will walk you through the process step-by-step. The basic idea is that we will be creating a copy of one of the plugin’s templates, then adding it to our theme files. This allows us to override the template without touching the core code of the plugin.<\/p>\n\n\n\n Presto! Now that the template is in our theme directory, we can modify to suit our needs. In this case, we will add this:<\/p>\n\n\n\n …right below the single event cost. As of this writing, that is after Line 30 of the template.<\/p>\n\n\n\n Note – we have added some italics, but you can style this however you see fit. Now, we can save our work, head back to our widget and see the event’s excerpt displays with the rest of the event’s information. Nice work!<\/p>\n\n\n\n If you use a Mini Calendar Widget on your site then on the first-page load it will show you the number of events from the month that you set up in the back-end. If you set up 5 events and there are less than that on the current day, it will show you events from the coming days as well.<\/p>\n\n\n\n If you click on a specific date in the calendar, then you will only see the events for that day.<\/p>\n\n\n\n If you would like to show only today’s events on the first-page load as well, then the below snippet will help you.<\/p>\n\n\n\n Copy the below code into your (child) theme’s functions.php<\/em> file (or wherever you usually put custom code).<\/p>\n\n\n Sometimes the next month’s first few days appear on the Mini Calendar View calendar, depending on how each month is structured. If you’d like, you can remove these dates by adding a PHP snippet on your site and then using custom CSS added to your theme’s stylesheet. We’ll provide you with the snippets you need to make this happen.<\/p>\n\n\n\n![\"\"](\"https:\/\/images.theeventscalendar.com\/kb\/uploads\/2021\/05\/calendar-widget-1.gif\")
<\/figure>\n\n\n\n![\"\"](\"https:\/\/images.theeventscalendar.com\/kb\/uploads\/2021\/04\/Screen-Shot-2021-04-29-at-9.42.57-AM.png\")
<\/figure>\n\n\n\nWidget Settings<\/h2>\n\n\n\n
\n
Widget Block<\/h2>\n\n\n\n
![\"Mini](\"https:\/\/images.theeventscalendar.com\/kb\/uploads\/2021\/11\/Screen-Shot-2021-11-15-at-2.36.01-PM.png\")
<\/figure>\n\n\n\nEmbedding the Widget via Shortcode<\/h2>\n\n\n\n
[tribe_mini_calendar]<\/pre>\n\n\n\n
\n[tribe_mini_calendar category="party"]\n<\/pre><\/div>\n\n\n
\n[tribe_mini_calendar categories="party, black-tie" tag="#512"]\n<\/pre><\/div>\n\n\n
\n[tribe_mini_calendar count="15"]\n<\/pre><\/div>\n\n\n
\n[tribe_mini_calendar tags="cabbage, broccoli" tax-operand="AND"]\n<\/pre><\/div>\n\n\n
Troubleshoot the Calendar Widget<\/h2>\n\n\n\n
The Calendar Widget Overflows a Sidebar<\/h3>\n\n\n\n
\n.tribe-mini-calendar td,\n.tribe-mini-calendar th {\npadding: 0;\n}\n<\/pre><\/div>\n\n\n\n@media (max-width: 850px) {\n.tribe-mini-calendar {\nfont-size: 10px;\n}\n}\n<\/pre><\/div>\n\n\nCustomizing the Widget<\/h2>\n\n\n\n
Styling with CSS<\/h3>\n\n\n\n
widget-shortcode-skeleton.css<\/code> (or widget-shortcode-full.css<\/code> if you’re loading the full stylesheet). To target the widget with your own CSS rules, use the base class:<\/p>\n\n\n\n.tribe-events-widget-shortcode-events-month {\n \/* your styles here *\/\n}\n<\/pre><\/div>\n\n\nUsing Calendar Views<\/h3>\n\n\n\n
Change the ‘View Calendar’ Link<\/h3>\n\n\n\n
\/events\/<\/code> slug.<\/p>\n\n\n\n.tribe-events-widget-events-month__view-more<\/code>) and updates its href<\/code> attribute to a custom URL.<\/p>\n\n\n\nadd_action( 'wp_footer', function() {\n?>\n<script>\njQuery(document).ready(function($) {\n \/\/ Replace 'https:\/\/example.com\/new-page\/' with your desired custom URL\n var customCalendarUrl = 'https:\/\/example.com\/new-page\/';\n\n \/\/ Target the 'View Calendar' link in the Events Calendar widget\n $('.tribe-events-widget-events-month__view-more a')\n .attr('href', customCalendarUrl);\n});\n<\/script>\n<?php\n} );\n<\/pre><\/div>\n\n\nHow to Use the Code<\/h4>\n\n\n\n
'https:\/\/example.com\/new-page\/'<\/code> to the exact URL of your custom calendar page.<\/p>\n\n\n\n\n
functions.php<\/code><\/strong> file.<\/li>\n\n\n\nHide the \u201cView Calendar\u201d Link<\/h3>\n\n\n\n
functions.php<\/code> file or through a plugin like Code Snippets<\/a><\/strong>. Using this method if you want to remove the link from the DOM entirely (cleaner code output).<\/p>\n\n\n\nadd_filter( 'tribe_template_pre_html:events-pro\/v2\/widgets\/shortcodes\/components\/view-more', '__return_false' )<\/code><\/pre>\n\n\n\n.tribe-events-widget-events-month__view-more {display: none !important;}<\/code><\/pre>\n\n\n\n\n
style.css<\/code> file<\/li>\n\n\n\nShow Event Content in the Widget<\/h3>\n\n\n\n
The Scenario<\/h4>\n\n\n\n
Before:<\/h4>\n\n\n\n
![\"\"](\"https:\/\/images.theeventscalendar.com\/kb\/uploads\/2019\/10\/CleanShot-2024-10-23-at-12.51.54@2x-673x1024.png\")
<\/figure>\n<\/div>\n\n\n\nAfter: <\/h4>\n\n\n\n
![\"\"](\"https:\/\/images.theeventscalendar.com\/kb\/uploads\/2019\/10\/CleanShot-2024-10-23-at-12.53.58@2x-652x1024.png\")
<\/figure>\n<\/div>\n<\/div>\n\n\n\nHow it’s Done<\/h4>\n\n\n\n
\n
plugins\/the-events-calendar\/src\/views\/v2\/month\/mobile-events\/mobile-day\/mobile-event.php<\/code>.<\/li>\n\n\n\n<?php the_excerpt(); ?><\/code><\/pre>\n\n\n\n![\"\"](\"https:\/\/images.theeventscalendar.com\/kb\/uploads\/2019\/10\/CleanShot-2024-10-23-at-13.06.14-1024x226.png\")
<\/figure>\n\n\n\nShow Today’s Events<\/h3>\n\n\n\n
\nadd_action( 'pre_get_posts', 'tribe_andras_custom_mini_calendar_starting_query' );\n\nfunction tribe_andras_custom_mini_calendar_starting_query( $query ) {\n\n\t$is_widget = $query->get( 'is_tribe_widget' );\n\t$event_display = $query->get( 'eventDisplay' );\n\n\tif ( $is_widget && $event_display == 'custom' ) {\n\t\t$query->set( 'eventDisplay', 'day' );\n\t}\n}\n<\/pre><\/div>\n\n\nRemove Next Month\u2019s Dates from Current Month<\/h3>\n\n\n\n
![\"\"](\"https:\/\/images.theeventscalendar.com\/kb\/uploads\/2024\/08\/mini_month_view.png\")
<\/figure>\n\n\n\n