Class: UI::Calendar

Inherits:
Phlex::HTML
  • Object
show all
Includes:
CalendarBehavior
Defined in:
app/components/ui/calendar.rb

Overview

Calendar component (Phlex) A date picker calendar with support for single, range, and multiple selection

Examples:

Basic usage (single date)

render UI::Calendar.new(selected: Date.today)

Range selection

render UI::Calendar.new(mode: :range, selected: Date.today..Date.today + 7)

Multiple months

render UI::Calendar.new(number_of_months: 2)

With dropdowns

render UI::Calendar.new(show_dropdowns: true)

Constant Summary

Constants included from CalendarBehavior

UI::CalendarBehavior::WEEKDAYS

Instance Method Summary collapse

Methods included from CalendarBehavior

#aria_label_text, #calendar_classes, #calendar_data_attributes, #calendar_html_attributes, #disabled_dates_json, #ordered_weekdays, #selected_json, #selected_value, #use_native_select?

Constructor Details

#initialize(mode: :single, selected: nil, month: Date.today, number_of_months: 1, week_starts_on: 0, locale: "en-US", min_date: nil, max_date: nil, disabled_dates: [], show_outside_days: true, fixed_weeks: false, show_dropdowns: false, year_range: 100, min_range_days: 0, max_range_days: 0, exclude_disabled: false, use_native_select: true, name: nil, classes: "", **attributes) ⇒ Calendar

Returns a new instance of Calendar.

Parameters:

  • mode (Symbol) (defaults to: :single) —

    :single, :range, or :multiple selection mode

  • selected (Date, Range, Array) (defaults to: nil) —

    initially selected date(s)

  • month (Date) (defaults to: Date.today) —

    initially displayed month

  • number_of_months (Integer) (defaults to: 1) —

    number of months to display side by side

  • week_starts_on (Integer) (defaults to: 0) —

    0 for Sunday, 1 for Monday, etc.

  • locale (String) (defaults to: "en-US") —

    BCP 47 locale tag for formatting (default: “en-US”)

  • min_date (Date) (defaults to: nil) —

    minimum selectable date

  • max_date (Date) (defaults to: nil) —

    maximum selectable date

  • disabled_dates (Array<Date>) (defaults to: []) —

    dates that cannot be selected

  • show_outside_days (Boolean) (defaults to: true) —

    show days from adjacent months

  • fixed_weeks (Boolean) (defaults to: false) —

    always show 6 weeks

  • show_dropdowns (Boolean) (defaults to: false) —

    show month/year dropdowns

  • year_range (Integer) (defaults to: 100) —

    number of years to show in dropdown

  • min_range_days (Integer) (defaults to: 0) —

    minimum days for range selection (0 = no min)

  • max_range_days (Integer) (defaults to: 0) —

    maximum days for range selection (0 = no max)

  • exclude_disabled (Boolean) (defaults to: false) —

    prevent ranges that contain disabled dates

  • use_native_select (Boolean) (defaults to: true) —

    use native HTML select for dropdowns (default: true)

  • name (String) (defaults to: nil) —

    form field name for hidden input

  • classes (String) (defaults to: "") —

    additional CSS classes

  • attributes (Hash) —

    additional HTML attributes



40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
 
# File 'app/components/ui/calendar.rb', line 40

def initialize(
  mode: :single,
  selected: nil,
  month: Date.today,
  number_of_months: 1,
  week_starts_on: 0,
  locale: "en-US",
  min_date: nil,
  max_date: nil,
  disabled_dates: [],
  show_outside_days: true,
  fixed_weeks: false,
  show_dropdowns: false,
  year_range: 100,
  min_range_days: 0,
  max_range_days: 0,
  exclude_disabled: false,
  use_native_select: true,
  name: nil,
  classes: "",
  **attributes
)
  @mode = mode
  @selected = selected
  @month = month
  @number_of_months = number_of_months
  @week_starts_on = week_starts_on
  @locale = locale
  @min_date = min_date
  @max_date = max_date
  @disabled_dates = disabled_dates
  @show_outside_days = show_outside_days
  @fixed_weeks = fixed_weeks
  @show_dropdowns = show_dropdowns
  @year_range = year_range
  @min_range_days = min_range_days
  @max_range_days = max_range_days
  @exclude_disabled = exclude_disabled
  @use_native_select = use_native_select
  @name = name
  @classes = classes
  @attributes = attributes
  super()
end

Instance Method Details

#view_template ⇒ Object 



85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
 
# File 'app/components/ui/calendar.rb', line 85

def view_template
  div(**calendar_html_attributes) do
    # Screen reader live region for announcements
    div(class: "sr-only", aria_live: "polite", aria_atomic: "true", data: {ui__calendar_target: "liveRegion"})

    # Hidden input for form submission
    if @name
      input(type: "hidden", name: @name, value: selected_value, data: {ui__calendar_target: "input"})
    end

    @number_of_months.times do |i|
      render_month(i)
    end
  end
end