{"id":3021,"date":"2016-03-22T14:54:23","date_gmt":"2016-03-22T14:54:23","guid":{"rendered":"http:\/\/demo.curlythemes.com\/timetable-wordpress-plugin\/?page_id=3021"},"modified":"2017-10-18T19:10:46","modified_gmt":"2017-10-18T19:10:46","slug":"schedule-masonry-grid","status":"publish","type":"page","link":"https:\/\/demo.curlythemes.com\/timetable-wordpress-plugin\/examples\/schedule-masonry-grid\/","title":{"rendered":"Art Gallery (Masonry Grid)"},"content":{"rendered":"<p>[vc_row full_width=&#8221;stretch_row&#8221; grid=&#8221;true&#8221; css=&#8221;.vc_custom_1492623073198{padding-bottom: 40px !important;}&#8221;][vc_column][vc_column_text]<\/p>\n<h1 style=\"text-align: center;\"><small>MASONRY GRID\u00a0Example<\/small>Art Gallery\u00a0Expo Schedule<\/h1>\n<p class=\"lead\" style=\"text-align: center;\">The Masonry Grid style is both dynamic and visually impressive, displaying events in an interactive grid. It is perfect for an Art Gallery, Cinema, Theatre or other businesses with unique events. The list will always be displayed chronological, so your visitors can see right away which events are available soon. Visitors can use dynamic filters to display events in a specific Gallery, with a specific Tag, only morning events, etc.<\/p>\n<p>[\/vc_column_text][\/vc_column][\/vc_row][vc_row full_width=&#8221;stretch_row&#8221; grid=&#8221;true&#8221; css=&#8221;.vc_custom_1492623077832{padding-top: 0px !important;padding-bottom: 50px !important;}&#8221;][vc_column width=&#8221;1\/2&#8243; offset=&#8221;vc_col-sm-offset-3&#8243;][vc_column_text]<\/p>\n<ul>\n<li>Events are listed in a chronological grid, with an element for each one.<\/li>\n<li>You can set the events to be one-time or weekly events<\/li>\n<li>The grid will load initially as many days as you want and the visitors can display more, with the help of a button<\/li>\n<li>Clicking on events will enlarge the box, clicking again will open a pop-up window, with text and images<\/li>\n<li>You can assign as many Event Types, Tags and Locations as you need<\/li>\n<li>You can choose how many elements to display, between one and six<\/li>\n<\/ul>\n<p>[\/vc_column_text][\/vc_column][\/vc_row][vc_row grid=&#8221;true&#8221; el_class=&#8221;content-padding-none&#8221; css=&#8221;.vc_custom_1508353844449{padding-bottom: 8rem !important;background-color: #f2f2f2 !important;background-position: center !important;background-repeat: no-repeat !important;background-size: cover !important;}&#8221;][vc_column]\t\t<div class=\"wcs-timetable__wrapper\">\n\t\t\t<div class=\"wcs-vue\" id=\"wcs-app-9\"><\/div>\n\t\t<\/div>\n\t\t[\/vc_column][vc_column offset=&#8221;vc_col-lg-offset-2 vc_col-lg-8 vc_col-md-offset-1 vc_col-md-10&#8243;][vc_column_text]<\/p>\n<p class=\"lead\" style=\"text-align: center;\"><span style=\"color: #d70082;\">Check out <a style=\"color: #d70082; text-decoration: underline;\" href=\"https:\/\/themeforest.net\/item\/arte-art-gallery-wordpress-theme\/20633505?ref=CurlyThemes\" target=\"_blank\" rel=\"noopener\">Arte &#8211; Art Gallery WordPress Theme<\/a>\u00a0if you are Looking for a great\u00a0<strong>Art Gallery WordPress Theme!<\/strong> (theme includes the Events Schedule plugin)<\/span><\/p>\n<p>[\/vc_column_text][\/vc_column][\/vc_row][vc_row grid=&#8221;true&#8221; css=&#8221;.vc_custom_1492623096471{padding-top: 0px !important;padding-bottom: 0px !important;}&#8221;][vc_column width=&#8221;2\/3&#8243; offset=&#8221;vc_col-sm-offset-2&#8243; css=&#8221;.vc_custom_1456440805276{border-bottom-width: 1px !important;padding-top: 40px !important;padding-bottom: 40px !important;border-bottom-color: #e5e5e5 !important;border-bottom-style: solid !important;}&#8221;][vc_column_text]<span style=\"color: #999999;\">With the Masonry Grid style, one of our eight layout styles available, you can use a visually impressive and dynamic grid, displaying each class as a grid element. Filters can be used to sort the events and the selection will reflect in the list. If there are no events matching the selection, the schedule will be replaced with a custom \u201cno events available\u201d message.<\/span><\/p>\n<p><a href=\"http:\/\/demo.curlythemes.com\/timetable-wordpress-plugin\/examples\/art-gallery-plain\/\" target=\"_blank\" rel=\"noopener\">See this schedule on a blank page<\/a>[\/vc_column_text][\/vc_column][\/vc_row][vc_row grid=&#8221;true&#8221; css=&#8221;.vc_custom_1492623103278{border-top-width: 0px !important;}&#8221;][vc_column offset=&#8221;vc_col-lg-6 vc_col-md-6 vc_col-xs-12&#8243;][vc_column_text]<\/p>\n<h2>Let&#8217;s see how\u00a0this schedule was created<\/h2>\n<p class=\"lead\">On the right, you can\u00a0see an\u00a0actual screenshot of the Schedule Builder for this timetable. You can create one yourself, in only a few minutes, with the following steps:<\/p>\n<p>[\/vc_column_text][vc_tta_accordion style=&#8221;flat&#8221; gap=&#8221;10&#8243; c_icon=&#8221;&#8221; active_section=&#8221;1&#8243; no_fill=&#8221;true&#8221; css=&#8221;.vc_custom_1455216512937{padding-top: 30px !important;padding-bottom: 30px !important;}&#8221;][vc_tta_section title=&#8221;Step 1 &#8211; Setup The Schedule Title &amp; Style&#8221; tab_id=&#8221;1455211351388-1878abcd-094f&#8221;][vc_column_text]<\/p>\n<ul>\n<li>Enter a title for your schedule, something like\u00a0Art Gallery Exhibitions.<\/li>\n<li>Select the Masonry Grid\u00a0style, great for an Art Gallery, Theatre\u00a0or Cinema\u00a0schedule.<\/li>\n<\/ul>\n<p>[\/vc_column_text][\/vc_tta_section][vc_tta_section title=&#8221;Step 2 &#8211; Setup the Schedule Content &amp; Filters&#8221; tab_id=&#8221;1455211351452-ec11c5b6-b42b&#8221;][vc_column_text]<\/p>\n<ul>\n<li>Choose your Schedule Contents. You can use the All option, to display Classes with any Type, Location or Instructor, or you can select the ones you need. In our example, we selected only the ones relevant to an Art Gallery.<\/li>\n<li>The\u00a0Available Filters tabs work in the same way. You can make a selection different than the one you have for Schedule Contents. This way, you can restrict\u00a0filtering exactly how you want.<\/li>\n<\/ul>\n<p>[\/vc_column_text][\/vc_tta_section][vc_tta_section title=&#8221;Step 3 &#8211; Setup The Custom Labels&#8221; tab_id=&#8221;1455211421076-a918d53e-7e3b&#8221;][vc_column_text]<\/p>\n<ul>\n<li>Use the Schedule Labels fields to name the Categories and Filters how you want. In this example, we changed the Instructor label to Tags, to be relevant for a modern Art Gallery\u00a0schedule.<\/li>\n<li>You can also customize other messages, like the one for no events available.<\/li>\n<\/ul>\n<p>[\/vc_column_text][\/vc_tta_section][vc_tta_section title=&#8221;Step 4 &#8211; Setup The Schedule Details&#8221; tab_id=&#8221;1455211474781-bf7f4ba5-0345&#8243;][vc_column_text]<\/p>\n<ul>\n<li>On the right, you can choose how many days to display. In this example, we are using 1 Week, as our events are weekly repeatable.<\/li>\n<li>With the Display Options switchers you can choose to hide some of the info.<\/li>\n<li>The Filters Options switchers allow you to show only the filters categories you want.<\/li>\n<\/ul>\n<p>[\/vc_column_text][\/vc_tta_section][vc_tta_section title=&#8221;Step 5 &#8211; Setup The Extra Customizations&#8221; tab_id=&#8221;1455211503606-3b19b881-d701&#8243;][vc_column_text]<\/p>\n<ul>\n<li>Choose the position of the Filters, we are using Center in this example.<\/li>\n<li>Choose how the pop-up modal should look. We are using the Large\u00a0Image option.<\/li>\n<li>The Design Options allow you to choose the three\u00a0colors of the schedule: for the text,\u00a0for the special elements and for the grid elements background.<\/li>\n<\/ul>\n<p>[\/vc_column_text][\/vc_tta_section][vc_tta_section i_icon_fontawesome=&#8221;fa fa-flag&#8221; add_icon=&#8221;true&#8221; title=&#8221;Done!&#8221; tab_id=&#8221;1455214599342-fb76472e-812b&#8221;][vc_column_text]<\/p>\n<p class=\"lead\"><span style=\"color: #bf392b;\"><strong>Your Schedule is Ready!<\/strong> You can add it with our<br \/>\ncustom Visual Composer element or you can<br \/>\nuse the auto-generated shortcode on the right.<\/span><\/p>\n<p>[\/vc_column_text][\/vc_tta_section][\/vc_tta_accordion][\/vc_column][vc_column css=&#8221;.vc_custom_1455363959125{padding-top: 15px !important;padding-right: 15px !important;padding-bottom: 15px !important;padding-left: 15px !important;background-color: #f2f2f2 !important;}&#8221; offset=&#8221;vc_col-lg-6 vc_col-md-6 vc_col-xs-12&#8243;][vc_single_image image=&#8221;3118&#8243; img_size=&#8221;full&#8221; alignment=&#8221;center&#8221; el_class=&#8221;curly-lightbox&#8221;][\/vc_column][\/vc_row]<\/p>\n","protected":false},"excerpt":{"rendered":"<p>[vc_row full_width=&#8221;stretch_row&#8221; grid=&#8221;true&#8221; css=&#8221;.vc_custom_1492623073198{padding-bottom: 40px !important;}&#8221;][vc_column][vc_column_text] MASONRY GRID\u00a0ExampleArt Gallery\u00a0Expo Schedule The Masonry Grid style is both dynamic and visually impressive, [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":3028,"parent":2,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"page-templates\/page-fullwidth.php","meta":{"footnotes":""},"class_list":["post-3021","page","type-page","status-publish","has-post-thumbnail","hentry"],"_links":{"self":[{"href":"https:\/\/demo.curlythemes.com\/timetable-wordpress-plugin\/wp-json\/wp\/v2\/pages\/3021","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/demo.curlythemes.com\/timetable-wordpress-plugin\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/demo.curlythemes.com\/timetable-wordpress-plugin\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/demo.curlythemes.com\/timetable-wordpress-plugin\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/demo.curlythemes.com\/timetable-wordpress-plugin\/wp-json\/wp\/v2\/comments?post=3021"}],"version-history":[{"count":0,"href":"https:\/\/demo.curlythemes.com\/timetable-wordpress-plugin\/wp-json\/wp\/v2\/pages\/3021\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/demo.curlythemes.com\/timetable-wordpress-plugin\/wp-json\/wp\/v2\/pages\/2"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/demo.curlythemes.com\/timetable-wordpress-plugin\/wp-json\/wp\/v2\/media\/3028"}],"wp:attachment":[{"href":"https:\/\/demo.curlythemes.com\/timetable-wordpress-plugin\/wp-json\/wp\/v2\/media?parent=3021"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}