{"id":33559,"date":"2023-01-25T10:46:08","date_gmt":"2023-01-25T10:46:08","guid":{"rendered":"https:\/\/crocoblock.com\/knowledge-base\/?post_type=article&p=33559"},"modified":"2024-10-16T11:01:54","modified_gmt":"2024-10-16T11:01:54","slug":"creating-dynamic-calendar-with-bricks","status":"publish","type":"article","link":"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/creating-dynamic-calendar-with-bricks\/","title":{"rendered":"How to Create Dynamic Calendar with Bricks"},"content":{"rendered":"\n

The Calendar<\/strong> element helps you to display scheduled events and timetables. With its help, you can display calendar listings on your WordPress website and style them in the Bricks <\/em>page builder.<\/p>\n\n\n\n

Preparations<\/strong><\/h2>\n\n\n\n
<\/svg><\/div>
Warning<\/div>

Before you start, proceed to Bricks > Settings<\/i><\/strong> and ensure that you enable the Pages<\/strong> toggle in the Post Types<\/strong> section and hit the Save Changes<\/strong> button.<\/p><\/div><\/div>\n\n\n\n\"edit\n\n\n\n

To activate the Calendar <\/strong>module, proceed to the JetEngine Dashboard<\/strong><\/a>, enable the Calendar <\/strong>toggle in the Default Modules <\/strong>section, and push the \u201cSave\u201d <\/strong>button.<\/p>\n\n\n\n\"jetengine\n\n\n\n

As the requirements said, you needed to create a dedicated CPT for the events. Proceed to JetEngine > Post Types<\/em><\/strong>, hit to edit this post type, scroll down to the Meta Fields <\/strong>tab, and add the Date <\/strong>meta field<\/strong><\/a>.<\/p>\n\n\n

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

Make sure to enable the Save as timestamp<\/strong> toggle. Otherwise, the events won\u2019t be displayed correctly in the calendar.<\/p><\/div><\/div>\n\n\n\n\"date\n\n\n\n

If you want to add the multi-day events to the calendar (events that will last for more than one day, e.g., weekend or holiday events), create the second \u201cEnd date\u201d Date<\/strong> meta field. More about this function you can learn from the How to Display One Post for Several Dates with Calendar Widget<\/strong><\/a> tutorial. Don\u2019t forget to enable the \u201cSave as timestamp\u201d <\/strong>toggle.<\/p>\n\n\n\n\"end\n\n\n\n

Also, I created the Media <\/strong>meta field to add images to the calendar.<\/p>\n\n\n\n\"media\n\n\n\n

When you finish editing the CPT, click the \u201cUpdate Post Type\u201d <\/strong>button.<\/p>\n\n\n\n

Proceed to the CPT tab on the WordPress Dashboard (\u201cEvents,\u201d in my case) and create several event posts to display them later in the calendar listing. I created several events for the restaurant website.<\/p>\n\n\n\n\"events-related\n\n\n\n

In the \u201cWine Tasting\u201d event post, I added start and end dates to show later in the calendar that this event lasts two days (during the weekends).<\/p>\n\n\n\n\"multi-day\n<\/div><\/div>\n\n\n\n

Create a Listing Template for the Calendar<\/strong><\/h2>\n\n\n\n
\n

Move to the JetEngine > Listings<\/em><\/strong> and click the \u201cAdd New\u201d<\/strong> button. Pick the \u201cPosts\u201d Listing source<\/strong>, the post type for the events in the From post type <\/strong>field (\u201cEvents\u201d in my case), enter the Listing item name, <\/strong>and select the \u201cBricks\u201d Listing view<\/strong>. Push the \u201cCreate Listing Item\u201d <\/strong>button.<\/p>\n\n\n\n\"listing\n\n\n\n

Hit the \u201c+\u201d <\/strong>button on the canvas to add a new section. Drag-n-drop the dynamic elements such as Dynamic Field<\/strong>, Dynamic Image<\/strong>, and Dynamic Link<\/strong> to arrange the future calendar cell. You can find more about Listing item creation with Bricks <\/em>in the How to Create Listing Items with Bricks<\/a> <\/strong>tutorial.<\/p>\n\n\n\n

I used the Dynamic Field <\/strong>element to display the post title, Dynamic Image <\/strong>to show an event picture from the Image <\/strong>meta field, and Dynamic Link <\/strong>with the \u201cPermalink\u201d Source <\/strong>so that users can proceed to the event page.<\/p>\n\n\n\n\"listing\n\n\n\n

After you finish customizing, hit the \u201cSave\u201d <\/strong>button.<\/p>\n<\/div><\/div>\n\n\n\n

Add the Calendar Element to the Page<\/strong><\/h2>\n\n\n\n
\n

Move to the Pages <\/strong>tab on the WordPress Dashboard and click \u201cEdit with Bricks\u201d<\/strong> on the page you created earlier to place the dynamic calendar here.<\/p>\n\n\n\n\"edit\n\n\n\n

Add a new Section <\/strong>and drag-n-drop the Calendar <\/strong>element.<\/p>\n\n\n\n\"calendar\n\n\n\n

Now, let\u2019s get through the Calendar <\/strong>settings.<\/p>\n\n\n\n\"calendar\n\n\n\n

General settings<\/strong><\/h3>\n\n\n\n