# Calendars

* [Bubble.io Plugin](#bubble.io-plugin)
* [JavaScript SDK](#javascript-sdk)

### 🧋Bubble.io Plugin

#### Natively - Calendar

!!! YOU NEED TO SET "CalendarObject (Natively - ... " into element field

<figure><img src="https://3352617162-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F90tV7pYflEQdiAr2VfWu%2Fuploads%2FjDEzCCHWV4TvrW7ZnvO3%2Fnatively-calendar.png?alt=media&#x26;token=af408b1b-727b-4d93-a970-96dfb00699da" alt=""><figcaption></figcaption></figure>

#### Events:

* Get Calendars Success
* Get Calendars Failed
* Create Event Success
* Create Event Failed

#### States:

* Get Calendars Result - list of CalendarObject's
  * CalendarObject:
    * id - unique calendar identifier on these device.
* Create Event Calendar ID - Calendar ID where the new event was created
* Create Event/Get Calendsr Status - Result status after calling **Create Event** or **Get Calendars**
* Event Title - Event title that was created
* Event End Date - Event end date in ISO 8601 format
* Event Start Date - Event start date in ISO 8601 format
* Error - error message is exists. Examples:
  * add\_calendar\_event\_failure -> something went wrong on app side
  * start\_date\_missing
  * end\_date\_missing
  * no\_available\_calendars -> user doesn’t have available calendars
  * cannot\_retrieve\_calendars -> something went wrong on app side
  * calendar\_permission\_missing -> no permission
  * timezone\_missing
* Message **-** message about the current stage of the process if exists

#### Actions:

* Get Calendars - response: list of CalendarsObject's
* Create Event - response: Event Calendar ID, Event Title, Event End Date, Event Start Date
  * Title - **Required**
  * End Date - Required
  * Start Date - Required
  * Timezone - Required. ISO 8601 format
  * Description

### 🛠 JavaScript SDK

```javascript
const calendar = new NativelyCalendar()
const retrieve_calendars_callback = function(resp) {
        console.log(resp.data.id);
        console.log(resp.status);
        console.log(resp.error);
};
const create_calendar_event_callback = function (resp) {
        console.log(reps.status); // "SUCCESS"/"FAILED"
        console.log(resp.data.id); // Calendar ID
        console.log(resp.data.title); // Event title
        console.log(resp.data.end); // Event end date. ISO 8601
        console.log(resp.data.start); // Event start date. ISO 8601
};
const title = "event title"
const endDate = "2025-07-10 15:00:00.000" // ISO 8601
const startDate = "2025-07-10 14:00:00.000" // ISO 8601
const timezone = "Africa/Abidjan" // ISO 8601
const calendarId = "calendar_id"
const description = "Event notes"

calendar.retrieveCalendars(retrieve_calendars_callback);
calendar.createCalendarEvent(
        title,
        endDate,
        startDate,
        timezone,
        calendarId,
        description, 
        create_calendar_event_callback
        );
```