Midwest Component Library v0.24.0

Previews

No matching results.

x
1
2
3
4
5
6
7
8
9
10
11
<div class="midwest-calendar-date">
  <div class="calendar-date-tile">
    <div class="calendar-date-main">
      <div class="calendar-date-day-area">
        <span class="calendar-date-day">24</span>
        <span class="calendar-date-year">2026</span>
      </div>
      <span class="calendar-date-month">JUN</span>
    </div>
  </div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
<% start_val = params[:start_date].present? ? Time.parse(params[:start_date].to_s) : Time.new(2026, 6, 24, 14, 30) %>
<% end_val = params[:end_date].present? ? Time.parse(params[:end_date].to_s) : nil %>
<%= render Midwest::CalendarDateComponent.new(
  start_date: start_val,
  end_date: end_val,
  show_time: params[:show_time] == true,
  clock: params[:clock] == true,
  inline_time: params[:inline_time] == true,
  vertical: params[:vertical] == true,
  size: (params[:size] || "default").to_sym,
  state: (params[:state] || "default").to_sym
) %>

Playground

Explore the component with live parameters.

Param Description Input

Start date and time

End date and time (leave blank for single date)

Display formatted time text

Show SVG analog clock face

Two-column layout with time beside date

Stack tiles vertically

Tile size

Semantic state

No assets to display.
Add a .js or .css file alongside the component to see it here.

Accessibility

Figma embed for Calendar Date/playground

Annotate a preview to embed its Figma design here:

@figma "https://figma.com/..."