Calendars

LocoMotion offers support for the Cally calendar web component styled by DaisyUI.

Warning

You must include the Cally script tag or node module in your application for this component to render and function properly.

npm install cally # or yarn add cally

# application.js
import "cally";

Calendar

Calendars can be used to select a single date. Use the update option to pass a CSS selector of a <div> or other element to update.

Note that this uses the onchange event along with getElementById to provide a very basic change system. You may want to use Stimulus controllers to handle more complex scenarios.

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

Preview

Select a date...

Code

= daisy_cally(update: "cally")

#cally.text-center.italic
  Select a date...

Calendar with Input

You can utilize the change option to change the value of an HTML input when a date is selected.

Similar to the update option, this uses onchange and getElementById, but is specialized for updating an input element's value.

{ onchange: "document.getElementById('#{@update}').value = this.value" }

Tip

To attach a Cally calendar to an input in a popover, use the Cally Input component.

Preview

Code

= daisy_input(id: "cally_input", placeholder: "Select a date...")
= daisy_cally(change: "cally_input")

Calendar Range

Calendars can also allow selection of a range of dates.

Preview

Select a date range...

Code

= daisy_card(css: "card-border bg-base-100 shadow-lg") do
  = daisy_cally(modifier: :range, months: 2, months_css: "grid md:grid-cols-2 gap-8", update: "cally_range")

  #cally_range.text-center.italic
    Select a date range...

Calendars

Calendar

Calendar with Input

Calendar Range

Docs

Guides

Hero

Daisy