sling-web-component-calendar

The calendar component is a simple and customizable calendar that receives an array with data to be shown according to the configuration passed.

Install

npm install sling-web-component-calendar

Tag

<sling-calendar></sling-calendar>

dependencies

sling-web-framework
sling-web-helpers

Attributes and properties

Name	Type	Values	ReflectToAttribute	Observer	callSdk
calendarinstance	Object	(Value 1)
configuration	Object	(Value 2)
selecteddate	String	Date Ex: 2018-05-01	✔️
srcdata	Array	(Value 3)

Value 1

calendarinstance = {
  weeks: [[{
    class: 'calendar__day_selected',
  }]],
}

Value 2

configuration = {
  onDaySelection: (day) => {
    this.selecteddate = day;
  },
  onMonthChange: (viewPeriod) => {
    this.startdate = viewPeriod.start;
    this.finaldate = viewPeriod.end;
  },
  field: field => html`
    ${field.map(item => html`
      <p
        className="calendar__info calendar__status
        calendar__status_${item.settlement_status_id}"
        title="${item.status}">
        <span style="white-space: nowrap">
          ${globalFormatters.formatCurrency(item.amount)}
        </span>
      </p>`)}`,
}

Value 3

srcdata = [{
  name: 'Crédito',
  amount: 38344.59,
  brandId: 1,
  wallet_type_id: 3
}]

Events

This component does not emit events.

Examples

The component example can be emulated using the npm start sling-web-component-calendar command.

Use

<sling-calendar></sling-calendar>