{"id":6531,"date":"2026-03-11T18:29:34","date_gmt":"2026-03-11T18:29:34","guid":{"rendered":"https:\/\/creativewebui.com\/flexi-post-grid\/?post_type=docs&p=6531"},"modified":"2026-03-11T18:29:34","modified_gmt":"2026-03-11T18:29:34","password":"","slug":"event-grid-event-date-settings","status":"publish","type":"docs","link":"https:\/\/creativewebui.com\/flexi-post-grid\/documentation\/event-grid-event-date-settings\/","title":{"rendered":"Event Grid & Event Date Settings"},"content":{"rendered":"\n

Flexi Post Grid includes a dedicated Event Grid layout<\/strong> designed for displaying upcoming events in a clean and structured format.
This layout allows you to highlight event dates, manage expiration, and automatically hide past events.<\/p>\n\n\n\n

By combining grid style settings, styling controls, and event field options<\/strong>, you can create fully customizable event listings without writing any code.<\/p>\n\n\n\n

Step 1: Select Event Grid Style<\/h2>\n\n\n\n

To create an event listing layout, first select the Event Grid style<\/strong> from the Grid Style options.<\/p>\n\n\n\n

Go to:<\/p>\n\n\n\n

Grid Widget \u2192 Grid Styles Types \u2192 Event Grid<\/strong><\/p>\n\n\n\n

After selecting this style, your posts will be displayed with a date badge layout<\/strong> suitable for event listings.<\/p>\n\n\n\n

This layout automatically prepares the grid to display the event date badge<\/strong> on each card.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Step 2: Design the Event Date Badge<\/h2>\n\n\n\n

Once the Event Grid style is selected, you can fully customize the appearance of the date badge<\/strong> using the Style settings<\/strong>.<\/p>\n\n\n\n

Go to:<\/p>\n\n\n\n

Style \u2192 Post\/Event Date Styles<\/strong><\/p>\n\n\n\n

Here you can control many visual settings including:<\/p>\n\n\n\n

    \n
  • Date box alignment<\/li>\n\n\n\n
  • Width and height<\/li>\n\n\n\n
  • Position of the date badge<\/li>\n\n\n\n
  • Margin spacing<\/li>\n\n\n\n
  • Background color<\/li>\n\n\n\n
  • Z-index<\/li>\n\n\n\n
  • Separator display<\/li>\n\n\n\n
  • Text alignment<\/li>\n<\/ul>\n\n\n\n

    These options allow you to match the date badge design with your website layout and branding<\/strong>.<\/p>\n\n\n\n

    \"\"<\/figure>\n\n\n\n

    Step 3: Enable Event Date Fields<\/h2>\n\n\n\n

    Flexi Post Grid provides a simple way to add event date fields directly inside the post editor<\/strong>.<\/p>\n\n\n\n

    Go to the plugin settings:<\/p>\n\n\n\n

    Flexi Post Grid \u2192 Event Date Settings<\/strong><\/p>\n\n\n\n

    Then configure the following:<\/p>\n\n\n\n

    Event Fields Post Types<\/h3>\n\n\n\n

    Select the post types<\/strong> where you want the Event Date fields to appear.<\/p>\n\n\n\n

    Once selected, the event fields will automatically appear inside the WordPress post editor.<\/p>\n\n\n\n

    Show Event Date<\/h3>\n\n\n\n

    Enable this option to display the event date badge in the Event Grid layout.<\/p>\n\n\n\n

    Month Name<\/h3>\n\n\n\n

    Choose how the month should appear in the date badge:<\/p>\n\n\n\n

      \n
    • Short month name<\/li>\n\n\n\n
    • Full month name<\/li>\n<\/ul>\n\n\n\n

      Hide Expired Events<\/h3>\n\n\n\n

      Enable this option if you want past events to automatically disappear from the grid<\/strong>.<\/p>\n\n\n\n

      \"\"<\/figure>\n\n\n\n

      Step 4: Add Event Date in the Post Editor<\/h2>\n\n\n\n

      After selecting a post type in the Event Date Settings, new fields will appear in the post editor sidebar<\/strong>.<\/p>\n\n\n\n

      You will see the section:<\/p>\n\n\n\n

      Flexi Post Grid: Event Fields<\/strong><\/p>\n\n\n\n

      Inside this section you can set:<\/p>\n\n\n\n

      Event Date<\/h3>\n\n\n\n

      The date when the event will occur.<\/p>\n\n\n\n

      Expire Date<\/h3>\n\n\n\n

      The date when the event should be considered finished.<\/p>\n\n\n\n

      If the Hide Expired Events<\/strong> option is enabled, the event will automatically disappear from the grid after this date.<\/p>\n\n\n\n

      \"\"<\/figure>\n\n\n\n

      How Expired Events Work<\/h2>\n\n\n\n

      When Hide Expired Events<\/strong> is enabled:<\/p>\n\n\n\n

        \n
      1. Each event has an Expire Date<\/strong><\/li>\n\n\n\n
      2. After the expire date passes<\/li>\n\n\n\n
      3. Flexi Post Grid automatically removes the event from the grid<\/strong><\/li>\n<\/ol>\n\n\n\n

        This allows you to maintain clean and up-to-date event listings without manual editing<\/strong>.<\/p>\n\n\n\n

        Event Grid Use Cases<\/h2>\n\n\n\n

        The Event Grid layout is perfect for displaying:<\/p>\n\n\n\n

          \n
        • Conferences<\/li>\n\n\n\n
        • Workshops<\/li>\n\n\n\n
        • Webinars<\/li>\n\n\n\n
        • Meetups<\/li>\n\n\n\n
        • Training sessions<\/li>\n\n\n\n
        • Community events<\/li>\n\n\n\n
        • Online events<\/li>\n<\/ul>\n\n\n\n

          Because expired events can be hidden automatically, it works well for websites that frequently publish new events<\/strong>.<\/p>\n\n\n\n

          Pro Tip<\/h2>\n\n\n\n

          For best results:<\/p>\n\n\n\n

            \n
          • Use a featured image<\/strong> for each event<\/li>\n\n\n\n
          • Add a clear event title<\/strong><\/li>\n\n\n\n
          • Include a short description<\/strong><\/li>\n\n\n\n
          • Set the Event Date and Expire Date correctly<\/strong><\/li>\n<\/ul>\n\n\n\n

            This ensures your event grid looks professional and easy to browse.<\/p>\n","protected":false},"excerpt":{"rendered":"

            Flexi Post Grid includes a dedicated Event Grid layout designed for displaying upcoming events in a clean and structured format.This layout allows you to highlight event dates, manage expiration, and automatically hide past events. By combining grid style settings, styling controls, and event field options, you can create fully customizable event listings without writing any code. Step 1: Select Event Grid Style To create an event listing layout, first select the Event Grid style from the Grid Style options. Go to: Grid Widget \u2192 Grid Styles Types \u2192 Event Grid After selecting this style, your posts will be displayed with a date badge layout suitable for event listings. This layout automatically prepares the grid to display the event date badge on each card. Step 2: Design the Event Date Badge Once the Event Grid style is selected, you can fully customize the appearance of the date badge using the Style settings. Go to: Style \u2192 Post\/Event Date Styles Here you can control many visual settings including: These options allow you to match the date badge design with your website layout and branding. Step 3: Enable Event Date Fields Flexi Post Grid provides a simple way to add event date fields directly inside the post editor. Go to the plugin settings: Flexi Post Grid \u2192 Event Date Settings Then configure the following: Event Fields Post Types Select the post types where you want the Event Date fields to appear. Once selected, the event fields will automatically appear inside the WordPress post editor. Show Event Date Enable this option to display the event date badge in the Event Grid layout. Month Name Choose how the month should appear in the date badge: Hide Expired Events Enable this option if you want past events to automatically disappear from the grid. Step 4: Add Event Date in the Post Editor After selecting a post type in the Event Date Settings, new fields will appear in the post editor sidebar. You will see the section: Flexi Post Grid: Event Fields Inside this section you can set: Event Date The date when the event will occur. Expire Date The date when the event should be considered finished. If the Hide Expired Events option is enabled, the event will automatically disappear from the grid after this date. How Expired Events Work When Hide Expired Events is enabled: This allows you to maintain clean and up-to-date event listings without manual editing. Event Grid Use Cases The Event Grid layout is perfect for displaying: Because expired events can be hidden automatically, it works well for websites that frequently publish new events. Pro Tip For best results: This ensures your event grid looks professional and easy to browse.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","template":"","meta":{"footnotes":""},"doc_category":[26],"doc_tag":[],"class_list":["post-6531","docs","type-docs","status-publish","hentry","doc_category-using-the-plugin"],"year_month":"2026-04","word_count":523,"total_views":0,"reactions":{"happy":0,"normal":0,"sad":0},"author_info":{"name":"Elementordipak","author_nicename":"elementordipak","author_url":"https:\/\/creativewebui.com\/flexi-post-grid\/author\/elementordipak\/"},"doc_category_info":[{"term_name":"Using the Plugin","term_url":"https:\/\/creativewebui.com\/flexi-post-grid\/docs-category\/using-the-plugin\/"}],"doc_tag_info":[],"yoast_head":"\nEvent Grid & Event Date Settings \u2013 Flexi Post Grid Documentation<\/title>\n<meta name=\"description\" content=\"Learn how to create event listings using the Event Grid layout in Flexi Post Grid. Configure event date fields, style the date badge, and automatically hide expired events for clean and organized event displays.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/creativewebui.com\/flexi-post-grid\/documentation\/event-grid-event-date-settings\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Event Grid & Event Date Settings \u2013 Flexi Post Grid Documentation\" \/>\n<meta property=\"og:description\" content=\"Learn how to create event listings using the Event Grid layout in Flexi Post Grid. Configure event date fields, style the date badge, and automatically hide expired events for clean and organized event displays.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/creativewebui.com\/flexi-post-grid\/documentation\/event-grid-event-date-settings\/\" \/>\n<meta property=\"og:site_name\" content=\"Flexi Post Grid\" \/>\n<meta property=\"og:image\" content=\"https:\/\/creativewebui.com\/flexi-post-grid\/wp-content\/uploads\/2026\/03\/Event-Grid-Style.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"178\" \/>\n\t<meta property=\"og:image:height\" content=\"205\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/creativewebui.com\/flexi-post-grid\/documentation\/event-grid-event-date-settings\/\",\"url\":\"https:\/\/creativewebui.com\/flexi-post-grid\/documentation\/event-grid-event-date-settings\/\",\"name\":\"Event Grid & Event Date Settings \u2013 Flexi Post Grid Documentation\",\"isPartOf\":{\"@id\":\"https:\/\/flexipostgrid.creativewebui.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/creativewebui.com\/flexi-post-grid\/documentation\/event-grid-event-date-settings\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/creativewebui.com\/flexi-post-grid\/documentation\/event-grid-event-date-settings\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/creativewebui.com\/flexi-post-grid\/wp-content\/uploads\/2026\/03\/Event-Grid-Style.jpg\",\"datePublished\":\"2026-03-11T18:29:34+00:00\",\"description\":\"Learn how to create event listings using the Event Grid layout in Flexi Post Grid. Configure event date fields, style the date badge, and automatically hide expired events for clean and organized event displays.\",\"breadcrumb\":{\"@id\":\"https:\/\/creativewebui.com\/flexi-post-grid\/documentation\/event-grid-event-date-settings\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/creativewebui.com\/flexi-post-grid\/documentation\/event-grid-event-date-settings\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/creativewebui.com\/flexi-post-grid\/documentation\/event-grid-event-date-settings\/#primaryimage\",\"url\":\"https:\/\/creativewebui.com\/flexi-post-grid\/wp-content\/uploads\/2026\/03\/Event-Grid-Style.jpg\",\"contentUrl\":\"https:\/\/creativewebui.com\/flexi-post-grid\/wp-content\/uploads\/2026\/03\/Event-Grid-Style.jpg\",\"width\":178,\"height\":205},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/creativewebui.com\/flexi-post-grid\/documentation\/event-grid-event-date-settings\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/creativewebui.com\/flexi-post-grid\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Documentation\",\"item\":\"https:\/\/flexipostgrid.creativewebui.com\/documentation\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Event Grid & Event Date Settings\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/flexipostgrid.creativewebui.com\/#website\",\"url\":\"https:\/\/flexipostgrid.creativewebui.com\/\",\"name\":\"Flexi Post Grid\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/flexipostgrid.creativewebui.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Event Grid & Event Date Settings \u2013 Flexi Post Grid Documentation","description":"Learn how to create event listings using the Event Grid layout in Flexi Post Grid. Configure event date fields, style the date badge, and automatically hide expired events for clean and organized event displays.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/creativewebui.com\/flexi-post-grid\/documentation\/event-grid-event-date-settings\/","og_locale":"en_US","og_type":"article","og_title":"Event Grid & Event Date Settings \u2013 Flexi Post Grid Documentation","og_description":"Learn how to create event listings using the Event Grid layout in Flexi Post Grid. Configure event date fields, style the date badge, and automatically hide expired events for clean and organized event displays.","og_url":"https:\/\/creativewebui.com\/flexi-post-grid\/documentation\/event-grid-event-date-settings\/","og_site_name":"Flexi Post Grid","og_image":[{"width":178,"height":205,"url":"https:\/\/creativewebui.com\/flexi-post-grid\/wp-content\/uploads\/2026\/03\/Event-Grid-Style.jpg","type":"image\/jpeg"}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/creativewebui.com\/flexi-post-grid\/documentation\/event-grid-event-date-settings\/","url":"https:\/\/creativewebui.com\/flexi-post-grid\/documentation\/event-grid-event-date-settings\/","name":"Event Grid & Event Date Settings \u2013 Flexi Post Grid Documentation","isPartOf":{"@id":"https:\/\/flexipostgrid.creativewebui.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/creativewebui.com\/flexi-post-grid\/documentation\/event-grid-event-date-settings\/#primaryimage"},"image":{"@id":"https:\/\/creativewebui.com\/flexi-post-grid\/documentation\/event-grid-event-date-settings\/#primaryimage"},"thumbnailUrl":"https:\/\/creativewebui.com\/flexi-post-grid\/wp-content\/uploads\/2026\/03\/Event-Grid-Style.jpg","datePublished":"2026-03-11T18:29:34+00:00","description":"Learn how to create event listings using the Event Grid layout in Flexi Post Grid. Configure event date fields, style the date badge, and automatically hide expired events for clean and organized event displays.","breadcrumb":{"@id":"https:\/\/creativewebui.com\/flexi-post-grid\/documentation\/event-grid-event-date-settings\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/creativewebui.com\/flexi-post-grid\/documentation\/event-grid-event-date-settings\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/creativewebui.com\/flexi-post-grid\/documentation\/event-grid-event-date-settings\/#primaryimage","url":"https:\/\/creativewebui.com\/flexi-post-grid\/wp-content\/uploads\/2026\/03\/Event-Grid-Style.jpg","contentUrl":"https:\/\/creativewebui.com\/flexi-post-grid\/wp-content\/uploads\/2026\/03\/Event-Grid-Style.jpg","width":178,"height":205},{"@type":"BreadcrumbList","@id":"https:\/\/creativewebui.com\/flexi-post-grid\/documentation\/event-grid-event-date-settings\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/creativewebui.com\/flexi-post-grid\/"},{"@type":"ListItem","position":2,"name":"Documentation","item":"https:\/\/flexipostgrid.creativewebui.com\/documentation\/"},{"@type":"ListItem","position":3,"name":"Event Grid & Event Date Settings"}]},{"@type":"WebSite","@id":"https:\/\/flexipostgrid.creativewebui.com\/#website","url":"https:\/\/flexipostgrid.creativewebui.com\/","name":"Flexi Post Grid","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/flexipostgrid.creativewebui.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"}]}},"_links":{"self":[{"href":"https:\/\/creativewebui.com\/flexi-post-grid\/wp-json\/wp\/v2\/docs\/6531","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/creativewebui.com\/flexi-post-grid\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/creativewebui.com\/flexi-post-grid\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/creativewebui.com\/flexi-post-grid\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/creativewebui.com\/flexi-post-grid\/wp-json\/wp\/v2\/comments?post=6531"}],"version-history":[{"count":1,"href":"https:\/\/creativewebui.com\/flexi-post-grid\/wp-json\/wp\/v2\/docs\/6531\/revisions"}],"predecessor-version":[{"id":6532,"href":"https:\/\/creativewebui.com\/flexi-post-grid\/wp-json\/wp\/v2\/docs\/6531\/revisions\/6532"}],"wp:attachment":[{"href":"https:\/\/creativewebui.com\/flexi-post-grid\/wp-json\/wp\/v2\/media?parent=6531"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/creativewebui.com\/flexi-post-grid\/wp-json\/wp\/v2\/doc_category?post=6531"},{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/creativewebui.com\/flexi-post-grid\/wp-json\/wp\/v2\/doc_tag?post=6531"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}