DOCSEARCHbyAlgolia
Submit Docs

DayFlow Calendar

repository·main·Indexed 21 days ago

https://github.com/dayflow-js/calendar

A multi-framework calendar component library (React, Vue, Angular, Svelte) featuring a plugin-based architecture, drag-and-drop capabilities, and various view modes. It includes specialized sync packages such as @dayflow/caldav for CalDAV protocol integration (supporting Nextcloud, Radicale, iCloud, and Fastmail) and @dayflow/google-sync for Google Calendar integration, both utilizing a backend proxy architecture for secure credential management.

Tokens
257.2K
Snippets
626
Records
845
Agent score
61%

What's inside dayflow-js-calendar

  2. Overview of DayFlow Remote Sync Packages

    main

    DayFlow provides headless synchronization packages to connect calendars to remote servers. Depending on your target service, you should choose the appropriate provider package:

    • @dayflow/caldav: CalDAV synchronization engine. Compatible with iCloud Calendar, Nextcloud, Radicale, Fastmail, and any RFC 4791 compliant server.
    • @dayflow/google-sync: Google Calendar REST API synchronization engine.
    • @dayflow/outlook-sync: Microsoft Outlook Calendar synchronization engine via Microsoft Graph API.
    • @dayflow/sync-core: A provider-agnostic coordination assistant for custom providers or backend-driven synchronization.

    Recommendation: Most applications should start with a provider package (@dayflow/caldav, @dayflow/google-sync, or @dayflow/outlook-sync). Use @dayflow/sync-core only if you are building a custom provider, coordinating remote data in backend jobs, or require provider-agnostic auditing/history.

  3. Overview of Remote Sync Packages

    main

    DayFlow provides headless synchronization packages to connect calendars to remote servers. Depending on your target service, you should choose the appropriate provider package:

    • @dayflow/caldav: CalDAV synchronization engine. Works with iCloud, Nextcloud, Radicale, Fastmail, and any RFC 4791 compliant CalDAV server.
    • @dayflow/google-sync: Google Calendar REST API synchronization engine.
    • @dayflow/outlook-sync: Microsoft Outlook calendar synchronization engine via Microsoft Graph API.
    • @dayflow/sync-core: A provider-agnostic orchestration helper. Use this only if you are building a custom provider, performing backend-driven synchronization, or requiring provider-independent auditing/history tracking.

    Most applications should start by using one of the specific provider packages (@dayflow/caldav, @dayflow/google-sync, or @dayflow/outlook-sync).

  5. Overview of DayFlow calendar view types

    main

    DayFlow provides five distinct view types designed for different scheduling needs. These views can be switched programmatically via the API or through a user interface. The available view types are:

    • Day View: Optimized for single-day granularity.
    • Week View: Optimized for weekly planning.
    • Month View: Optimized for long-term monthly overviews.
    • Year View: Optimized for yearly planning.
    • Agenda View: Optimized for list-based event viewing.

  6. Overview of DayFlow Calendar Library

    main
    DayFlow is a flexible and feature-rich calendar component library designed for modern web frameworks. It supports React, Vue, Angular, and Svelte. The library is built with a plugin architecture and includes native support for drag-and-drop interactions, multiple view types, and mobile responsiveness.

  7. Use @dayflow/sync-core for custom synchronization

    main

    The @dayflow/sync-core package provides provider-agnostic diff/apply utilities for DayFlow synchronization.

    Note: Most users should NOT import this package directly. Instead, use the specialized provider packages:

    When to use @dayflow/sync-core directly:

    • Building a custom provider package.
    • Performing synchronization via backend jobs.
    • Maintaining product-specific calendar/event database records in sync with remote provider records.
    • Implementing audit/history pipelines using standardized SyncChange objects.
    • Migrating ID strategies while matching stable provider identifiers.

  8. Use @dayflow/sync-core for custom sync logic

    main

    @dayflow/sync-core provides provider-agnostic diff/apply utilities for DayFlow synchronization.

    Note: Most users should NOT import this directly. Instead, use the specialized provider packages:

    When to use @dayflow/sync-core directly:

    • Building a custom provider package.
    • Performing synchronization via backend jobs.
    • Maintaining a product-specific calendar/event database in sync with remote provider records.
    • Migrating ID strategies while matching stable provider identifiers.
    • Implementing audit/history pipelines using standardized SyncChange objects.

  9. Explore the website project structure

    main

    The website-new project is built using Next.js and Fumadocs. Key files and routes include:

    • lib/source.ts: Contains the code for the content source adapter. Use the loader() interface to access your content.
    • lib/layout.shared.tsx: Contains shared layout options.
    • app/(home): Route group for the landing page and other primary pages.
    • app/docs: The documentation layout and pages.
    • app/api/search/route.ts: The Route Handler used for search functionality.

  10. Understand the scope of @dayflow/sync-core

    main

    @dayflow/sync-core provides provider-neutral synchronization primitives for DayFlow calendar integrations. It is designed to be a lightweight core layer that handles shared sync types and snapshot reconciliation.

    What is included:

    • Shared sync types.
    • Snapshot reconciliation helpers.
    • Provider-neutral change emissions (e.g., calendar.created, event.updated, event.deleted).

    What is NOT included:

    • Provider adapters (e.g., Google, Outlook, CalDAV).
    • Authentication logic.
    • Credential storage.
    • History recording or audit logs.
    • Persistence implementations.

  11. Supported view types in DayFlow

    main

    DayFlow supports five different view types, each optimized for specific use cases and user needs. Developers can programmatically switch between these views or provide a UI for users to toggle them. The available views are:

    • Day View (日ビュー)
    • Week View (週ビュー)
    • Month View (月ビュー)
    • Year View (Yearly View)
    • Agenda View (Agenda ビュー)

  12. Overview of the DayFlow plugin architecture

    main
    DayFlow uses a plugin architecture to provide modular functionality. This allows you to load features on demand (reducing bundle size), configure specific behaviors for your use case, and extend the core functionality with custom logic. You can access plugin services directly within your business logic using the application instance.