{"id":12744576,"date":"2020-04-28T14:08:18","date_gmt":"2020-04-28T14:08:18","guid":{"rendered":"https:\/\/wordpress.org\/support\/?post_type=helphub_article&#038;p=12744576"},"modified":"2026-05-25T15:12:56","modified_gmt":"2026-05-25T15:12:56","slug":"calendar-block","status":"publish","type":"helphub_article","link":"https:\/\/wordpress.org\/documentation\/article\/calendar-block\/","title":{"rendered":"Calendar block"},"content":{"rendered":"\n<p class=\"has-text-align-right has-small-font-size wp-block-paragraph\"><a href=\"https:\/\/wordpress.org\/documentation\/article\/blocks\/\">Go back to the list of <strong>Blocks<\/strong><\/a><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The Calendar block displays your posts in a calendar format. When you&nbsp;publish a new post, it is automatically added to the Calendar block. If you click on a date, it will open the archive of posts published on that date.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"670\" height=\"340\" src=\"https:\/\/wordpress.org\/documentation\/files\/2020\/04\/Screen-Shot-2020-04-28-at-9.44.31-AM.png\" alt=\"Calendar block\" class=\"wp-image-12744595\" style=\"width:363px;height:184px\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2020\/04\/Screen-Shot-2020-04-28-at-9.44.31-AM.png 670w, https:\/\/wordpress.org\/documentation\/files\/2020\/04\/Screen-Shot-2020-04-28-at-9.44.31-AM-300x152.png 300w\" sizes=\"auto, (max-width: 670px) 100vw, 670px\" \/><\/figure>\n\n\n\n<p class=\"has-background wp-block-paragraph\" style=\"background-color:#e5f5fa\">The Calendar block does not let you create a calendar of events. For that, you need an Events calendar plugin.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">By default, it shows the current month and links to the posts published on various days in that month.  <\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"1005\" height=\"477\" src=\"https:\/\/wordpress.org\/documentation\/files\/2020\/04\/Screen-Shot-2020-04-28-at-9.47.19-AM.png\" alt=\"Calendar block - right aigned\" class=\"wp-image-12744729\" style=\"width:346px;height:164px\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2020\/04\/Screen-Shot-2020-04-28-at-9.47.19-AM.png 1005w, https:\/\/wordpress.org\/documentation\/files\/2020\/04\/Screen-Shot-2020-04-28-at-9.47.19-AM-300x142.png 300w, https:\/\/wordpress.org\/documentation\/files\/2020\/04\/Screen-Shot-2020-04-28-at-9.47.19-AM-768x365.png 768w\" sizes=\"auto, (max-width: 1005px) 100vw, 1005px\" \/><figcaption class=\"wp-element-caption\"><em>Example: Calendar Block &#8211; right aligned.<\/em><\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Add a Calendar block<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">To add the Calendar block, click the (+) icon to open the block inserter pop-up window. Look for the Calendar block using the search bar and click the block icon to add it to the editor.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">You can also type<kbd>&nbsp;\/calendar<\/kbd>&nbsp;and hit enter in a new&nbsp;paragraph block&nbsp;to add one quickly.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"796\" height=\"278\" src=\"https:\/\/wordpress.org\/documentation\/files\/2022\/08\/171653175-30c8d445-8470-4768-8a93-20418f7f3c77.png\" alt=\"How to quickly add Calendar block\" class=\"wp-image-15889221\" style=\"width:348px;height:122px\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2022\/08\/171653175-30c8d445-8470-4768-8a93-20418f7f3c77.png 796w, https:\/\/wordpress.org\/documentation\/files\/2022\/08\/171653175-30c8d445-8470-4768-8a93-20418f7f3c77-300x105.png 300w, https:\/\/wordpress.org\/documentation\/files\/2022\/08\/171653175-30c8d445-8470-4768-8a93-20418f7f3c77-768x268.png 768w\" sizes=\"auto, (max-width: 796px) 100vw, 796px\" \/><\/figure>\n\n\n\n<p class=\"has-text-align-left has-background wp-block-paragraph\" style=\"background-color:#e5f5fa\"><a href=\"https:\/\/wordpress.org\/documentation\/article\/adding-a-new-block\/\">Detailed instructions on adding blocks<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Block toolbar<\/h2>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"450\" height=\"126\" src=\"https:\/\/wordpress.org\/documentation\/files\/2020\/04\/calendar-block-toolbar-settings.png\" alt=\"\" class=\"wp-image-16368540\" style=\"width:286px;height:auto\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2020\/04\/calendar-block-toolbar-settings.png 450w, https:\/\/wordpress.org\/documentation\/files\/2020\/04\/calendar-block-toolbar-settings-300x84.png 300w\" sizes=\"auto, (max-width: 450px) 100vw, 450px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Each block has its own block-specific controls that allow you to manipulate the block right in the editor.&nbsp;The Calendar block contains the following options:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Transform to<\/li>\n\n\n\n<li>Move controls<\/li>\n\n\n\n<li>Change alignment<\/li>\n\n\n\n<li>More options<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Transform to<\/h3>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"662\" height=\"512\" src=\"https:\/\/wordpress.org\/documentation\/files\/2020\/04\/calendar-block-transform-to.png\" alt=\"\" class=\"wp-image-16368542\" style=\"aspect-ratio:1.2930313313866308;width:358px;height:auto\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2020\/04\/calendar-block-transform-to.png 662w, https:\/\/wordpress.org\/documentation\/files\/2020\/04\/calendar-block-transform-to-300x232.png 300w\" sizes=\"auto, (max-width: 662px) 100vw, 662px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">The Transform to tool allows you to convert the Calendar block into the Details, Columns, Group, or the Archives block.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Move controls <\/h3>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"438\" height=\"120\" src=\"https:\/\/wordpress.org\/documentation\/files\/2020\/04\/calendar-block-move-controls.png\" alt=\"\" class=\"wp-image-16368543\" style=\"aspect-ratio:3.6501278772378516;width:325px;height:auto\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2020\/04\/calendar-block-move-controls.png 438w, https:\/\/wordpress.org\/documentation\/files\/2020\/04\/calendar-block-move-controls-300x82.png 300w\" sizes=\"auto, (max-width: 438px) 100vw, 438px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Click the the drag\/drop button (six dots) to move the block to a new location on the page. A blue separator line appears to indicate where the block will be placed.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The up and down arrow icons can be used to move the block up and down on the page<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Change alignment <\/h3>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"712\" height=\"638\" src=\"https:\/\/wordpress.org\/documentation\/files\/2020\/04\/calendar-block-change-alignment.png\" alt=\"\" class=\"wp-image-16368544\" style=\"aspect-ratio:1.1160481568822143;width:319px;height:auto\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2020\/04\/calendar-block-change-alignment.png 712w, https:\/\/wordpress.org\/documentation\/files\/2020\/04\/calendar-block-change-alignment-300x269.png 300w\" sizes=\"auto, (max-width: 712px) 100vw, 712px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Use the&nbsp;<strong>Change alignment<\/strong>&nbsp;tool to modify the alignment of the Calendar block. Select the tool and pick one of the following alignment options:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>None<\/strong>&nbsp;\u2013 Leaves the block the current size.<\/li>\n\n\n\n<li><strong>Wide width<\/strong>&nbsp;\u2013 Increase the width of the post beyond the content size.<\/li>\n\n\n\n<li><strong>Full width<\/strong>&nbsp;\u2013 Extend the block to cover the full width of the screen.<\/li>\n\n\n\n<li><strong>Align left<\/strong>&nbsp;\u2013 Make the block left-aligned.<\/li>\n\n\n\n<li><strong>Align center<\/strong>&nbsp;\u2013 Make the block alignment centered.<\/li>\n\n\n\n<li><strong>Align right&nbsp;<\/strong>\u2013 Make the block right aligned.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Wide width and Full width only display if these width options are supported in your theme.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">More options<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">The&nbsp;<strong>More options<\/strong>&nbsp;menu (three dots) includes common block actions, such as copy, duplicate, lock, and edit as HTML.<\/p>\n\n\n\n<p class=\"has-text-align-left has-background wp-block-paragraph\" style=\"background-color:#e5f5fa\"><a href=\"https:\/\/wordpress.org\/documentation\/article\/more-options\/\">Read about these and other settings<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Block settings <\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Color <\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">With Color settings, you can change the color of the text, the color of links, and the background color of your block. For the Calendar block, this means that you can style the date\/month text to be different than the calendar&#8217;s background color. <\/p>\n\n\n\n<p class=\"has-text-align-left has-background wp-block-paragraph\" style=\"background-color:#e5f5fa\"><a href=\"https:\/\/wordpress.org\/documentation\/article\/colors-settings-overview\/\">See this guide for more information about changing colors<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Typography<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">The Calendar block provides typography settings to change the font family, appearance, line height, letter spacing, decoration, letter case, and font size.<\/p>\n\n\n\n<p class=\"has-text-align-left has-background wp-block-paragraph\" style=\"background-color:#e5f5fa\">For details, refer to this support article:&nbsp;<a href=\"https:\/\/wordpress.org\/documentation\/article\/typography-settings-overview\/\">Typography settings overview<\/a><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Advanced<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">The Calendar block provides the following Advanced settings options: HTML anchor, Additional CSS Class(es), and Styles.<\/p>\n\n\n\n<p class=\"has-text-align-left has-background wp-block-paragraph\" style=\"background-color:#e5f5fa\"><a href=\"https:\/\/wordpress.org\/documentation\/article\/advanced-settings-overview\/\">Learn more about advanced settings<\/a><\/p>\n\n\n\n<div class=\"wp-block-group changelog has-very-dark-gray-color has-very-light-gray-background-color has-text-color has-background is-layout-flow wp-block-group-is-layout-flow\">\n<h2 id=\"changelog\" class=\"wp-block-heading has-extra-large-font-size\">Changelog <\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Updated 2026-05-25 (props @kjoyner @awetz583)\n<ul class=\"wp-block-list\">\n<li>Updated &#8220;Advanced&#8221; section to refer to new overview page<\/li>\n\n\n\n<li>Added block toolbar and block settings information<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Updated 2025-12-08\n<ul class=\"wp-block-list\">\n<li>Changed capitalization in title to Calendar block<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Updated 2022-11-23\n<ul class=\"wp-block-list\">\n<li>Removed redundant content <\/li>\n\n\n\n<li>Aligned images for mobile view<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Updated 2022-08-04\n<ul class=\"wp-block-list\">\n<li>Added screenshots for 6.0<\/li>\n\n\n\n<li>Added ALT tags for the images<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Created 2020-04-28 <\/li>\n<\/ul>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Go back to the list of Blocks The Calendar block displays your posts in a calendar format. When you&nbsp;publish a new post, it is automatically added to the Calendar block. If you click on a date, it will open the archive of posts published on that date. The Calendar block does not let you create [&hellip;]<\/p>\n","protected":false},"author":5713323,"featured_media":0,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"","meta":{"advanced_seo_description":"","jetpack_seo_html_title":"","jetpack_seo_noindex":false},"category":[80,90],"class_list":["post-12744576","helphub_article","type-helphub_article","status-publish","hentry","category-customization","category-widget-blocks"],"revision_note":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/articles\/12744576","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/articles"}],"about":[{"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/types\/helphub_article"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/users\/5713323"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/comments?post=12744576"}],"version-history":[{"count":13,"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/articles\/12744576\/revisions"}],"predecessor-version":[{"id":16368552,"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/articles\/12744576\/revisions\/16368552"}],"wp:attachment":[{"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/media?parent=12744576"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/category?post=12744576"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}