Pipeline Available v1.0.0

Closing Dates Calendar

Closings per day

Live preview

Rendered from sample data fed via .data — exactly how your app feeds it.

Data contract

Column	Type	Req
Date	string	✓
Value	number	✓
Format	string	—

Emits ready, error and widget-select when a mark is clicked — wiring up drill-down.

Embed code

URL:

Colours:

<!-- 1. Load the widget (self-registers <afn-closingdatescalendar>) -->
<script type="module" src="https://widgets-d.afnai.com/cdn/afn-closingdatescalendar/v1/afn-closingdatescalendar.js"></script>

<!-- 2. Drop the tag -->
<afn-closingdatescalendar id="w"></afn-closingdatescalendar>

<!-- 3. Feed your data -->
<script>
  const el = document.querySelector('#w');
  el.data = [
    {"Date":"2025-04-01","Value":1},
    {"Date":"2025-04-02","Value":1},
    {"Date":"2025-04-03","Value":1},
    {"Date":"2025-04-04","Value":2},
    {"Date":"2025-04-07","Value":2},
    {"Date":"2025-04-08","Value":1},
    {"Date":"2025-04-09","Value":1},
    {"Date":"2025-04-10","Value":1},
    {"Date":"2025-04-11","Value":2},
    {"Date":"2025-04-14","Value":2},
    {"Date":"2025-04-15","Value":1},
    {"Date":"2025-04-16","Value":1},
    {"Date":"2025-04-17","Value":2},
    {"Date":"2025-04-18","Value":3},
    {"Date":"2025-04-21","Value":4},
    {"Date":"2025-04-22","Value":4},
    {"Date":"2025-04-23","Value":5},
    {"Date":"2025-04-24","Value":5},
    {"Date":"2025-04-25","Value":7},
    {"Date":"2025-04-28","Value":7},
    {"Date":"2025-04-29","Value":6},
    {"Date":"2025-04-30","Value":5},
    {"Date":"2025-05-01","Value":1},
    {"Date":"2025-05-02","Value":2},
    {"Date":"2025-05-05","Value":1},
    {"Date":"2025-05-06","Value":1},
    {"Date":"2025-05-07","Value":2},
    {"Date":"2025-05-08","Value":1},
    {"Date":"2025-05-09","Value":2},
    {"Date":"2025-05-12","Value":1},
    {"Date":"2025-05-13","Value":1},
    {"Date":"2025-05-14","Value":2},
    {"Date":"2025-05-15","Value":1},
    {"Date":"2025-05-16","Value":2},
    {"Date":"2025-05-19","Value":2},
    {"Date":"2025-05-20","Value":3},
    {"Date":"2025-05-21","Value":4},
    {"Date":"2025-05-22","Value":4},
    {"Date":"2025-05-23","Value":6},
    {"Date":"2025-05-26","Value":6},
    {"Date":"2025-05-27","Value":6},
    {"Date":"2025-05-28","Value":7},
    {"Date":"2025-05-29","Value":6},
    {"Date":"2025-05-30","Value":6},
    {"Date":"2025-06-02","Value":1},
    {"Date":"2025-06-03","Value":1},
    {"Date":"2025-06-04","Value":1},
    {"Date":"2025-06-05","Value":1},
    {"Date":"2025-06-06","Value":2},
    {"Date":"2025-06-09","Value":1},
    {"Date":"2025-06-10","Value":1},
    {"Date":"2025-06-11","Value":1},
    {"Date":"2025-06-12","Value":1},
    {"Date":"2025-06-13","Value":2},
    {"Date":"2025-06-16","Value":1},
    {"Date":"2025-06-17","Value":2},
    {"Date":"2025-06-18","Value":2},
    {"Date":"2025-06-19","Value":2},
    {"Date":"2025-06-20","Value":4},
    {"Date":"2025-06-23","Value":5},
    {"Date":"2025-06-24","Value":5},
    {"Date":"2025-06-25","Value":6},
    {"Date":"2025-06-26","Value":6},
    {"Date":"2025-06-27","Value":7},
    {"Date":"2025-06-30","Value":5}
  ];
</script>

import { useEffect, useRef } from 'react';
// In index.html: <script type="module" src="https://widgets-d.afnai.com/cdn/afn-closingdatescalendar/v1/afn-closingdatescalendar.js"></script>

