{"id":150,"date":"2016-01-17T22:00:33","date_gmt":"2016-01-17T22:00:33","guid":{"rendered":"http:\/\/demo.curlythemes.com\/timetable-wordpress-plugin\/?page_id=150"},"modified":"2017-04-20T10:49:16","modified_gmt":"2017-04-20T10:49:16","slug":"schedule-tabs","status":"publish","type":"page","link":"https:\/\/demo.curlythemes.com\/timetable-wordpress-plugin\/examples\/schedule-tabs\/","title":{"rendered":"Dance Classes Timetable"},"content":{"rendered":"<p>[vc_row full_width=&#8221;stretch_row&#8221; css=&#8221;.vc_custom_1492623145088{padding-bottom: 40px !important;}&#8221; grid=&#8221;true&#8221;][vc_column][vc_column_text]<\/p>\n<h1 style=\"text-align: center;\"><small>Weekly Tabs Example<\/small>Dance Classes Timetable<\/h1>\n<p class=\"lead\" style=\"text-align: center;\">The Weekly Tabs style is great for a Dance Studio website, allowing you to list the available classes by the day of the week. The schedule will always start with the current day, so your visitors can see right away which classes are available soon. Visitors can use filters to display only Tango and Salsa classes, with their favourite dance instructor, only morning classes, etc.<\/p>\n<p>[\/vc_column_text][\/vc_column][\/vc_row][vc_row full_width=&#8221;stretch_row&#8221; css=&#8221;.vc_custom_1492623149823{padding-top: 0px !important;padding-bottom: 50px !important;}&#8221; grid=&#8221;true&#8221;][vc_column width=&#8221;1\/2&#8243; offset=&#8221;vc_col-sm-offset-3&#8243;][vc_column_text]<\/p>\n<ul>\n<li>Classes are listed on tabs, separated by the day of the week<\/li>\n<li>You can set classes\u00a0to appear\u00a0automatically every week<\/li>\n<li>It allows a Call-to-Action button for Links, iCal Events and Email<\/li>\n<li>Clicking on events will open a pop-up window, with text and images<\/li>\n<li>You can assign as many Dance Types, Instructors and Locations as you need<\/li>\n<li>Canceled events will be displayed as shaded and are not clickable<\/li>\n<\/ul>\n<p>[\/vc_column_text][\/vc_column][\/vc_row][vc_row el_class=&#8221;content-padding-none&#8221; css=&#8221;.vc_custom_1492623161748{background: #f0f1f2 url(http:\/\/demo.curlythemes.com\/timetable-wordpress-plugin\/wp-content\/uploads\/sites\/10\/2016\/02\/Layer-6.jpg?id=342) !important;background-position: center !important;background-repeat: no-repeat !important;background-size: cover !important;}&#8221; grid=&#8221;true&#8221;][vc_column el_class=&#8221;content-padding-lg&#8221; css=&#8221;.vc_custom_1455298171733{padding-top: 20px !important;padding-right: 50px !important;padding-bottom: 50px !important;padding-left: 50px !important;background-color: rgba(255,255,255,0.93) !important;*background-color: rgb(255,255,255) !important;}&#8221;]\t\t<div class=\"wcs-timetable__wrapper\">\n\t\t\t<div class=\"wcs-vue\" id=\"wcs-app-5\"><\/div>\n\t\t<\/div>\n\t\t[vc_empty_space][vc_column_text el_class=&#8221;maxim&#8221;]<\/p>\n<p class=\"lead\" style=\"text-align: center;\"><span style=\"color: #bd322c;\">Check out <a style=\"color: #bd322c;\" href=\"https:\/\/themeforest.net\/item\/dance-wordpress-theme-pirouette-studio\/18118447\" target=\"_blank\"><span style=\"text-decoration: underline;\">Pirouette Dance Studio WordPress Theme<\/span><\/a>\u00a0if You are Looking for the Best\u00a0<strong>Dance Studio WordPress Theme!<\/strong> (theme includes the Events Schedule plugin)<\/span><\/p>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;16px&#8221;][\/vc_column][\/vc_row][vc_row css=&#8221;.vc_custom_1492623167001{padding-top: 0px !important;padding-bottom: 0px !important;}&#8221; grid=&#8221;true&#8221;][vc_column width=&#8221;2\/3&#8243; offset=&#8221;vc_col-sm-offset-2&#8243; css=&#8221;.vc_custom_1456440747776{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 Weekly Tabs style, one of our eight\u00a0layout styles available, you can display your events separated by the day of the week. Filters can be used to sort the events and the selection will reflect in all tabs. If there are no classes matching the selection in a day, that tab will display a custom \u201cno classes available&#8221; message.<\/span><\/p>\n<p><a href=\"http:\/\/demo.curlythemes.com\/timetable-wordpress-plugin\/schedule-tabs-plain\/\" target=\"_blank\">See this schedule on a blank page<\/a>[\/vc_column_text][\/vc_column][\/vc_row][vc_row css=&#8221;.vc_custom_1492623172582{border-top-width: 0px !important;}&#8221; grid=&#8221;true&#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; css=&#8221;.vc_custom_1455216512937{padding-top: 30px !important;padding-bottom: 30px !important;}&#8221; no_fill=&#8221;true&#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 Our Dance Classes.<\/li>\n<li>Select the Weekly Tabs style, great for a Dance Studio schedule.<\/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 a Dance Studio.<\/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.<\/li>\n<li>You can also customize other messages, like the one for no classes 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 All Days, as all our events are repeated every week.<\/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 Small Image option.<\/li>\n<li>The Design Options allow you to choose the two colors of the schedule: one for the text and one for the special elements.<\/li>\n<\/ul>\n<p>[\/vc_column_text][\/vc_tta_section][vc_tta_section i_icon_fontawesome=&#8221;fa fa-flag&#8221; title=&#8221;Done!&#8221; tab_id=&#8221;1455214599342-fb76472e-812b&#8221; add_icon=&#8221;true&#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_1455363663784{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;3122&#8243; img_size=&#8221;full&#8221; alignment=&#8221;center&#8221; el_class=&#8221;curly-lightbox&#8221;][\/vc_column][\/vc_row][vc_row css=&#8221;.vc_custom_1492623192384{padding-top: 0px !important;}&#8221; grid=&#8221;true&#8221;][vc_column width=&#8221;5\/6&#8243; offset=&#8221;vc_col-sm-offset-1&#8243;][vc_column_text]<\/p>\n<p class=\"lead\" style=\"text-align: center;\"><span style=\"color: #bd322c;\">Building a Dance Studio Website? Interested in a Theme With Bundled Timetable?\u00a0Why not use\u00a0<span style=\"text-decoration: underline;\"><a style=\"color: #bd322c;\" href=\"https:\/\/themeforest.net\/item\/dance-wordpress-theme-pirouette-studio\/18118447\" target=\"_blank\">Pirouette Dance Studio WordPress Theme<\/a><\/span><span style=\"color: #bd322c;\">,\u00a0<\/span>the Best\u00a0<strong>Dance Studio WordPress Theme!<\/strong><\/span><\/p>\n<p>[\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n","protected":false},"excerpt":{"rendered":"<p>[vc_row full_width=&#8221;stretch_row&#8221; css=&#8221;.vc_custom_1492623145088{padding-bottom: 40px !important;}&#8221; grid=&#8221;true&#8221;][vc_column][vc_column_text] Weekly Tabs ExampleDance Classes Timetable The Weekly Tabs style is great for a Dance [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":550,"parent":2,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"page-templates\/page-fullwidth.php","meta":{"footnotes":""},"class_list":["post-150","page","type-page","status-publish","has-post-thumbnail","hentry"],"_links":{"self":[{"href":"https:\/\/demo.curlythemes.com\/timetable-wordpress-plugin\/wp-json\/wp\/v2\/pages\/150","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=150"}],"version-history":[{"count":0,"href":"https:\/\/demo.curlythemes.com\/timetable-wordpress-plugin\/wp-json\/wp\/v2\/pages\/150\/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\/550"}],"wp:attachment":[{"href":"https:\/\/demo.curlythemes.com\/timetable-wordpress-plugin\/wp-json\/wp\/v2\/media?parent=150"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}