Overview

Scheduler

Vista calendario per pianificazione attività e timeline con binding metadata-driven.

Use cases

  • Pianificazione turni.
  • Agenda interventi.
  • Timeline eventi business.

Dipendenze

  • Campi date/time corretti nei metadata.
  • Configurazioni archetype scheduler.

md_props_bag: archetypes.scheduler

Snippet 1JSON
{
  "archetypes": {
    "scheduler": {
      "advancedFilter": false,
      "fromField": "start_at",
      "toField": "end_at",
      "titleField": "title",
  • advancedFilter: quando true mostra la wuic-filter-bar per l'archetype scheduler (a livello data-repeater).
  • fromField: campo data/ora inizio evento.
  • toField: campo data/ora fine evento.
  • titleField: campo testo titolo evento.
  • itemTemplateString: template custom del blocco evento.
  • titleFunction: callback JS per comporre titolo dinamico.

Contesto Template (itemTemplateString)

Nel template custom sono disponibili questi input:

  • record: alias del record evento corrente.
  • rowData: alias del record evento corrente.
  • metaInfo: metadati tabella/colonne della datasource.
  • datasource: riferimento al componente datasource associato.

Contesto runtime usato dal framework:

Snippet 2ts
inputs: { record: item, rowData: item, metaInfo: metaInfo, datasource: datasource }

Eventi e subscriptions (host)

Eventi disponibili su wuic-scheduler-list:

  • onSchedulerDateClick: relay full-calendar dateClick.
  • onSchedulerEventClick: relay full-calendar eventClick.
  • onSchedulerEventDrop: relay full-calendar eventDrop.
  • onSchedulerEventResize: relay full-calendar eventResize.
  • onSchedulerDatesSet: relay full-calendar datesSet.
  • onSchedulerDataBound: emesso quando il wrapper completa il binding eventi dal datasource.
  • onSchedulerEventSync: emesso dopo sync riuscita su drag/drop/resize evento.

Esempio template:

Snippet 3HTML
<wuic-scheduler-list
  [hardcodedDatasource]="citiesDs"
  (onSchedulerDateClick)="handleDateClick($event)"
  (onSchedulerEventClick)="handleEventClick($event)"
  (onSchedulerEventDrop)="handleEventDrop($event)"
  (onSchedulerEventResize)="handleEventResize($event)"
  (onSchedulerDatesSet)="handleDatesSet($event)"

Esempio subscribe (ViewChild):

Snippet 4ts
@ViewChild(SchedulerListComponent) scheduler?: SchedulerListComponent;
private readonly subs = new Subscription();

ngAfterViewInit(): void {
  if (!this.scheduler) return;
  this.subs.add(this.scheduler.onSchedulerDateClick.subscribe((e) => console.log(e)));
  this.subs.add(this.scheduler.onSchedulerEventClick.subscribe((e) => console.log(e)));

<!-- import-and-mount -->

Import e mount (componente Angular)

Importa LazySchedulerListComponent da 'wuic-framework-lib' e montalo col DataSource del framework:

Snippet 5ts
import { DataSourceComponent, LazySchedulerListComponent } from 'wuic-framework-lib';

@Component({
  selector: 'app-esempio',
  imports: [DataSourceComponent, LazySchedulerListComponent],
  template: `
    <wuic-data-source #ds [hardcodedRoute]="'<route>'" [autoload]="true"></wuic-data-source>

Nomi ESATTI (barrel wuic-framework-lib): classe LazySchedulerListComponent, selector <wuic-scheduler-list-lazy>. Importa quella classe, non altri nomi inventati (es. un prefisso Lazy dove non c'è, o viceversa) → altrimenti il build dà has no exported member.

Config metadata-driven: il tag accetta SOLO gli input standard [hardcodedRoute], [hardcodedDatasource], [autoload], [hideToolbar]. La configurazione specifica (qui: i campi data inizio/fine dell'evento) NON è un input HTML ([groupField], [type], ecc. danno NG8002 not a known property) → va nei metadata (md_props_bag/archetipo) o in-code via metaInfo.

Screenshot

scheduler-list / manual-scheduler-01
scheduler-list / manual-scheduler-01
scheduler-list / manual-scheduler-02
scheduler-list / manual-scheduler-02
scheduler-list / manual-scheduler-03
scheduler-list / manual-scheduler-03
Scheduler in azione
Scheduler in azione