calendar

Miro calendar sample app

 ℹ Note:

• We recommend a Chromium-based web browser for local development with HTTP.
  Safari enforces HTTPS; therefore, it doesn't allow localhost through HTTP.
• All examples use npm as a package manager and npx as a package runner.
  If you prefer, you can install and use equivalent alternatives, such as yarn or pnpm.
• For more information about building a calendar, visit our developer documentation.

How to start locally

1. Run npm install to install dependencies.
2. Run npm start to start developing.
   Your URL should be similar to this example:

   http://localhost:3000
   

3. Open the app manifest editor by clicking Edit in Manifest.
   In the app manifest editor, configure the app as follows:
   • sdkUri: assign http://localhost:3000 as a value for this property.
     It defines the entry point of the app, and it corresponds to the URL of the server that the app runs on.
   • scopes: add the permission scopes that users need to grant the app when they install it.
     To enable the app to read from and write to the board, add the following permissions:
     • boards:read
     • boards:write
4. Open a board: you should see your app in the apps toolbar or in the apps panel.

How to build the app

• Run npm run build.
  This generates a static output inside dist/, which you can host on a static hosting service.

Folder structure

.
├── src
│  └── styles
│      └── style.css <-- CSS styles for the app.
│  └── App.tsx <-- The main app. Contains structure for the sidebar when launched.
│      main.tsx <-- Initializes app.
│      useCalendar.ts <-- Functions to generate a calendar.
├── app.html <-- The app itself. This is loaded on the board inside the 'appContainer'.
└── index.html <-- The app entry point. This is the value you assign to 'sdkUri' in the app manifest file.

About the app

This sample app shows how you can generate a calendar consisting of frames and text items.
Built in React off of the create-miro-app React/Typescript starter.

This app uses Vite.
If you want to modify the vite.config.js configuration, see the Vite documentation.