// Sample rows — swap for your own (Date, Value, Format)
const SAMPLE = [
  {"Date":"2025-04-01","Value":1},
  {"Date":"2025-04-02","Value":1},
  {"Date":"2025-04-03","Value":1},
  {"Date":"2025-04-04","Value":2},
  {"Date":"2025-04-07","Value":2},
  {"Date":"2025-04-08","Value":1},
  {"Date":"2025-04-09","Value":1},
  {"Date":"2025-04-10","Value":1},
  {"Date":"2025-04-11","Value":2},
  {"Date":"2025-04-14","Value":2},
  {"Date":"2025-04-15","Value":1},
  {"Date":"2025-04-16","Value":1},
  {"Date":"2025-04-17","Value":2},
  {"Date":"2025-04-18","Value":3},
  {"Date":"2025-04-21","Value":4},
  {"Date":"2025-04-22","Value":4},
  {"Date":"2025-04-23","Value":5},
  {"Date":"2025-04-24","Value":5},
  {"Date":"2025-04-25","Value":7},
  {"Date":"2025-04-28","Value":7},
  {"Date":"2025-04-29","Value":6},
  {"Date":"2025-04-30","Value":5},
  {"Date":"2025-05-01","Value":1},
  {"Date":"2025-05-02","Value":2},
  {"Date":"2025-05-05","Value":1},
  {"Date":"2025-05-06","Value":1},
  {"Date":"2025-05-07","Value":2},
  {"Date":"2025-05-08","Value":1},
  {"Date":"2025-05-09","Value":2},
  {"Date":"2025-05-12","Value":1},
  {"Date":"2025-05-13","Value":1},
  {"Date":"2025-05-14","Value":2},
  {"Date":"2025-05-15","Value":1},
  {"Date":"2025-05-16","Value":2},
  {"Date":"2025-05-19","Value":2},
  {"Date":"2025-05-20","Value":3},
  {"Date":"2025-05-21","Value":4},
  {"Date":"2025-05-22","Value":4},
  {"Date":"2025-05-23","Value":6},
  {"Date":"2025-05-26","Value":6},
  {"Date":"2025-05-27","Value":6},
  {"Date":"2025-05-28","Value":7},
  {"Date":"2025-05-29","Value":6},
  {"Date":"2025-05-30","Value":6},
  {"Date":"2025-06-02","Value":1},
  {"Date":"2025-06-03","Value":1},
  {"Date":"2025-06-04","Value":1},
  {"Date":"2025-06-05","Value":1},
  {"Date":"2025-06-06","Value":2},
  {"Date":"2025-06-09","Value":1},
  {"Date":"2025-06-10","Value":1},
  {"Date":"2025-06-11","Value":1},
  {"Date":"2025-06-12","Value":1},
  {"Date":"2025-06-13","Value":2},
  {"Date":"2025-06-16","Value":1},
  {"Date":"2025-06-17","Value":2},
  {"Date":"2025-06-18","Value":2},
  {"Date":"2025-06-19","Value":2},
  {"Date":"2025-06-20","Value":4},
  {"Date":"2025-06-23","Value":5},
  {"Date":"2025-06-24","Value":5},
  {"Date":"2025-06-25","Value":6},
  {"Date":"2025-06-26","Value":6},
  {"Date":"2025-06-27","Value":7},
  {"Date":"2025-06-30","Value":5}
];

export function ClosingDatesCalendar({ rows = SAMPLE }) {
  const ref = useRef(null);
  // React <=18 needs a ref to set object properties; React 19 can pass them directly.
  useEffect(() => { if (ref.current) ref.current.data = rows; }, [rows]);
  return <afn-closingdatescalendar ref={ref} />;
}

@* In index.html: <script type="module" src="https://widgets-d.afnai.com/cdn/afn-closingdatescalendar/v1/afn-closingdatescalendar.js"></script>       *@
@* JS helper (wwwroot):  window.setWidgetData = (el, d) => el.data = d; *@

<afn-closingdatescalendar @ref="el"></afn-closingdatescalendar>

