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
{
"archetypes": {
"scheduler": {
"advancedFilter": false,
"fromField": "start_at",
"toField": "end_at",
"titleField": "title",advancedFilter: quandotruemostra lawuic-filter-barper l'archetypescheduler(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:
inputs: { record: item, rowData: item, metaInfo: metaInfo, datasource: datasource }Eventi e subscriptions (host)
Eventi disponibili su wuic-scheduler-list:
onSchedulerDateClick: relayfull-calendar dateClick.onSchedulerEventClick: relayfull-calendar eventClick.onSchedulerEventDrop: relayfull-calendar eventDrop.onSchedulerEventResize: relayfull-calendar eventResize.onSchedulerDatesSet: relayfull-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:
<wuic-scheduler-list
[hardcodedDatasource]="citiesDs"
(onSchedulerDateClick)="handleDateClick($event)"
(onSchedulerEventClick)="handleEventClick($event)"
(onSchedulerEventDrop)="handleEventDrop($event)"
(onSchedulerEventResize)="handleEventResize($event)"
(onSchedulerDatesSet)="handleDatesSet($event)"Esempio subscribe (ViewChild):
@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:
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



