{"id":1896458,"date":"2019-10-18T13:19:09","date_gmt":"2019-10-18T17:19:09","guid":{"rendered":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/events-calendar-widgets-2\/"},"modified":"2024-06-12T15:26:48","modified_gmt":"2024-06-12T19:26:48","slug":"events-calendar-widgets","status":"publish","type":"post","link":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/events-calendar-widgets\/","title":{"rendered":"Overview of Calendar Widgets"},"content":{"rendered":"\n<iframe loading=\"lazy\" width=\"560\" height=\"315\" src=\"https:\/\/www.youtube.com\/embed\/Jz_cTVijQfw\" title=\"YouTube video player\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" allowfullscreen><\/iframe>\n\n\n\n<p><p>Starting with WordPress 5.8, Widgets in WordPress are converted into Blocks. This is part of a transition from traditional WordPress and the future. Depending on the theme, Widgets that are converted into Blocks are able to exist outside of the sidebar. For the purpose of this guide, we&#8217;ll stick to using and configuring Widgets\/Blocks in the Sidebar.<\/p> <p><img loading=\"lazy\" decoding=\"async\" width=\"1022\" height=\"949\" class=\"size-full wp-image-1955526 aligncenter\" src=\"https:\/\/images.theeventscalendar.com\/kb\/uploads\/2019\/10\/WidgetsConvertedToBlocks.png\" alt=\"A modal popup that explains why Widgets are being converted into blocks\" srcset=\"https:\/\/images.theeventscalendar.com\/kb\/uploads\/2019\/10\/WidgetsConvertedToBlocks.png 1022w, https:\/\/images.theeventscalendar.com\/kb\/uploads\/2019\/10\/WidgetsConvertedToBlocks-300x279.png 300w, https:\/\/images.theeventscalendar.com\/kb\/uploads\/2019\/10\/WidgetsConvertedToBlocks-768x713.png 768w\" sizes=\"auto, (max-width: 1022px) 100vw, 1022px\" \/><\/p> <p>You&#8217;ll find events calendar widgets available in both The Events Calendar and Events Calendar Pro. Browse to the <strong>Appearance \u2192 Widgets<\/strong> screen in wp-admin to access and configure them. You can use each widget as many times as you&#8217;d like.<\/p><\/p>\n\n\n\n<p class=\"has-text-color has-background\" style=\"color:#141827;background-color:var(--global-palette8)\">\ud83d\udca1 <strong>Note:<\/strong> These <a href=\"https:\/\/staging.theeventscalendar.com\/knowledgebase\/tag\/widgets\/\">detailed tutorials<\/a> will&nbsp;walk you through the settings of individual widgets.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"tec\">The Events Calendar Widgets<\/h2>\n\n\n\n<p>The Events Calendar (free version) comes with a core widget: <a href=\"https:\/\/staging.theeventscalendar.com\/knowledgebase\/k\/configuring-the-event-list-widget\/\"><strong>Events List<\/strong><\/a>\u00a0widget. You can use this widget to display your calendar on pages other than your default events page.<br><br>You can customize the widget with a unique title and choose to show anywhere from 1-10 events. There&#8217;s also an option to show the widget only when events are present, which hides the widget if there are no upcoming events. The widget displays the event title (with a link) as well as the date and time.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"\/knowledgebase\/wp-content\/uploads\/2020\/12\/the-events-calendar-event-list-widget.png\" alt=\"\" class=\"wp-image-1948528\"\/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Events Calendar Pro widgets<\/h2>\n\n\n\n<p>These widgets are exclusive to the Events Calendar Pro. They are highly customizable both in the widget settings and via CSS modifications. With a bit of code, you can style these widgets to fit your theme.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"ecp\">Events Calendar Widget<\/h3>\n\n\n\n<p>The&nbsp;<a href=\"https:\/\/staging.theeventscalendar.com\/knowledgebase\/k\/configuring-the-calendar-widget\/\"><strong>Events Calendar widget<\/strong><\/a>&nbsp;creates a mini-grid calendar in your sidebar. Days with events are darker and show a dot. The current month is clearly labeled in the widget&#8217;s header. &nbsp;Readers can view events in the future or past months using the AJAX navigation at the top of the calendar.<\/p>\n\n\n\n<p>You can choose how many events to list below the calendar (if any). Users can click on days with events to update the list with that day&#8217;s events. The listed events are linked to the individual event pages. If you choose to show no listed events, the calendar date will link to a Day View showing those events.&nbsp;If you do not enter a title on the widget admin page, none will appear when viewing the widget on the frontend.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/images.theeventscalendar.com\/kb\/uploads\/2021\/04\/Screen-Shot-2021-04-29-at-9.42.57-AM.png\" alt=\"\" class=\"wp-image-1949585\"\/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"list\">Events List Widget<\/h3>\n\n\n\n<p>The Events Calendar and Events Calendar Pro both include The&nbsp;<a href=\"https:\/\/staging.theeventscalendar.com\/knowledgebase\/k\/configuring-the-event-list-widget\/\"><strong>Events List widget<\/strong><\/a>.&nbsp; Additional features are available to Events Calendar Pro users. &nbsp;All of the same options as the basic Events List Widget are included. &nbsp;With Events Calendar Pro, you can also use category-specific filtering to display events from one category.<\/p>\n\n\n\n<p>It also gives site administrators more flexibility regarding what displays and what doesn&#8217;t on the frontend. With 10 display check boxes that can be turned on\/off at a moment&#8217;s notice, you control how much &#8212; or how little &#8212; information about the event is seen in the widget.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"\/knowledgebase\/wp-content\/uploads\/2020\/12\/the-events-calendar-event-list-widget.png\" alt=\"\" class=\"wp-image-1948528\"\/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"week\">Events By Week Widget<\/h3>\n\n\n\n<p>You can display events happening this week with the <a href=\"https:\/\/staging.theeventscalendar.com\/knowledgebase\/k\/configuring-the-this-week-widget\/\">Events By Week<\/a> widget. You can display the events happening during the current week in horizontal or vertical layouts. &nbsp;&nbsp;The widget can show up to 10 events per day.<\/p>\n\n\n\n<p>Also, it incorporates a category-specific filter that allows you to pull from one given category instead of the full events list.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/images.theeventscalendar.com\/kb\/uploads\/2021\/04\/Screen-Shot-2021-04-29-at-9.54.39-AM.png\" alt=\"\" class=\"wp-image-1949589\"\/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/images.theeventscalendar.com\/kb\/uploads\/2021\/04\/Screen-Shot-2021-04-29-at-9.55.49-AM.png\" alt=\"\" class=\"wp-image-1949590\"\/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"countdown\">Events Countdown Widget<\/h3>\n\n\n\n<p>You can use the <a href=\"https:\/\/staging.theeventscalendar.com\/knowledgebase\/configuring-the-events-countdown-widget\/\"><strong>Events&nbsp;Countdown widget<\/strong><\/a>&nbsp;to count the days until a special event. Select an event to showcase and the widgets shows a countdown in your sidebar. You control the title, time increments, and what message to display when the start time of the event is reached.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"\/knowledgebase\/wp-content\/uploads\/2021\/01\/Screen-Shot-2021-01-28-at-11.11.10-AM.png\" alt=\"\" class=\"wp-image-1948998\"\/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"venue\">Featured Venue Widget<\/h3>\n\n\n\n<p>You can show a list of events from one venue using the&nbsp;<a href=\"https:\/\/staging.theeventscalendar.com\/knowledgebase\/k\/configuring-the-featured-venue-widget\/\"><strong>Featured Venue widget<\/strong><\/a>&nbsp;which displays the upcoming events for a particular venue. You can edit the title and chose how many events to show. Also, you can opt to have the widget not show if there are no upcoming events.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"\/knowledgebase\/wp-content\/uploads\/2021\/02\/Screen-Shot-2021-02-24-at-5.56.12-PM-1.png\" alt=\"\" class=\"wp-image-1949274\"\/><\/figure>\n\n\n\n<p>If you want to customize any of the events widgets, check out the&nbsp;Customizing section of the Knowledgebase and in particular <a href=\"https:\/\/staging.theeventscalendar.com\/knowledgebase\/k\/styling-events-widgets\/\">our article on styling widgets<\/a>. If you need further help, you can always head to&nbsp;our <a href=\"https:\/\/support.theeventscalendar.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">help desk<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Starting with WordPress 5.8, Widgets in WordPress are converted into Blocks. This is part of a transition from traditional WordPress and the future. Depending on the theme, Widgets that are converted into Blocks are able to exist outside of the sidebar. For the purpose of this guide, we&#8217;ll stick to using and configuring Widgets\/Blocks in&#8230;<\/p>\n","protected":false},"author":3,"featured_media":1955565,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_kad_blocks_custom_css":"","_kad_blocks_head_custom_js":"","_kad_blocks_body_custom_js":"","_kad_blocks_footer_custom_js":"","_swpsp_post_exclude":false,"_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"ep_exclude_from_search":false,"footnotes":""},"categories":[114],"tags":[105],"stellar-product-taxonomy":[158,161],"class_list":["post-1896458","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-calendar-widgets","tag-widgets","stellar-product-taxonomy-events-calendar-pro","stellar-product-taxonomy-the-events-calendar"],"acf":[],"taxonomy_info":{"category":[{"value":114,"label":"Calendar Widgets"}],"post_tag":[{"value":105,"label":"Widgets"}],"stellar-product-taxonomy":[{"value":158,"label":"Events Calendar Pro"},{"value":161,"label":"The Events Calendar"}]},"featured_image_src_large":["https:\/\/images.theeventscalendar.com\/kb\/uploads\/2023\/02\/social-share-1024x538.png",1024,538,true],"author_info":{"display_name":"Jaime Marchwinski","author_link":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/author\/jaimetri-be\/"},"comment_info":0,"category_info":[{"term_id":114,"name":"Calendar Widgets","slug":"calendar-widgets","term_group":0,"term_taxonomy_id":114,"taxonomy":"category","description":"","parent":61,"count":9,"filter":"raw","term_order":"0","cat_ID":114,"category_count":9,"category_description":"","cat_name":"Calendar Widgets","category_nicename":"calendar-widgets","category_parent":61}],"tag_info":[{"term_id":105,"name":"Widgets","slug":"widgets","term_group":0,"term_taxonomy_id":105,"taxonomy":"post_tag","description":"","parent":0,"count":16,"filter":"raw","term_order":"0"}],"_links":{"self":[{"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/posts\/1896458","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/comments?post=1896458"}],"version-history":[{"count":4,"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/posts\/1896458\/revisions"}],"predecessor-version":[{"id":1961002,"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/posts\/1896458\/revisions\/1961002"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/media\/1955565"}],"wp:attachment":[{"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/media?parent=1896458"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/categories?post=1896458"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/tags?post=1896458"},{"taxonomy":"stellar-product-taxonomy","embeddable":true,"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/stellar-product-taxonomy?post=1896458"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}