@code {
    private ElementReference el;
    [Inject] private IJSRuntime JS { get; set; } = default!;

    // Sample rows (Date, Value, Format) — swap for your own
    private readonly object[] rows = System.Text.Json.JsonSerializer
        .Deserialize<object[]>("[{\"Date\":\"2025-04-01\",\"Value\":1},{\"Date\":\"2025-04-02\",\"Value\":1},{\"Date\":\"2025-04-03\",\"Value\":1},{\"Date\":\"2025-04-04\",\"Value\":2},{\"Date\":\"2025-04-07\",\"Value\":2},{\"Date\":\"2025-04-08\",\"Value\":1},{\"Date\":\"2025-04-09\",\"Value\":1},{\"Date\":\"2025-04-10\",\"Value\":1},{\"Date\":\"2025-04-11\",\"Value\":2},{\"Date\":\"2025-04-14\",\"Value\":2},{\"Date\":\"2025-04-15\",\"Value\":1},{\"Date\":\"2025-04-16\",\"Value\":1},{\"Date\":\"2025-04-17\",\"Value\":2},{\"Date\":\"2025-04-18\",\"Value\":3},{\"Date\":\"2025-04-21\",\"Value\":4},{\"Date\":\"2025-04-22\",\"Value\":4},{\"Date\":\"2025-04-23\",\"Value\":5},{\"Date\":\"2025-04-24\",\"Value\":5},{\"Date\":\"2025-04-25\",\"Value\":7},{\"Date\":\"2025-04-28\",\"Value\":7},{\"Date\":\"2025-04-29\",\"Value\":6},{\"Date\":\"2025-04-30\",\"Value\":5},{\"Date\":\"2025-05-01\",\"Value\":1},{\"Date\":\"2025-05-02\",\"Value\":2},{\"Date\":\"2025-05-05\",\"Value\":1},{\"Date\":\"2025-05-06\",\"Value\":1},{\"Date\":\"2025-05-07\",\"Value\":2},{\"Date\":\"2025-05-08\",\"Value\":1},{\"Date\":\"2025-05-09\",\"Value\":2},{\"Date\":\"2025-05-12\",\"Value\":1},{\"Date\":\"2025-05-13\",\"Value\":1},{\"Date\":\"2025-05-14\",\"Value\":2},{\"Date\":\"2025-05-15\",\"Value\":1},{\"Date\":\"2025-05-16\",\"Value\":2},{\"Date\":\"2025-05-19\",\"Value\":2},{\"Date\":\"2025-05-20\",\"Value\":3},{\"Date\":\"2025-05-21\",\"Value\":4},{\"Date\":\"2025-05-22\",\"Value\":4},{\"Date\":\"2025-05-23\",\"Value\":6},{\"Date\":\"2025-05-26\",\"Value\":6},{\"Date\":\"2025-05-27\",\"Value\":6},{\"Date\":\"2025-05-28\",\"Value\":7},{\"Date\":\"2025-05-29\",\"Value\":6},{\"Date\":\"2025-05-30\",\"Value\":6},{\"Date\":\"2025-06-02\",\"Value\":1},{\"Date\":\"2025-06-03\",\"Value\":1},{\"Date\":\"2025-06-04\",\"Value\":1},{\"Date\":\"2025-06-05\",\"Value\":1},{\"Date\":\"2025-06-06\",\"Value\":2},{\"Date\":\"2025-06-09\",\"Value\":1},{\"Date\":\"2025-06-10\",\"Value\":1},{\"Date\":\"2025-06-11\",\"Value\":1},{\"Date\":\"2025-06-12\",\"Value\":1},{\"Date\":\"2025-06-13\",\"Value\":2},{\"Date\":\"2025-06-16\",\"Value\":1},{\"Date\":\"2025-06-17\",\"Value\":2},{\"Date\":\"2025-06-18\",\"Value\":2},{\"Date\":\"2025-06-19\",\"Value\":2},{\"Date\":\"2025-06-20\",\"Value\":4},{\"Date\":\"2025-06-23\",\"Value\":5},{\"Date\":\"2025-06-24\",\"Value\":5},{\"Date\":\"2025-06-25\",\"Value\":6},{\"Date\":\"2025-06-26\",\"Value\":6},{\"Date\":\"2025-06-27\",\"Value\":7},{\"Date\":\"2025-06-30\",\"Value\":5}]")!;

    protected override async Task OnAfterRenderAsync(bool first)
    {
        if (first) await JS.InvokeVoidAsync("setWidgetData", el, rows);
    }
}

v1 gets non-breaking fixes automatically; a breaking change bumps to the next major and never touches your embed. Bring-your-own-data: your app feeds the rows via .data. Integration guide — framework setup, versioning and the origin allowlist.