dateGallery<T>

COMPONENT

A function which you can use to register a data to Alpine.js to create DateGallery instances from within HTML.

Since 1.6.0

Signature

Parameters

Returns

An Alpine.js data component

Examples

A. A Simple example

The example below creates a simple month calendar as a list, with buttons to go to the next and previous months. Clicking a date toggles the dates selection.

First register dateGallery to alpine:

import Alpine from 'alpinejs';
import { dateGallery } from '@uiloos/alpine';

Alpine.data('dateGallery', dateGallery);

Alpine.start();

Now you can use the dateGallery in your HTML like this:

<div
  x-data="dateGallery({
    alpine: {
      name: 'calendar'
    },
    mode: 'month',
  })"
>
  <ul>
    <template x-for="dateObj in calendar().firstFrame.dates">
      <li @click="dateObj.toggle()">
        <span x-text="dateObj.date.toLocaleDateString()"></span>
        <span x-text="date.isSelected ? 'selected' : ''"></span>
      </li>
    </template>
  </ul>
  
  <button @click="calendar().previous()">previous</button>
  <button @click="calendar().next()">next</button>
</div>