Class: Daisy::DataInput::CallyComponent

Inherits:
LocoMotion::BaseComponent show all
Includes:
ViewComponent::SlotableDefault
Defined in:
app/components/daisy/data_input/cally_component.rb

Overview

The Cally component provides a customizable calendar interface for date selection. It supports both single date and date range selection, with configurable display options including the number of months to show and navigation controls.

Defined Under Namespace

Classes: MonthComponent, NextIcon, PreviousIcon

Constant Summary

Constants inherited from LocoMotion::BaseComponent

LocoMotion::BaseComponent::EMPTY_PART_IGNORED_TAGS, LocoMotion::BaseComponent::SELF_CLOSING_TAGS

Instance Attribute Summary

Attributes inherited from LocoMotion::BaseComponent

#config, #loco_parent

Instance Method Summary collapse

Methods inherited from LocoMotion::BaseComponent

build, #component_ref, #config_option, #cssify, define_modifier, define_modifiers, define_part, define_parts, define_size, define_sizes, #empty_part_content, #inspect, #part, register_component_initializer, register_component_setup, #rendered_css, #rendered_data, #rendered_html, #rendered_stimulus_controllers, #rendered_tag_name, renders_many, renders_one, set_component_name, #set_loco_parent, #strip_spaces

Methods included from LocoMotion::Concerns::InspectableComponent

#build_inspect_string

Constructor Details

#initialize(**kws) ⇒ CallyComponent

Initializes a new CallyComponent.

The Cally component provides a customizable calendar interface for date selection. It supports single date selection by default and can be configured for date range selection. The component automatically handles navigation between months and can display multiple months.

Parameters:

  • change (String) —

    ID of an input to update with the selected date. Mutually exclusive with ‘update`.

  • update (String) —

    ID of an element to update with the selected date. Mutually exclusive with ‘change`.

  • id (String) —

    The ID of the calendar element

  • value (String, Date) —

    The currently selected date or range

  • min (String, Date) —

    The minimum selectable date

  • max (String, Date) —

    The maximum selectable date

  • today (String, Date) —

    The date to consider as ‘today’

  • months (Integer) —

    Number of months to display (default: 1)



106
107
108
109
110
111
112
113
114
115
116
117
118
119
 
# File 'app/components/daisy/data_input/cally_component.rb', line 106

def initialize(**kws)
  super

  # If we don't have any modifiers, assume we want a single month for a date select
  @month_count = config_option(:months, modifiers.blank? ? 1 : nil)
  @change = config_option(:change)
  @update = config_option(:update)

  @id = config_option(:id)
  @value = config_option(:value)
  @min = config_option(:min)
  @max = config_option(:max)
  @today = config_option(:today)
end

Instance Method Details

#before_render ⇒ Object

Configures the calendar component before rendering.

Sets up the appropriate tag name based on whether range selection is enabled, adds CSS classes, and configures HTML attributes for the calendar component.



126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
 
# File 'app/components/daisy/data_input/cally_component.rb', line 126

def before_render
  super

  if modifiers.include?(:range)
    set_tag_name(:component, "calendar-range")
  else
    set_tag_name(:component, "calendar-date")
  end

  add_css(:component, "cally")
  add_html(:component, { months: @month_count }) if @month_count

  add_html(:component, {
             id: @id,
             value: @value,
             min: @min,
             max: @max,
             today: @today
           })

  add_html(:component, { onchange: "document.getElementById('#{@change}').value = this.value" }) if @change

  return unless @update

  add_html(:component, { onchange: "document.getElementById('#{@update}').innerHTML = this.value" })
end

#default_next_icon ⇒ NextIcon

Provides a default next icon if none is specified.

Returns:



175
176
177
 
# File 'app/components/daisy/data_input/cally_component.rb', line 175

def default_next_icon
  NextIcon.new(icon: "chevron-right")
end

#default_previous_icon ⇒ PreviousIcon

Provides a default previous icon if none is specified.

Returns:



168
169
170
 
# File 'app/components/daisy/data_input/cally_component.rb', line 168

def default_previous_icon
  PreviousIcon.new(icon: "chevron-left")
end

#month_options(index) ⇒ Hash

Generates options for a month component at the given index.

Parameters:

  • index (Integer) —

    The 0-based index of the month

Returns:

  • (Hash) —

    Options hash for the month component



157
158
159
160
161
162
163
 
# File 'app/components/daisy/data_input/cally_component.rb', line 157

def month_options(index)
  options = {}

  options[:offset] = index if index.positive?

  options
end