Masonry View Skin Settings
Masonry View Skin, in simple terms, is a smart grid view. This display takes advantage of the space inside the page since it requires no specific height or width. Additionally, you can set an extract of the required information about each event aligned with the location and date below the picture of the event.
Note: This skin is only available in the MEC Pro version.
Masonry View Skin Shortcode
You can use shortcodes in your internal pages to have this on your website. The shortcodes are located in M.E. Calendar > Shortcodes.
If you want to convert Masonry to Grid, you can use the “Fit to row” and “Convert Masonry to Grid” options.
Masonry View Skin Layout
Here is the demo of Masonry View Skin in the Modern Events Calendar:
Masonry View Shortcode Options
These are the options you see in M.E. Calendar > Shortcodes after choosing the Masonry View skin. MEC Pro and some addons can add more styles and options.
| Option | What it does | Values |
|---|---|---|
| Start Date | The date the view starts showing events from. | Today / Tomorrow / Yesterday / Start of Last Month / Start of Current Month / Start of Next Month / On a certain date |
| Certain Start Date | The exact start date, used when Start Date is set to "On a certain date". | Date |
| End Date | Where the list stops. Leave it on "On a certain date" with an empty Maximum Date for no end limit. | On a certain date / Today / Tomorrow |
| Maximum Date | Maximum Date: the last date to include when End Date is "On a certain date". | Date |
| Limit | Maximum number of events loaded at once. | Number |
| Filter By | Adds filter buttons above the masonry grid. | None / Category / Label / Location / Organizer |
| Include Local Time | Also shows each event's time in the visitor's own time zone. | On / Off |
| Display Normal Labels | Shows event labels such as "Featured" or "Canceled". | On / Off |
| Display Reason for Cancellation | Shows the cancellation reason on canceled events. | On / Off |
| Display Categories | Shows the categories of each event. | On / Off |
| Fit to Row | Arranges items into rows instead of a free masonry flow. | On / Off |
| Convert Masonry to Grid | Converts the masonry layout into a regular grid. Your events need featured images. | On / Off |
| Load More Button | Adds a "Load More" button so visitors can load the next batch of events. | On / Off |
| Descending Order | Shows the newest events first. | On / Off |
| Single Event Display Method | How the event opens when clicked. | Current Window / New Window / Modal Popup / Disable Link |
| Booking Button / Icon | Adds a booking button or icon to each event. | On / Off |
| Display Custom Fields | Shows event custom fields. | On / Off |
| Display Organizers | Shows the organizer of each event. | On / Off |
| Date Formats | Date formats used by the selected style, written with PHP date characters. | Text (e.g. j, M, Y) |
Masonry View FAQ
How do I add the Masonry View to a page?
Go to M.E. Calendar > Shortcodes, add a new shortcode, choose Masonry View as the skin, set the options above and publish it. Then copy the generated shortcode (for example [MEC id="123"]) into any page, post or widget.
How do I show only some events?
Open the Filter Options of the same shortcode and limit events by category, location, organizer, label, tag or author. See Making Advanced Shortcodes for every filter.
Can the Masonry View show past events?
Yes. In Filter Options > Expired Events, turn on Include Expired Events to show past and upcoming events, or Show Only Expired Events to show only past ones. They are listed from the Start Date you choose.
Hi,
I am using the Themeco Pro Theme for my website and added the Masonry View (by using the shortcode in a text field). For 2 events everything works fine, but now I added a third event and the first 2 are in one row, the third in the next row (even though there is some space in the first row). Is there any way how to fix this?
Hello,
update MEC to the latest version.
For troubleshooting, deactivate all your plugins and let the MEC remain active only, set your theme on default, then reload the page, if the issue was solved, then activate your plugins one by one and your theme, refresh your page and check to see which plugin is causing the issue and Please keep us informed.
if the problem remains, please go to support.webnus.net and there you can log in or sign up. You should sign up with the same email you have created your tickets. to create a new ticket, simply head over to webnus.net/support and click on ‘Create a Ticket’ and share the required information.
sending screenshots or a short video and live URL of the issue would be helpful.
explain to us step by step how you set up this and how the issue happens?
https://www.loom.com