Calendar Notes Widget

A lightweight embeddable calendar + personal notes widget that can be integrated into any website. Users can:

• View a calendar.
• Create personal notes for specific dates.
• Set reminders.
• Store notes securely in Supabase.
• Keep notes private per user.

The widget is designed to be embedded via a simple script tag and integrated with the host website's authentication system.

✨ Features

• Interactive calendar.
• view / Add / update / delete notes.
• Reminder support.
• Supabase database storage.
• User-based note isolation.
• Lightweight embeddable widget.
• Easy integration with existing websites.
• Works with any framework (Angular, React, Vue, Vanilla JS).

Installation

CDN (Recommended)

Add the widget script to your website.

 <script src="http://localhost:4200/widget.js"></script>

Quick Start

1. Include the widget script.

<script src="widget.js"></script>

2. Configure the widget.

window.CalendarNotesConfig = {
  loadNotes: async () => { },
  saveNote: async (note) => { },
  updateNote: async (note) => { },
  deleteNote: async (id) => { }
};

3. The widget will automatically load on the page.

Host Website Integration

The host website must provide four functions to interact with the database. These functions allow the widget to remain backend-agnostic. Example configuration:

window.CalendarNotesConfig = {

  loadNotes: async () => {
    if (!window.currentUserId) return [];
    const { data } =
      await supabaseService.getNotes(window.currentUserId);
    return data || [];
  },

  saveNote: async (note) => {
    note.user_id = window.currentUserId;
    const { data } =
      await supabaseService.saveNote([note]);
    return data?.[0];
  },

  updateNote: async (note) => {
    const { data } =
      await supabaseService.updateNote(note.id, note);
    return data?.[0];
  },



  deleteNote: async (id) => {
    await supabaseService.deleteNote(id);
  }

};

User Authentication Integration

When a user logs in, the host website must notify the plugin.
Example:

window.currentUserId = userId;

window.postMessage(
  { type: "USER_LOGIN", userId: userId },
  "*"
);

This allows the widget to load user-specific notes.

☁️ Supabase Integration

The widget does not directly access Supabase. Instead, the host website handles Supabase communication. Example Supabase service:

const { data } = await supabase
  .from("notes")
  .select("*")
  .eq("user_id", userId);

🗄 Database Schema

Create a notes table in Supabase.

| Column | Type | Description | |------------|----------|---------------| | id | uuid | Primary key | | user_id | uuid | User ID | | title | text | Note title | | content | text | Note content | | note_date | date | Note date | | created_at | timestamp| Created time | | reminder_at| timestamp| Reminder time |

🔒 Row Level Security Policies

Enable Row Level Security.

alter table notes enable row level security;

Policy example: Select policy

CREATE POLICY "Users can view their notes"
ON notes
FOR SELECT

Insert policy

CREATE POLICY "Users can insert notes"
ON notes
FOR INSERT
WITH CHECK (auth.uid() = user_id);

Update policy

CREATE POLICY "Users can update their notes"
ON notes
FOR UPDATE
USING (auth.uid() = user_id);

Delete policy

CREATE POLICY "Users can delete their notes"
ON notes
FOR DELETE
USING (auth.uid() = user_id);

📡 API Reference

The plugin expects the following configuration API.

1. loadNotes()

Fetch notes for the logged-in user.

Returns:

Array<Note>

2. saveNote(note)

Create a new note.

Example note:

{
  title: "Exam preparation",
  content: "Study chapter 3",
  note_date: "2026-03-14"
}

Returns:

Note

3. updateNote(note)

Update an existing note.

Requires:

note.id

4. deleteNote(id)

Delete a note.

Parameter:

noteId

📄 Note Object Structure

{
  id: string
  user_id: string
  title: string
  content?: string
  note_date: string
  reminder_at?: string
}

Usage Example

Example login integration.

async login() {

  const { data } =
    await supabase.auth.signInWithPassword({
      email,
      password
    });

  const userId = data.user.id;

  window.currentUserId = userId;

  window.postMessage({
    type: "USER_LOGIN",
    userId: userId
  });

}

🛠 Troubleshooting

Notes not loading Check:

CalendarNotesConfig.loadNotes

Notes not saving Verify: currentUserId is set

Supabase permission errors Check: Row Level Security policies

❓ FAQ

Does the plugin require Supabase? No. You can connect it to any backend as long as the required functions are implemented.

Can multiple users use the plugin? Yes. Each user's notes are isolated using user_id.

Can this plugin work with React or Vue? Yes. It works with any framework because it uses a simple script tag.

👨‍💻 Author

Developed by Vidunaya Technologies