createDateGallerySubscriber<T>

FUNCTION

A function that creates an DateGallerySubscriber which you can provide to an DateGallery, which maps all DateGalleryEvent to methods.

You provide createDateGallery with an object with all the events you want to handle as methods and it will call the methods for you. This way your code will not have any switch or if-statement to distinguish between events.

For example if you wanted to handle the FRAME_CHANGED event, you provide a method called onFrameChanged within the config. Whenever the FRAME_CHANGED event occurs onFrameChanged will be called.

All methods are called with two parameters: the first is the event that occurred and the second the DateGallery the event occurred on.

createDateGallery should only be used when using Vanilla JavaScript or TypeScript and not when using a reactive framework because reactive frameworks (such as React or Vue) will handle the DOM manipulation for you.

If an event is fired that you did not provide a method for, an SubscriberMissingMethodError error will be thrown.

Since 1.6.0

Signature

Parameters

Returns

A subscriber function which can be passed to an DateGallery.

Examples

A. Simple example

The example below shows what the subscriber could look like for a calendar view which can change frames.

import {
  DateGallery,
  createDateGallerySubscriber
} from 'uiloos/core';

const subscriber = createDateGallerySubscriber({
  onInitialized() {
    // Setup initial week calendar UI 
  },

  onFrameChanged() {
    // Whenever the user changes weeks re-render them.
  },
});

export const weekCalendar = new DateGallery(
  {
    mode: 'week'
  },
  subscriber
);

B. All methods implemented

Here is a nice example to get started which includes stub implementations for all method:

const subscriber = createDateGallery({
  onInitialized(event, dateGallery) {
    console.log('onInitialized', event, dateGallery)
  },

  onFrameChanged(event, dateGallery) {
    console.log('onFrameChanged', event, dateGallery)
  },

  onConfigChanged(event, dateGallery) {
    console.log('onConfigChanged', event, dateGallery)
  },

  onDateSelected(event, dateGallery) {
    console.log('onDateSelected', event, dateGallery)
  },

  onDateSelectedMultiple(event, dateGallery) {
    console.log('onDateSelectedMultiple', event, dateGallery)
  },

  onDateDeselected(event, dateGallery) {
    console.log('onDateDeselected', event, dateGallery)
  },

  onDateDeselectedMultiple(event, dateGallery) {
    console.log('onDateDeselectedMultiple', event, dateGallery)
  },

  onEventAdded(event, dateGallery) {
    console.log('onEventAdded', event, dateGallery)
  },

  onEventRemoved(event, dateGallery) {
    console.log('onEventRemoved', event, dateGallery)
  },

  onEventMoved(event, dateGallery) {
    console.log('onEventMoved', event, dateGallery)
  },

  onEventDataChanged(event, dateGallery) {
    console.log('onEventDataChanged', event, dateGallery)
  },
});