{"id":22554,"date":"2021-04-22T11:41:08","date_gmt":"2021-04-22T11:41:08","guid":{"rendered":"https:\/\/crocoblock.com\/knowledge-base\/?post_type=article&p=22554"},"modified":"2023-04-11T12:54:51","modified_gmt":"2023-04-11T12:54:51","slug":"jetengine-how-to-create-a-dynamic-calendar-in-gutenberg","status":"publish","type":"article","link":"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/jetengine-how-to-create-a-dynamic-calendar-in-gutenberg\/","title":{"rendered":"How to Create a Dynamic Calendar in Gutenberg"},"content":{"rendered":"\n

JetEngine<\/a> <\/em>plugin allows you to create a Custom Post Type and then display the items of that post type in the calendar. This will be really useful if you want to add different events and show them in several different places on your website. Showing events in the calendar will also be convenient for the user. So, go through the following steps to create a calendar with dynamically shown events.<\/p>\n\n\n\n

Dynamic Calendar Creation<\/h2>\n\n\n\n

Enable calendar module<\/h3>\n\n\n\n

Open your website\u2019s WP dashboard and go to JetEngine > JetEngine Dashboard > Modules<\/em><\/strong>. Find the Calendar <\/strong>module and enable the corresponding toggle.<\/p>\n\n\n\n\"enabling\n\n\n\n

Create custom post type for events<\/h3>\n\n\n\n

Go to the JetEngine > Post Types<\/em><\/strong> tab, hit the \u201cAdd New<\/strong>\u201d button and create a CPT. The detailed guide on Custom Post Type creation can be found here<\/a>. You can name the CPT as you like, add various labels and admin columns.<\/p>\n\n\n\n\"events\n\n\n\n

You can also add as many meta fields as you need, however, make sure you added a Date <\/strong>field. The calendar cell where the event will be placed depends on the value of this field. <\/p>\n\n\n

<\/svg><\/div>
Warning<\/div>

You have to enable the Save as timestamp<\/strong> toggle in the Date<\/strong> field settings window. Otherwise, the date won\u2019t be saved correctly and it will be impossible to use it in the calendar.<\/p><\/div><\/div>\n\n\n\n\"date\n\n\n\n

When you are done, click on the \u201cPublish<\/strong>\u201d button to save the changes.<\/p>\n\n\n\n

Create listing template for events<\/h3>\n\n\n\n

The calendar has cells for every day where the events can be placed \u2013 just like in the Listing Grid. So, to define how the event will look like in the cell, you have to create a special Listing template for it. Go to JetEngine > Listings<\/em><\/strong> and hit the \u201cAdd New<\/strong>\u201d button. Choose the post type, name the Listing, and select the \u201cBlocks\u201d option in the Listing view<\/strong> drop-down.<\/p>\n\n\n\n\"listing\n\n\n\n

You can add as many blocks as you want. If you installed the JetStyleManager<\/a> plugin, you can also customize the appearance of the listing. In case you need some help, check out our Listing template creation tutorial<\/a>.<\/p>\n\n\n\n

Add calendar to page<\/h3>\n\n\n\n

Now, proceed to the page where you would like to place a calendar. Open the editing window, click on the \u201cAdd Block<\/strong>\u201d button and search for the Listing Calendar<\/strong> block.<\/p>\n\n\n\n\"listing\n\n\n\n

Click on the block to add it to the page. In the Listing <\/strong>drop-down menu of the General <\/strong>settings menu section, choose the template you created for events. In the Group posts by<\/strong> drop-down list, select the \u201cDate from custom field\u201d option and type the Date<\/strong> meta field name in the Meta field name<\/strong> bar.<\/p>\n\n\n\n\"calendar\n\n\n\n

That\u2019s all, the Custom Post Type items will be shown in the calendar cells.<\/p>\n\n\n\n

And now, let\u2019s go through the Listing Calendar<\/strong> block settings more thoroughly. <\/p>\n\n\n\n

Listing Calendar Block Settings<\/h2>\n\n\n\n

General settings<\/h3>\n\n\n\n\"listing\n\n\n\n
    \n
  • Listing<\/strong>. All the listing templates that you have created with the help of the JetEngine plugin will be gathered here, including the ones created in the Elementor Page Builder. Choose the listing you created for the calendar;<\/li>\n\n\n\n
  • Group posts by<\/strong>. The CPT item is placed in the cell that corresponds to a certain date. Here you can decide where to take that date from. Post publication date<\/strong> means that the date the post was published will be used. If you choose the Post modification date<\/strong> option, the item will be placed in the cell that matches the day the post was modified. And when you choose the Date from custom field<\/strong> option, you will be offered to specify the Date <\/strong>field in Meta field name<\/strong> bar;<\/li>\n\n\n\n
  • Allow multi-day events<\/strong>. With the help of this toggle, you can allow showing the events that last for more than one day. If it is enabled, the item of the multi-day event will be placed in several cells according to the period when it is held;<\/li>\n\n\n\n
  • Week days format<\/strong>. On the top of the calendar table, you can see the names of the days. In this drop-down menu, you can choose how they will be displayed:\n
      \n
    • Full<\/strong> \u2013 full names (Monday, Tuesday, etc.);<\/li>\n\n\n\n
    • Short <\/strong>\u2013 three first letters (Mon, Tue, etc.);<\/li>\n\n\n\n
    • Initial letter<\/strong> \u2013 the first letter only (M, T, etc.);<\/li>\n<\/ul>\n<\/li>\n\n\n\n
    • Start from custom month<\/strong>. By default, the calendar opens at the current month. However, if you turn this toggle on, you will be able to set which month to show first by choosing it in the Start from month<\/strong> and Start from year<\/strong> drop-down menus;<\/li>\n\n\n\n
    • Show posts from the nearby month<\/strong>. If you turn this toggle on, the events that will happen in the nearest month will be shown;<\/li>\n\n\n\n
    • Hide past events<\/strong>. By default, the events that have already passed remain in the calendar. However, you can hide them by enabling this toggle;<\/li>\n\n\n\n
    • Caption Layout<\/strong>. Above the calendar table, there are the \u201cBack\u201d and \u201cForward\u201d buttons, as well as the name of the month and year. In this drop-down menu, you can choose one of the four layouts for them.<\/li>\n<\/ul>\n\n\n\n

      Post Query settings<\/h3>\n\n\n\n\"calendar\n\n\n\n

      By default, all the posts of a chosen Post Type are shown in the calendar. However, if you want to display only part of them, you can set which of them will be displayed in this very calendar.<\/p>\n\n\n\n

      Block Visibility<\/h3>\n\n\n\n

      By default, the Listing Calendar block is always visible. However, you can change that and set the \u201cQuery is empty\u201d option in the Hide block if<\/strong> drop-down menu. In that case, if the Post Query<\/strong> section is empty, the Listing Calendar won\u2019t be shown to the users. This means that if after querying, there will be no posts, the block is hidden.<\/p>\n\n\n\n\"calendar\n\n\n\n

      Nice job! You now know how to create and add a dynamic calendar to your website\u2019s page using JetEngine and Gutenberg Editor.<\/p>\n","protected":false},"excerpt":{"rendered":"

      From this tutorial, you will learn how to create a calendar that will dynamically display events from the separate Custom Post Type and add it to the page in Gutenberg Editor afterward.<\/p>\n","protected":false},"author":11,"featured_media":0,"template":"","format":"standard","builder-category":[],"article-category":[397],"yoast_head":"\nCreating Dynamic Calendar in Gutenberg \u2014 JetEngine | Crocoblock<\/title>\n<meta name=\"description\" content=\"Learn how to add a calendar with dynamically changing dates to the page created in Gutenberg Editor with the help of the JetEngine plugin.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/jetengine-how-to-create-a-dynamic-calendar-in-gutenberg\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Creating Dynamic Calendar in Gutenberg \u2014 JetEngine | Crocoblock\" \/>\n<meta property=\"og:description\" content=\"Learn how to add a calendar with dynamically changing dates to the page created in Gutenberg Editor with the help of the JetEngine plugin.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/jetengine-how-to-create-a-dynamic-calendar-in-gutenberg\/\" \/>\n<meta property=\"og:site_name\" content=\"Help Center\" \/>\n<meta property=\"article:modified_time\" content=\"2023-04-11T12:54:51+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/02\/calendar-module.png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/jetengine-how-to-create-a-dynamic-calendar-in-gutenberg\/\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/jetengine-how-to-create-a-dynamic-calendar-in-gutenberg\/\",\"name\":\"Creating Dynamic Calendar in Gutenberg \u2014 JetEngine | Crocoblock\",\"isPartOf\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#website\"},\"datePublished\":\"2021-04-22T11:41:08+00:00\",\"dateModified\":\"2023-04-11T12:54:51+00:00\",\"description\":\"Learn how to add a calendar with dynamically changing dates to the page created in Gutenberg Editor with the help of the JetEngine plugin.\",\"breadcrumb\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/jetengine-how-to-create-a-dynamic-calendar-in-gutenberg\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/jetengine-how-to-create-a-dynamic-calendar-in-gutenberg\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/jetengine-how-to-create-a-dynamic-calendar-in-gutenberg\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/crocoblock.com\/knowledge-base\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Articles\",\"item\":\"https:\/\/crocoblock.com\/knowledge-base\/articles\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"How to Create a Dynamic Calendar in Gutenberg\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#website\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/\",\"name\":\"Help Center\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/crocoblock.com\/knowledge-base\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#organization\",\"name\":\"Help Center\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg\",\"contentUrl\":\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg\",\"caption\":\"Help Center\"},\"image\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Creating Dynamic Calendar in Gutenberg \u2014 JetEngine | Crocoblock","description":"Learn how to add a calendar with dynamically changing dates to the page created in Gutenberg Editor with the help of the JetEngine plugin.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/jetengine-how-to-create-a-dynamic-calendar-in-gutenberg\/","og_locale":"en_US","og_type":"article","og_title":"Creating Dynamic Calendar in Gutenberg \u2014 JetEngine | Crocoblock","og_description":"Learn how to add a calendar with dynamically changing dates to the page created in Gutenberg Editor with the help of the JetEngine plugin.","og_url":"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/jetengine-how-to-create-a-dynamic-calendar-in-gutenberg\/","og_site_name":"Help Center","article_modified_time":"2023-04-11T12:54:51+00:00","og_image":[{"url":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/02\/calendar-module.png"}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/jetengine-how-to-create-a-dynamic-calendar-in-gutenberg\/","url":"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/jetengine-how-to-create-a-dynamic-calendar-in-gutenberg\/","name":"Creating Dynamic Calendar in Gutenberg \u2014 JetEngine | Crocoblock","isPartOf":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#website"},"datePublished":"2021-04-22T11:41:08+00:00","dateModified":"2023-04-11T12:54:51+00:00","description":"Learn how to add a calendar with dynamically changing dates to the page created in Gutenberg Editor with the help of the JetEngine plugin.","breadcrumb":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/jetengine-how-to-create-a-dynamic-calendar-in-gutenberg\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/crocoblock.com\/knowledge-base\/jetengine\/jetengine-how-to-create-a-dynamic-calendar-in-gutenberg\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/jetengine-how-to-create-a-dynamic-calendar-in-gutenberg\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/crocoblock.com\/knowledge-base\/"},{"@type":"ListItem","position":2,"name":"Articles","item":"https:\/\/crocoblock.com\/knowledge-base\/articles\/"},{"@type":"ListItem","position":3,"name":"How to Create a Dynamic Calendar in Gutenberg"}]},{"@type":"WebSite","@id":"https:\/\/crocoblock.com\/knowledge-base\/#website","url":"https:\/\/crocoblock.com\/knowledge-base\/","name":"Help Center","description":"","publisher":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/crocoblock.com\/knowledge-base\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/crocoblock.com\/knowledge-base\/#organization","name":"Help Center","url":"https:\/\/crocoblock.com\/knowledge-base\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/","url":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg","contentUrl":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg","caption":"Help Center"},"image":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/article\/22554"}],"collection":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/article"}],"about":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/types\/article"}],"author":[{"embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/users\/11"}],"wp:attachment":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/media?parent=22554"}],"wp:term":[{"taxonomy":"builder-category","embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/builder-category?post=22554"},{"taxonomy":"article-category","embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/article-category?post=22554"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}