calendar

Calendar includes styles for different calendar libraries.

Base Calendars

cally = SingleValueFactory("cally", "Base calendar component for Cally web component") # Base Cally calendar component
pika_single = SingleValueFactory("pika-single", "Base calendar component for the input field that opens Pikaday calendar") # Base Pikaday calender component
react_day_picker = SingleValueFactory("react-day-picker", "Base calendar component for the DayPicker component") # Base DayPicker calendar component

Calendary Test Examples

---

source

test_calendar_basic_examples

 test_calendar_basic_examples ()

Test basic calendar utilities.

def test_calendar_basic_examples():
    """Test basic calendar utilities."""
    # Basic calendar
    assert str(cally) == "cally"
    assert str(pika_single) == "pika-single"
    assert str(react_day_picker) == "react-day-picker"
    
    # Test with modifiers
    assert str(cally.hover) == "hover:cally"
    assert str(pika_single.md) == "md:pika-single"
    assert str(react_day_picker.dark) == "dark:react-day-picker"

# Run the tests
test_calendar_basic_examples()

---

source

test_calendar_cally_basic_fasthtml_examples

 test_calendar_cally_basic_fasthtml_examples ()

Test Cally calendar example from daisyUI v5 documentation.

def test_calendar_cally_basic_fasthtml_examples():
    """Test Cally calendar example from daisyUI v5 documentation."""
    from fasthtml.common import Div, Script
    from fasthtml.svg import Svg, Path
    from cjm_fasthtml_tailwind.utilities.sizing import size_util
    from cjm_fasthtml_tailwind.utilities.svg import fill
    from cjm_fasthtml_tailwind.utilities.borders import border
    from cjm_fasthtml_tailwind.utilities.effects import shadow
    from cjm_fasthtml_tailwind.core.base import SingleValueFactory
    from cjm_fasthtml_daisyui.utilities.semantic_colors import bg_dui, border_dui
    from cjm_fasthtml_daisyui.utilities.border_radius import border_radius

    from fasthtml.components import Calendar_date, Calendar_month # Automatic creation of custom FT components
    
    
    # Create navigation icons
    prev_icon = Svg(
        Path(
            fill="currentColor",
            d="M15.75 19.5 8.25 12l7.5-7.5"
        ),
        aria_label="Previous",
        cls=combine_classes(fill.current, size_util._4),
        slot="previous",
        xmlns="http://www.w3.org/2000/svg",
        viewBox="0 0 24 24"
    )
    
    next_icon = Svg(
        Path(
            fill="currentColor",
            d="m8.25 4.5 7.5 7.5-7.5 7.5"
        ),
        aria_label="Next",
        cls=combine_classes(fill.current, size_util._4),
        slot="next",
        xmlns="http://www.w3.org/2000/svg",
        viewBox="0 0 24 24"
    )
    
    # Create Cally calendar
    calendar = Calendar_date(
        prev_icon,
        next_icon,
        Calendar_month(),
        cls=combine_classes(cally, bg_dui.base_100, border(), border_dui.base_300, shadow.lg, border_radius.box)
    )
    
    # Add script to import Cally web component
    script = Script(
        type="module",
        src="https://unpkg.com/cally"
    )
    
    # Verify structure
    assert calendar.tag == "calendar-date"
    assert "cally" in calendar.attrs['class']
    assert "bg-base-100" in calendar.attrs['class']
    assert "border" in calendar.attrs['class']
    assert "border-base-300" in calendar.attrs['class']
    assert "shadow-lg" in calendar.attrs['class']
    assert "rounded-box" in calendar.attrs['class']
    
    # Check children
    assert len(calendar.children) == 3  # prev icon, next icon, calendar-month
    
    # Check prev icon
    assert calendar.children[0].tag == "svg"
    assert calendar.children[0].attrs['aria-label'] == "Previous"
    assert calendar.children[0].attrs['slot'] == "previous"
    assert "fill-current" in calendar.children[0].attrs['class']
    assert "size-4" in calendar.children[0].attrs['class']
    
    # Check next icon
    assert calendar.children[1].tag == "svg"
    assert calendar.children[1].attrs['aria-label'] == "Next"
    assert calendar.children[1].attrs['slot'] == "next"
    
    # Check calendar-month
    assert calendar.children[2].tag == "calendar-month"
    
    # Return the calendar with script
    return Div(
        script,
        calendar
    )

