Repeated-task views

What you configure

view

Choose monthly-repeated-task or weekly-repeated-task.

task / taskSources

Supply task categories and their occurrences statically or through sources.

IDs and versions

Keep category and occurrence IDs stable; preserve optional concurrency versions.

Integration code example

1. Register the repeated-tasks module with its own repeated-task-views entitlement.
2. Map task categories, occurrence dates, status, and labels into the task model.
3. Connect source refresh or pagination and persist accepted task changes in your application.

Copy this TypeScript into your application, not the browser console. Replace YOUR_WTS_LICENSE_KEY with an entitlement issued for your deployment origin. A WTS license is not a Google, Microsoft or CalDAV credential. These examples are documentation only and never execute on this page.

npm install @wts-calendar/core

<div id="calendar"></div>

@import '@wts-calendar/core/styles/calendar.css';

import { WtsCalendar, verifyCalendarLicense } from '@wts-calendar/core';
import { repeatedTasksModule } from '@wts-calendar/core/repeated-tasks';

const license = await verifyCalendarLicense('YOUR_WTS_LICENSE_KEY');
const container = document.querySelector<HTMLElement>('#calendar');
if (!container) throw new Error('Calendar container not found');
const calendar = new WtsCalendar({
  container,
  license,
  plugins: [repeatedTasksModule],
  view: 'weekly-repeated-task',
  viewDate: '2026-09-07',
  timeZone: 'UTC',
  height: 560,
  headerToolbar: {
    start: 'prev,next',
    center: 'title',
    end: 'weekly-repeated-task,monthly-repeated-task',
  },
  task: [
    {
      id: 'checks',
      name: 'checks',
      title: 'Equipment checks',
      enable: true,
      color: '#18796b',
      icon: '',
      data: [
        {
          id: 'inspection',
          start: '2026-09-07',
          end: '2026-09-07',
          reason: 'Safety inspection',
          status: 'pending',
        },
      ],
    },
  ],
});
export function completeInspection() {
  calendar.setTaskStatus('checks', 'inspection', 'completed');
}
export function dispose() {
  calendar.destroy();
}

Application responsibilities

Mount in a web component lifecycle and dispose on unmount. Task data is separate from ordinary calendar events; persist changes in your own application if needed.

Add the stylesheet once to your global CSS/SCSS file using a bundler that resolves npm package imports. Keep it separate from component TypeScript.

Behavior and lifecycle

• Source refreshes replace their owned task snapshot without removing static or other-source tasks.
• Stable occurrence IDs allow paginated data to merge and later refreshes to reconcile records.