Changelog v1.0.35 — API in callbacks & renderer

Date: 2025-10-16
Build: 1.0.35+2251

Expose FullSchedulerUserApi directly in all event callbacks and inside the Vue event renderer. No more closure juggling — you always have the API at hand.

🆕 Added

1) API in event callbacks

Every callback now receives the scheduler API as the second argument.

Affected callbacks

    // New signatures (api is REQUIRED; still backward-compatible for call sites)
onDayClicked?:        (day: FullSchedulerDay, api: FullSchedulerUserApi) => void;
onDayDblClicked?:     (day: FullSchedulerDay, api: FullSchedulerUserApi) => void;
onEventClicked?:      (event: FullSchedulerEvent, api: FullSchedulerUserApi) => void;
onEventDropped?:      (dropped: FullSchedulerDrop, api: FullSchedulerUserApi) => void;         // drag
onEventStartResized?: (resized: FullSchedulerResize, api: FullSchedulerUserApi) => void;       // resize start
onEventEndResized?:   (resized: FullSchedulerResize, api: FullSchedulerUserApi) => void;       // resize end

  

Example:

    const options: FullSchedulerApiInitOptions = {
  // ...
  onEventClicked: (evt, api) => {
    api.removeEventsByParam('id', evt.id!)
  },
  onEventDropped: (d, api) => {
    api.configureEventsByParam('id', d.event.id!, {
      start: d.newStartDateTime,
      end:   d.newEndDateTime
    })
    d.accept()
  }
}

  

2) API in Vue event renderer

Your custom renderer now receives both event and api as props.

    <script setup lang="ts">
import type { FullSchedulerEvent, FullSchedulerUserApi } from 'fullscheduler'

const props = defineProps<{ event: FullSchedulerEvent; api: FullSchedulerUserApi }>()

function removeMe(){
  props.api.removeEventsByParam('id', props.event.id!)
}
</script>

<template>
  <div class="h-full w-full flex items-center gap-2 px-2">
    <strong class="truncate">{{ props.event.label }}</strong>
    <Button size="small" text icon="pi pi-trash" @click="removeMe" />
  </div>
</template>

  

3) API in eventTemplate (HTML template)

If you use the HTML template path, the factory now accepts two arguments: (event, api).

    eventTemplate: (event, api) => `
  <div class="event" data-id="${event.id}">
    <p>${event.label}</p>
    <button onclick="${/* add your app-side bridge call here, e.g. */ ''}">...</button>
  </div>
  

Note: for pure HTML templates, direct invocation of api from the string isn’t possible out of the box. Exposing actions requires your app-side bridge (e.g., window.appApi).

🔄 Backward compatibility

• The api parameter is always provided at runtime and is required in type signatures. In TypeScript, assigning a function with fewer parameters to a callback type with more parameters is allowed, so existing one-argument handlers still compile and work.

🧩 Why this change?

• Simpler integrations (no refs/closures required).

• Renderer can perform contextual actions (open detail, mutate events, switch view, etc.).

🧭 Migration guide

No action required. Optionally, start using the new api param where it makes sense.

Before:

    onEventClicked: (evt) => { someApiRef.value?.removeEventsByParam('id', evt.id!) }

  

After:

    onEventClicked: (evt, api) => { api.removeEventsByParam('id', evt.id!) }

  

📌 Meta

• Issue: Open — “Expose API in event callbacks and event renderer” (created by Mateusz Świderski)

• Scope: public callbacks, Vue renderer, HTML eventTemplate signature.

• Breaking changes: none.