# Run the tests
test_calendar_cally_basic_fasthtml_examples()

<div>
<script type="module" src="https://unpkg.com/cally"></script><calendar-date class="cally bg-base-100 border border-base-300 shadow-lg rounded-box"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" aria-label="Previous" slot="previous" class="fill-current size-4"><path d="M15.75 19.5 8.25 12l7.5-7.5" fill="currentColor"></path></svg><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" aria-label="Next" slot="next" class="fill-current size-4"><path d="m8.25 4.5 7.5 7.5-7.5 7.5" fill="currentColor"></path></svg><calendar-month></calendar-month></calendar-date></div>

test_func = test_calendar_cally_basic_fasthtml_examples
app, rt = create_test_app(theme=DaisyUITheme.LIGHT)

@rt
def index():
    return create_test_page(test_func.__doc__.title().replace('.', ''), test_func())
server = start_test_server(app)
display(HTMX())
server.stop()

---

source

test_cally_date_picker_fasthtml_examples

 test_cally_date_picker_fasthtml_examples ()

Test Cally date picker example from daisyUI v5 documentation.

def test_cally_date_picker_fasthtml_examples():
    """Test Cally date picker example from daisyUI v5 documentation."""
    from fasthtml.common import Button, Div, Script
    from fasthtml.svg import Svg, Path
    from cjm_fasthtml_tailwind.utilities.sizing import size_util
    from cjm_fasthtml_tailwind.utilities.svg import fill
    from cjm_fasthtml_tailwind.utilities.effects import shadow
    from cjm_fasthtml_daisyui.components.data_input.text_input import text_input, text_input_styles
    from cjm_fasthtml_daisyui.components.actions.dropdown import dropdown
    from cjm_fasthtml_daisyui.utilities.semantic_colors import bg_dui
    from cjm_fasthtml_daisyui.utilities.border_radius import border_radius
    
    from fasthtml.components import Calendar_date, Calendar_month  # Automatic creation of custom FT components
    
    # Create navigation icons
    prev_icon = Svg(
        Path(
            d="M15.75 19.5 8.25 12l7.5-7.5"
        ),
        aria_label="Previous",
        cls=combine_classes(fill.current, size_util._4),
        slot="previous",
        xmlns="http://www.w3.org/2000/svg",
        viewBox="0 0 24 24"
    )
    
    next_icon = Svg(
        Path(
            d="m8.25 4.5 7.5 7.5-7.5 7.5"
        ),
        aria_label="Next",
        cls=combine_classes(fill.current, size_util._4),
        slot="next",
        xmlns="http://www.w3.org/2000/svg",
        viewBox="0 0 24 24"
    )
    
    # Create date picker button
    picker_button = Button(
        "Pick a date",
        popovertarget="cally-popover1",
        cls=combine_classes(text_input),
        id="cally1",
        style="anchor-name:--cally1"
    )
    
    # Create popover with calendar
    popover = Div(
        Calendar_date(
            prev_icon,
            next_icon,
            Calendar_month(),
            cls=str(cally),
            onchange="{document.getElementById('cally1').innerText = this.value}"
        ),
        popover=True,
        id="cally-popover1",
        cls=combine_classes(dropdown, bg_dui.base_100, border_radius.box, shadow.lg),
        style="position-anchor:--cally1"
    )
    
    # Add script to import Cally web component
    script = Script(
        type="module",
        src="https://unpkg.com/cally"
    )
    
    # Verify button structure
    assert picker_button.tag == "button"
    assert picker_button.attrs['popovertarget'] == "cally-popover1"
    assert "input" in picker_button.attrs['class']
    assert picker_button.attrs['id'] == "cally1"
    assert picker_button.attrs['style'] == "anchor-name:--cally1"
    assert picker_button.children[0] == "Pick a date"
    
    # Verify popover structure
    assert popover.tag == "div"
    assert popover.attrs['popover'] == True
    assert popover.attrs['id'] == "cally-popover1"
    assert "dropdown" in popover.attrs['class']
    assert "bg-base-100" in popover.attrs['class']
    assert "rounded-box" in popover.attrs['class']
    assert "shadow-lg" in popover.attrs['class']
    assert popover.attrs['style'] == "position-anchor:--cally1"
    
    # Verify calendar-date inside popover
    calendar_date = popover.children[0]
    assert calendar_date.tag == "calendar-date"
    assert calendar_date.attrs['class'] == "cally"
    assert calendar_date.attrs['onchange'] == "{document.getElementById('cally1').innerText = this.value}"
    assert len(calendar_date.children) == 3  # prev icon, next icon, calendar-month
    
    # Return the complete date picker setup
    return Div(
        script,
        picker_button,
        popover
    )

