You can use this widget to display your calendar on pages other than your default events page. Drag that little guy into the sidebar area of your choice, and you’re off to the races!<\/p>\n\n\n\n There are three settings that help customize the Events List widget experience. Let’s take a look at them:<\/p>\n\n\n\n When using the Block Editor, you can add the Events List as a block instead. Simply search for Events List under blocks, and you’ll find all of the same available options.<\/p>\n\n\n\n It’s important to bear in mind that the Events List widget in The Events Calendar Pro<\/a> is the same widget that comes with the core version of The Events Calendar. If you have Pro, you’ll see the same Events List widget under Appearance > Widgets<\/strong>. In your frontend the Widget will have the same appearance; the only difference is that you have some more filtering options available to set up this.<\/p>\n\n\n\n As you can see, there are more configurable options when setting up the Pro widget. Add the widget to the sidebar the same way as described above, and now you’ll see more options. In addition to the same three options in the basic widget, Pro introduces these settings:<\/p>\n\n\n\n Please note that all that settings are responsible only for properly loading events from your database. They don’t add or remove any visual information in the Widget!<\/p>\n\n\n\n Phew, that’s a lot of stuff! You really have a lot of options here to customize the widget’s content without touching a line of code, and that’s awesome.<\/p>\n\n\n\n We actually have another tutorial<\/a> that provides a specific example of how to customize the Events List widget, as well as a guide to the stylesheets and classes<\/a> used in our widgets.<\/p>\n\n\n\n The template for the core Events List widget can be found at: Now that the template is in the theme, you can modify it to your liking. For example, you can customize the notice for when there are no upcoming events by changing this line:<\/p>\n\n\n …to something like:<\/p>\n\n\n The process for customizing the widget in Events Calendar Pro is very similar. Actually both Free and Pro version of The Events Calendar uses the same file to displays the widget. The main difference here is that Pro version gives you more filtering options in WordPress dashboard.<\/p>\n\n\n\n As you may have noticed, there isn’t an option to hide the end date\/time. If you need to do so, the following code snippet will help you achieve that. Be sure to check out our snippet guide<\/a> for information on how to apply the code snippet to your site.<\/p>\n\n\n![\"\"](\"https:\/\/images.theeventscalendar.com\/kb\/uploads\/2019\/10\/events-list-free-1024x488.png\")
<\/figure>\n\n\n\nEvents Widget Settings<\/h2>\n\n\n\n
\n
Block Editor Widget<\/h2>\n\n\n\n
![\"Events](\"https:\/\/images.theeventscalendar.com\/kb\/uploads\/2021\/11\/Screen-Shot-2021-11-15-at-2.22.23-PM.png\")
<\/figure>\n\n\n\nConfiguring the Pro Version<\/h2>\n\n\n\n
![\"Event](\"\/knowledgebase\/wp-content\/uploads\/2020\/12\/the-events-calendar-event-list-widget.png\")
<\/figure>\n\n\n\n![\"\"](\"https:\/\/images.theeventscalendar.com\/kb\/uploads\/2019\/10\/sidebar-events-list-1024x624.png\")
<\/figure>\n\n\n\n\n
\n
Theming the Widget<\/h2>\n\n\n\n
Using Calendar Views<\/h3>\n\n\n\n
\/plugins\/the-events-calendar\/src\/views\/v2\/widgets\/widget-events-list.php<\/code>. This single file contains all the content and functionality for the widget. To override it, make a copy of it, then:<\/p>\n\n\n\n\n
\n<?php $this->template( 'components\/messages' ); ?>\n<\/pre><\/div>\n\n\n
\n <p> No events here. Holla! <\/p>\n<\/pre><\/div>\n\n\n
Remove the end date\/time from the widget<\/h3>\n\n\n\n
\nadd_filter ( 'tribe_events_event_short_schedule_details', function ( $schedule ) {\n\t$dash_position = strpos( $schedule, '> - ' );\n\t$schedule = substr( $schedule, 0, $dash_position );\n\treturn $schedule;\n} );\n<\/pre><\/div>\n\n\nWrapping Up<\/h3>\n\n\n\n