{"id":2529,"date":"2020-01-08T12:04:41","date_gmt":"2020-01-08T12:04:41","guid":{"rendered":"https:\/\/webnus.site\/dox\/?p=2529"},"modified":"2026-10-13T10:34:52","modified_gmt":"2026-10-13T10:34:52","slug":"timeline-view-skin-settings","status":"publish","type":"knowledgebase","link":"https:\/\/webnus.net\/dox\/modern-events-calendar\/timeline-view-skin-settings\/","title":{"rendered":"Timeline View Skin Settings"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">&nbsp;<br><span id=\"p0\">Timeline View Skin Settings is one of the most elegant displays in Modern Events Calendar.&nbsp;<\/span><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"How_to_use_Timeline_View_Skin_Settings\"><\/span>How to use Timeline View Skin Settings<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">You can use Timeline View shortcodes in your internal pages to display the events as a timeline for users.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Timeline_View_Skin_Shortcode\"><\/span>Timeline View Skin Shortcode<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The shortcodes are located in&nbsp;<strong>M.E. Calendar  &gt; Shortcodes.<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/webnus.net\/dox\/modern-events-calendar\/wp-content\/uploads\/2023\/10\/timeline.png\" data-rel=\"lightbox-image-0\" data-rl_title=\"\" data-rl_caption=\"\" title=\"\"><img loading=\"lazy\" decoding=\"async\" width=\"1883\" height=\"2925\" src=\"https:\/\/webnus.net\/dox\/modern-events-calendar\/wp-content\/uploads\/2023\/10\/timeline.png\" alt=\"MEC shortcode editor with Timeline View skin display options\" class=\"wp-image-9632\" title=\"\" srcset=\"https:\/\/webnus.net\/dox\/modern-events-calendar\/wp-content\/uploads\/2023\/10\/timeline.png 1883w, https:\/\/webnus.net\/dox\/modern-events-calendar\/wp-content\/uploads\/2023\/10\/timeline-193x300.png 193w, https:\/\/webnus.net\/dox\/modern-events-calendar\/wp-content\/uploads\/2023\/10\/timeline-659x1024.png 659w, https:\/\/webnus.net\/dox\/modern-events-calendar\/wp-content\/uploads\/2023\/10\/timeline-768x1193.png 768w, https:\/\/webnus.net\/dox\/modern-events-calendar\/wp-content\/uploads\/2023\/10\/timeline-989x1536.png 989w, https:\/\/webnus.net\/dox\/modern-events-calendar\/wp-content\/uploads\/2023\/10\/timeline-1318x2048.png 1318w\" sizes=\"auto, (max-width: 1883px) 100vw, 1883px\" \/><\/a><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Here is the demo of Timeline View Skin in the Modern Events Calendar:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/mec.webnus.net\/timeline-view\/\" target=\"_blank\" rel=\"noreferrer noopener\">Timeline View<\/a><\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"timeline-shortcode-options\"><span class=\"ez-toc-section\" id=\"Timeline_View_Shortcode_Options\"><\/span>Timeline View Shortcode Options<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">These are the options you see in <strong>M.E. Calendar &gt; Shortcodes<\/strong> after choosing the <strong>Timeline View<\/strong> skin. MEC Pro and some addons can add more styles and options.<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><thead><tr><th>Option<\/th><th>What it does<\/th><th>Values<\/th><\/tr><\/thead><tbody><tr><td><strong>Start Date<\/strong><\/td><td>The date the view starts showing events from.<\/td><td>Today \/ Tomorrow \/ Yesterday \/ Start of Last Month \/ Start of Current Month \/ Start of Next Month \/ On a certain date<\/td><\/tr><tr><td><strong>Certain Start Date<\/strong><\/td><td>The exact start date, used when Start Date is set to &quot;On a certain date&quot;.<\/td><td>Date<\/td><\/tr><tr><td><strong>End Date<\/strong><\/td><td>Where the list stops. Leave it on &quot;On a certain date&quot; with an empty Maximum Date for no end limit.<\/td><td>On a certain date \/ Today \/ Tomorrow<\/td><\/tr><tr><td><strong>Maximum Date<\/strong><\/td><td>Maximum Date: the last date to include when End Date is &quot;On a certain date&quot;.<\/td><td>Date<\/td><\/tr><tr><td><strong>Limit<\/strong><\/td><td>Maximum number of events loaded at once.<\/td><td>Number<\/td><\/tr><tr><td><strong>Include Local Time<\/strong><\/td><td>Also shows each event&#39;s time in the visitor&#39;s own time zone.<\/td><td>On \/ Off<\/td><\/tr><tr><td><strong>Display Normal Labels<\/strong><\/td><td>Shows event labels such as &quot;Featured&quot; or &quot;Canceled&quot;.<\/td><td>On \/ Off<\/td><\/tr><tr><td><strong>Display Reason for Cancellation<\/strong><\/td><td>Shows the cancellation reason on canceled events.<\/td><td>On \/ Off<\/td><\/tr><tr><td><strong>Display Categories<\/strong><\/td><td>Shows the categories of each event.<\/td><td>On \/ Off<\/td><\/tr><tr><td><strong>Load More Button<\/strong><\/td><td>Adds a &quot;Load More&quot; button so visitors can load the next batch of events.<\/td><td>On \/ Off<\/td><\/tr><tr><td><strong>Show Month Divider<\/strong><\/td><td>Groups events under a heading for each month.<\/td><td>On \/ Off<\/td><\/tr><tr><td><strong>Descending Order<\/strong><\/td><td>Shows the newest events first.<\/td><td>On \/ Off<\/td><\/tr><tr><td><strong>Single Event Display Method<\/strong><\/td><td>How the event opens when clicked.<\/td><td>Current Window \/ New Window \/ Modal Popup \/ Disable Link<\/td><\/tr><tr><td><strong>Booking Button \/ Icon<\/strong><\/td><td>Adds a booking button or icon to each event.<\/td><td>On \/ Off<\/td><\/tr><tr><td><strong>Display Custom Fields<\/strong><\/td><td>Shows event custom fields.<\/td><td>On \/ Off<\/td><\/tr><tr><td><strong>Display Organizers<\/strong><\/td><td>Shows the organizer of each event.<\/td><td>On \/ Off<\/td><\/tr><tr><td><strong>Date Formats<\/strong><\/td><td>Date formats used by the selected style, written with <a href=\"https:\/\/webnus.net\/dox\/modern-events-calendar\/php-date-formats\/\">PHP date characters<\/a>.<\/td><td>Text (e.g. j, M, Y)<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"timeline-faq\"><span class=\"ez-toc-section\" id=\"Timeline_View_FAQ\"><\/span>Timeline View FAQ<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"How_do_I_add_the_Timeline_View_to_a_page\"><\/span>How do I add the Timeline View to a page?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Go to <strong>M.E. Calendar &gt; Shortcodes<\/strong>, add a new shortcode, choose <strong>Timeline View<\/strong> as the skin, set the options above and publish it. Then copy the generated shortcode (for example <code>[MEC id=\"123\"]<\/code>) into any page, post or widget.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"How_do_I_show_only_some_events\"><\/span>How do I show only some events?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Open the <strong>Filter Options<\/strong> of the same shortcode and limit events by category, location, organizer, label, tag or author. See <a href=\"https:\/\/webnus.net\/dox\/modern-events-calendar\/making-advanced-shortcodes\/\">Making Advanced Shortcodes<\/a> for every filter.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Can_the_Timeline_View_show_past_events\"><\/span>Can the Timeline View show past events?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Yes. In <strong>Filter Options &gt; Expired Events<\/strong>, turn on <strong>Include Expired Events<\/strong> to show past and upcoming events, or <strong>Show Only Expired Events<\/strong> to show only past ones. They are listed from the Start Date you choose.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Timeline View is one of the most elegant displays in the Modern Events Calendar.\u00a0<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","template":"","knowledgebase_cat":[42],"class_list":["post-2529","knowledgebase","type-knowledgebase","status-publish","hentry","knowledgebase_cat-shortcodes"],"blocksy_meta":{"styles_descriptor":{"styles":{"desktop":"","tablet":"","mobile":""},"google_fonts":[],"version":8}},"_links":{"self":[{"href":"https:\/\/webnus.net\/dox\/modern-events-calendar\/wp-json\/wp\/v2\/knowledgebase\/2529","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webnus.net\/dox\/modern-events-calendar\/wp-json\/wp\/v2\/knowledgebase"}],"about":[{"href":"https:\/\/webnus.net\/dox\/modern-events-calendar\/wp-json\/wp\/v2\/types\/knowledgebase"}],"author":[{"embeddable":true,"href":"https:\/\/webnus.net\/dox\/modern-events-calendar\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/webnus.net\/dox\/modern-events-calendar\/wp-json\/wp\/v2\/comments?post=2529"}],"version-history":[{"count":3,"href":"https:\/\/webnus.net\/dox\/modern-events-calendar\/wp-json\/wp\/v2\/knowledgebase\/2529\/revisions"}],"predecessor-version":[{"id":13744,"href":"https:\/\/webnus.net\/dox\/modern-events-calendar\/wp-json\/wp\/v2\/knowledgebase\/2529\/revisions\/13744"}],"wp:attachment":[{"href":"https:\/\/webnus.net\/dox\/modern-events-calendar\/wp-json\/wp\/v2\/media?parent=2529"}],"wp:term":[{"taxonomy":"knowledgebase_cat","embeddable":true,"href":"https:\/\/webnus.net\/dox\/modern-events-calendar\/wp-json\/wp\/v2\/knowledgebase_cat?post=2529"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}