# Run the tests
test_cally_date_picker_fasthtml_examples()

<div>
<script type="module" src="https://unpkg.com/cally"></script><button popovertarget="cally-popover1" id="cally1" class="input" style="anchor-name:--cally1" name="cally1">Pick a date</button>  <div popover id="cally-popover1" class="dropdown bg-base-100 rounded-box shadow-lg" style="position-anchor:--cally1">
<calendar-date onchange="{document.getElementById('cally1').innerText = this.value}" class="cally"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" aria-label="Previous" slot="previous" class="fill-current size-4"><path d="M15.75 19.5 8.25 12l7.5-7.5"></path></svg><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" aria-label="Next" slot="next" class="fill-current size-4"><path d="m8.25 4.5 7.5 7.5-7.5 7.5"></path></svg><calendar-month></calendar-month></calendar-date>  </div>
</div>

test_func = test_cally_date_picker_fasthtml_examples
app, rt = create_test_app(theme=DaisyUITheme.LIGHT)

@rt
def index():
    return create_test_page(test_func.__doc__.title().replace('.', ''), test_func())
server = start_test_server(app)
display(HTMX())
server.stop()

---

source

test_pikaday_calendar_fasthtml_examples

 test_pikaday_calendar_fasthtml_examples ()

Test Pikaday calendar CDN example from daisyUI v5 documentation.

def test_pikaday_calendar_fasthtml_examples():
    """Test Pikaday calendar CDN example from daisyUI v5 documentation."""
    from fasthtml.common import Input, Script, Div
    from cjm_fasthtml_daisyui.components.data_input.text_input import text_input
    
    # Create input field for Pikaday
    date_input = Input(
        type="text",
        cls=combine_classes(text_input, pika_single),
        id="myDatepicker"
    )
    
    # Create script to load Pikaday from CDN
    pikaday_cdn = Script(
        src="https://cdn.jsdelivr.net/npm/pikaday/pikaday.js"
    )
    
    # Create script to initialize Pikaday
    pikaday_init = Script(
        "var picker = new Pikaday({ field: document.getElementById('myDatepicker') });"
    )
    
    # Verify input structure
    assert date_input.tag == "input"
    assert date_input.attrs['type'] == "text"
    assert "input" in date_input.attrs['class']
    assert "pika-single" in date_input.attrs['class']
    assert date_input.attrs['id'] == "myDatepicker"
    
    # Verify CDN script
    assert pikaday_cdn.tag == "script"
    assert pikaday_cdn.attrs['src'] == "https://cdn.jsdelivr.net/npm/pikaday/pikaday.js"
    
    # Verify initialization script
    assert pikaday_init.tag == "script"
    assert pikaday_init.children[0] == "var picker = new Pikaday({ field: document.getElementById('myDatepicker') });"
    
    # Return the complete Pikaday setup
    return Div(
        pikaday_cdn,
        date_input,
        pikaday_init
    )

# Run the tests
test_pikaday_calendar_fasthtml_examples()

<div>
<script src="https://cdn.jsdelivr.net/npm/pikaday/pikaday.js"></script>  <input type="text" id="myDatepicker" class="input pika-single" name="myDatepicker">
<script>var picker = new Pikaday({ field: document.getElementById('myDatepicker') });</script></div>

test_func = test_pikaday_calendar_fasthtml_examples
app, rt = create_test_app(theme=DaisyUITheme.LIGHT)

@rt
def index():
    return create_test_page(test_func.__doc__.title().replace('.', ''), test_func())
server = start_test_server(app)
display(HTMX())
server.stop()