## Features
- Full-featured calendar with month, week, and day views
- Custom navigation controls (no default header toolbar)
- Event handling with click events
- Customizable styling for events
- Easy integration with Bubble workflows

## How to Use

### Adding the Calendar to Your App

1. Install the plugin from the Bubble plugin marketplace
2. Add the Calendar element to your page
3. Set up the initial view using the element properties

### Calendar Events

The calendar accepts events in JSON format. Each event should have:
- `id`: Unique identifier
- `title`: Event title
- `start`: Start date/time (ISO format)
- `end`: End date/time (ISO format)

Example event format:
```json
{
 "id": "event1",
 "title": "Meeting",
 "start": "2023-04-10T10:00:00",
 "end": "2023-04-10T11:00:00"
}
```

### Custom Navigation

Since this plugin hides the default header toolbar, you'll need to create your own navigation buttons in Bubble:

1. **Previous/Next Navigation**:
  - Create buttons in your Bubble editor
  - Use the "Calendar: Previous" action for the previous button
  - Use the "Calendar: Next" action for the next button

2. **Today Button**:
  - Create a button in your Bubble editor
  - Use the "Calendar: Today" action

3. **View Switching**:
  - Create buttons for Month/Week/Day views
  - Use the "Calendar: Change View" action with the view_name parameter:
    - `dayGridMonth` (Month view)
    - `timeGridWeek` (Week view)  
    - `timeGridDay` (Day view)

4. **Go to Specific Date**:
  - Use the "Calendar: Go to Date" action with a date parameter

### States

The plugin exposes these states that you can use in your Bubble workflows:

- `current_view`: The current calendar view (dayGridMonth, timeGridWeek, timeGridDay)
- `current_date`: The current date being displayed (ISO format)
- `event_id`: ID of the clicked event
- `event_title`: Title of the clicked event
- `event_start`: Start date/time of the clicked event
- `event_end`: End date/time of the clicked event

### Events

- `event_clicked`: Triggered when a calendar event is clicked

## Customization

You can style the calendar using Bubble's styling options to match your app's design.

Editor: https://bubble.io/page?id=calendar-test-19868&test_plugin=1744023553401x154924330769973250_current&tab=Design&name=index

Demo: http://calendar-test-19868.bubbleapps.io/version-test/index