open-index/open-npm huggingface dataset:
npm package: @fullcalendar/preact
Description: FullCalendar Preact package for rendering a calendar
Author: Adam Shaw
Latest version: 7.0.0-beta.8


# FullCalendar Preact

FullCalendar Preact package for rendering a calendar

## Installation

```sh
npm install @fullcalendar/preact temporal-polyfill
```

## Usage

First, ensure there's a DOM element for your calendar to render into:

```html
<body>
  <div id='calendar'></div>
</body>
```

Then, instantiate a Calendar object with [options](https://fullcalendar.io/docs#toc) and call its `render` method:

```js
import { Calendar } from '@fullcalendar/preact'
import classicThemePlugin from '@fullcalendar/preact/themes/classic'
import dayGridPlugin from '@fullcalendar/preact/daygrid'

import '@fullcalendar/preact/skeleton.css'
import '@fullcalendar/preact/themes/classic/theme.css'
import '@fullcalendar/preact/themes/classic/palette.css'

const calendarEl = document.getElementById('calendar')
const calendar = new Calendar(calendarEl, {
  plugins: [
    dayGridPlugin,
    classicThemePlugin,
    // any other plugins
  ],
  initialView: 'dayGridMonth',
  weekends: false,
  events: [
    { title: 'Meeting', start: new Date() }
  ]
})

calendar.render()
```
npm package: @fullcalendar/theme-breezy
Description: Full-sized drag & drop event calendar in JavaScript
Author: Adam Shaw
Latest version: 7.0.0-beta.6


# FullCalendar Breezy Theme

Display an event calendar with a [Tailwind Plus](https://tailwindcss.com/plus/ui-blocks/application-ui/data-display/calendars) inspired theme.

## Installation

Install FullCalendar's core, the theme, and any other plugins you plan to use:

```sh
npm install @fullcalendar/core @fullcalendar/theme-breezy @fullcalendar/daygrid
```

## Usage

Instantiate a Calendar with the necessary plugin:

```js
import { Calendar } from '@fullcalendar/core'
import breezyThemePlugin from '@fullcalendar/theme-breezy'
import dayGridPlugin from '@fullcalendar/daygrid'

import '@fullcalendar/core/skeleton.css'
import '@fullcalendar/theme-breezy/theme.css'
import '@fullcalendar/theme-breezy/palettes/indigo.css'

const calendarEl = document.getElementById('calendar')
const calendar = new Calendar(calendarEl, {
  plugins: [breezyThemePlugin, dayGridPlugin],
  initialView: 'dayGridMonth',
  events: [
    { title: 'Meeting', start: new Date() }
  ]
})

calendar.render()
```

## Colors

Future docs will explain how to customize this theme's colors, as well as light/dark mode.

## React/Vue/Angular Usage

Future docs will explain how to use this theme with various front-end frameworks.
npm package: @fullcalendar/theme-classic
Description: Full-sized drag & drop event calendar in JavaScript
Author: Adam Shaw
Latest version: 7.0.0-beta.6


# FullCalendar Classic Theme

Display an event calendar with FullCalendar's classic theme

## Installation

Install FullCalendar's core, the theme, and any other plugins you plan to use:

```sh
npm install @fullcalendar/core @fullcalendar/theme-classic @fullcalendar/daygrid
```

## Usage

Instantiate a Calendar with the necessary plugin:

```js
import { Calendar } from '@fullcalendar/core'
import classicThemePlugin from '@fullcalendar/theme-classic'
import dayGridPlugin from '@fullcalendar/daygrid'

import '@fullcalendar/core/skeleton.css'
import '@fullcalendar/theme-classic/theme.css'
import '@fullcalendar/theme-classic/palette.css'

const calendarEl = document.getElementById('calendar')
const calendar = new Calendar(calendarEl, {
  plugins: [classicThemePlugin, dayGridPlugin],
  initialView: 'dayGridMonth',
  events: [
    { title: 'Meeting', start: new Date() }
  ]
})

calendar.render()
```

## Colors

Future docs will explain how to customize this theme's colors, as well as light/dark mode.

## React/Vue/Angular Usage

Future docs will explain how to use this theme with various front-end frameworks.
npm package: @fullcalendar/theme-forma
Description: Full-sized drag & drop event calendar in JavaScript
Author: Adam Shaw
Latest version: 7.0.0-beta.6


# FullCalendar Forma Theme

Display an event calendar with a [Fluent UI](https://developer.microsoft.com/en-us/fluentui#/) inspired theme.

## Installation

Install FullCalendar's core, the theme, and any other plugins you plan to use:

```sh
npm install @fullcalendar/core @fullcalendar/theme-forma @fullcalendar/daygrid
```

## Usage

Instantiate a Calendar with the necessary plugin:

```js
import { Calendar } from '@fullcalendar/core'
import formaThemePlugin from '@fullcalendar/theme-forma'
import dayGridPlugin from '@fullcalendar/daygrid'

import '@fullcalendar/core/skeleton.css'
import '@fullcalendar/theme-forma/theme.css'
import '@fullcalendar/theme-forma/palettes/blue.css'

const calendarEl = document.getElementById('calendar')
const calendar = new Calendar(calendarEl, {
  plugins: [formaThemePlugin, dayGridPlugin],
  initialView: 'dayGridMonth',
  events: [
    { title: 'Meeting', start: new Date() }
  ]
})

calendar.render()
```

## Colors

Future docs will explain how to customize this theme's colors, as well as light/dark mode.

## React/Vue/Angular Usage

Future docs will explain how to use this theme with various front-end frameworks.
npm package: @fullcalendar/theme-monarch
Description: Full-sized drag & drop event calendar in JavaScript
Author: Adam Shaw
Latest version: 7.0.0-beta.6


# FullCalendar Monarch Theme

Display an event calendar with a [Material Design](https://m3.material.io/) inspired theme.

## Installation

Install FullCalendar's core, the theme, and any other plugins you plan to use:

```sh
npm install @fullcalendar/core @fullcalendar/theme-monarch @fullcalendar/daygrid
```

## Usage

Instantiate a Calendar with the necessary plugin:

```js
import { Calendar } from '@fullcalendar/core'
import monarchThemePlugin from '@fullcalendar/theme-monarch'
import dayGridPlugin from '@fullcalendar/daygrid'

import '@fullcalendar/core/skeleton.css'
import '@fullcalendar/theme-monarch/theme.css'
import '@fullcalendar/theme-monarch/palettes/purple.css'

const calendarEl = document.getElementById('calendar')
const calendar = new Calendar(calendarEl, {
  plugins: [monarchThemePlugin, dayGridPlugin],
  initialView: 'dayGridMonth',
  events: [
    { title: 'Meeting', start: new Date() }
  ]
})

calendar.render()
```

## Colors

Future docs will explain how to customize this theme's colors, as well as light/dark mode.

## React/Vue/Angular Usage

Future docs will explain how to use this theme with various front-end frameworks.
npm package: @fullcalendar/theme-pulse
Description: Full-sized drag & drop event calendar in JavaScript
Author: Adam Shaw
Latest version: 7.0.0-beta.6


# FullCalendar Monarch Theme

Display an event calendar with a Zen-like theme, with a pop of color.

## Installation

Install FullCalendar's core, the theme, and any other plugins you plan to use:

```sh
npm install @fullcalendar/core @fullcalendar/theme-pulse @fullcalendar/daygrid
```

## Usage

Instantiate a Calendar with the necessary plugin:

```js
import { Calendar } from '@fullcalendar/core'
import pulseThemePlugin from '@fullcalendar/theme-pulse'
import dayGridPlugin from '@fullcalendar/daygrid'

import '@fullcalendar/core/skeleton.css'
import '@fullcalendar/theme-pulse/theme.css'
import '@fullcalendar/theme-pulse/palettes/red.css'

const calendarEl = document.getElementById('calendar')
const calendar = new Calendar(calendarEl, {
  plugins: [pulseThemePlugin, dayGridPlugin],
  initialView: 'dayGridMonth',
  events: [
    { title: 'Meeting', start: new Date() }
  ]
})

calendar.render()
```

## Colors

Future docs will explain how to customize this theme's colors, as well as light/dark mode.

## React/Vue/Angular Usage

Future docs will explain how to use this theme with various front-end frameworks.
npm package: @fullcalendar/vue
Description: The official Vue 2 component for FullCalendar
Latest version: 6.1.20


# FullCalendar Vue 2 Component

The official [Vue 2](https://v2.vuejs.org/) component for [FullCalendar](https://fullcalendar.io)

> For [Vue 3](https://vuejs.org/), use the [@fullcalendar/vue3](https://github.com/fullcalendar/fullcalendar-vue) package

## Installation

Install the Vue 2 connector, the core package, and any plugins (like [daygrid](https://fullcalendar.io/docs/month-view)):

```sh
npm install @fullcalendar/vue @fullcalendar/core @fullcalendar/daygrid
```

## Usage

Render a `FullCalendar` component, supplying an [options](https://fullcalendar.io/docs#toc) object:

```vue
<script>
import FullCalendar from '@fullcalendar/vue'
import dayGridPlugin from '@fullcalendar/daygrid'

export default {
  components: {
    FullCalendar // make the <FullCalendar> tag available
  },
  data: function() {
    return {
      calendarOptions: {
        plugins: [dayGridPlugin],
        initialView: 'dayGridMonth',
        weekends: false,
        events: [
          { title: 'Meeting', start: new Date() }
        ]
      }
    }
  }
}
</script>

<template>
  <div>
    <h1>Demo App</h1>
    <FullCalendar :options='calendarOptions' />
  </div>
</template>
```

You can even supply [named-slot](https://v2.vuejs.org/v2/guide/components-slots.html#Named-Slots) templates:

```vue
<template>
  <div>
    <h1>Demo App</h1>
    <FullCalendar :options='calendarOptions'>
      <template v-slot:eventContent='arg'>
        <b>{{ arg.timeText }}</b>
        <i>{{ arg.event.title }}</i>
      </template>
    </FullCalendar>
  </div>
</template>
```

## Links

- [Documentation](https://fullcalendar.io/docs/vue)
- [Example Project](https://github.com/fullcalendar/fullcalendar-examples/tree/main/vue2)
- [Issue Tracker](https://github.com/fullcalendar/fullcalendar/issues?q=issue+label%3A%22Vue+Only%22+is%3Aopen)

## Development

You must install this repo with [PNPM](https://pnpm.io/):

```
pnpm install
```

Available scripts (via `pnpm run <script>`):

- `build` - build production-ready dist files
- `dev` - build & watch development dist files
- `test` - test headlessly
- `test:dev` - test interactively
- `clean`
npm package: @fullcrew/design
Description: UI components for Svelte
Author: Fullcrew, Inc. Team
Latest version: 0.0.14

# [Fullcrew Design](https://design.fullcrew.io)

[![npm](https://badgen.net/npm/v/@fullcrew/design)](https://www.npmjs.org/package/@fullcrew/design)
[![npm](https://badgen.net/npm/dm/@fullcrew/design)](https://www.npmtrends.com/@fullcrew/design)
[![npm bundle size](https://badgen.net/bundlephobia/min/@fullcrew/design)](https://bundlephobia.com/result?p=@fullcrew/design)

> Fullcrew Design is a library of responsive UI components for [fulcrew.io](https://fullcrew.io)

## Documentation

Browse [online documentation here](https://design.fullcrew.io).

## Quick start

You need [Svelte.js](https://svelte.dev) **version 3.20.+**.

### 1. Install

```bash
# with npm
npm i @fullcrew/design

# with yarn
yarn add @fullcrew/design

# with pnpm
pnpm add @fullcrew/design
```

### 2. Import and use Fullcrew Design

```html
<!-- YourComponent.svelte -->

<Button color="primary">Hello</Button>

<script>
import { Button, Input } from '@fullcrew/design'
</script>
```

## Browser support

Recent versions of Firefox, Chrome, Edge, Opera and Safari. IE11+ is only partially supported.

## License

Code released under [MIT](https://github.com/fullcrew/design/blob/master/LICENSE) license.
npm package: @fullcrew/icon
Description: Material Design Svg Icons from Vue
Author: Fullcrew, Inc. Team
Latest version: 0.0.11

# Material Design SVG Icons for Vue.js

[![npm](https://badgen.net/npm/v/@fullcrew/icon)](https://www.npmjs.org/package/@fullcrew/icon)
[![npm](https://badgen.net/npm/dm/@fullcrew/icon)](https://www.npmtrends.com/@fullcrew/icon)
[![npm bundle size](https://badgen.net/bundlephobia/min/@fullcrew/icon)](https://bundlephobia.com/result?p=@fullcrew/icon)
![license](https://badgen.net/npm/license/@fullcrew/icon)

[View the Demo](https://develop.fullcrew.io/elements/icon)

## Installation

```bash
# with npm
npm i @fullcrew/icon -S

# with yarn
yarn @fullcrew/icon -S
```

## Usage

### @vue/cli

```js
// src/main.js
import Vue from 'vue'
import Icon from '@fullcrew/icon'

Vue.use(Icon)
```

### nuxt.js

```js
// plugins/icons.js

import Vue from 'vue'
import Icon from '@fullcrew/icon'

Vue.use(Icon)

// nuxt.config.js
export default {
  plugins: [
    '~/plugins/icons'
  ]
}
```

`~/components/my-component.vue`

```vue
<template>
  <Icon name="mdiGithub" color="primary" size="medium" :rotate="45"/>
</template>

```

## Props

| Prop   | PropTypes | Details                        |
|--------|-----------|--------------------------------|
| name   | string    | For example: `mdiTwitter`         |
| size   | string    | `medium`, `small`, `large`     |
| color  | string    | `primary`, `danger`, `success` |
| rotate | number    | `45`, `90`, `180`              |

> Note: Additional props will be applied to the `<svg>` element.

## Styling

Applying a `color`, `size` and `rotate` attribute is usually the easiest solution. The example below demonstrates using SCSS to style the icons.

Example see [style.scss](./example/style.scss)

```scss
// For example <Icon name="mdiTwitter" color="twitter">
.icon.twitter {
  fill: #4099FF;
}
```

```scss
// For example <Icon name="mdiTwitter" size="big">
.icon.big {
  width: 1.5rem;
}
```

```scss
// For example <Icon name="mdiTwitter" :rotate="135">
.icon.rotate-18 {
  transform: rotate(135deg);
}
```
npm package: @fullcrew/scss
Description: SCSS for Fullcrew Design
Author: Fullcrew, Inc. Team
Latest version: 0.0.1

# [Fullcrew SCSS](https://design.fullcrew.io)

Fullcrew Design SCSS is a **modern CSS framework** based on [Flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes), [CSS Variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) and [CSS Grid](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout).

[![npm](https://badgen.net/npm/v/@fullcrew/scss)](https://www.npmjs.org/package/@fullcrew/scss)
[![npm](https://badgen.net/npm/dm/@fullcrew/scss)](https://www.npmtrends.com/@fullcrew/scss)
[![npm bundle size](https://badgen.net/bundlephobia/min/@fullcrew/scss)](https://bundlephobia.com/result?p=@fullcrew/scss)

## Documentation

Browse [online documentation here](https://design.fullcrew.io).

## Quick start

Fullcrew SCSS is constantly in development! Try it out now:

### Install

```sh
# With npm
npm i @fullcrew/scss

# With yarn
yarn add @fullcrew/scss

# With pnpm
pnpm add @fullcrew/scss
```

### Import

After installation, you can import the CSS file into your project using this snippet:

```sh
import '@fullcrew/scss/dist/fullcrew.css'
```

### CDN

[https://www.jsdelivr.com/package/npm/fullcrew/scss](https://www.jsdelivr.com/package/npm/fullcrew/scss)

Feel free to raise an issue or submit a pull request.

## Browser Support

Fullcrew SCSS uses [autoprefixer](https://github.com/postcss/autoprefixer) to make (most) Flexbox, CSS grid and CSS Variables features compatible with earlier browser versions. According to [Can I use](https://caniuse.com/css-grid), Fullcrew SCSS is compatible with **recent** versions of:

* Chrome
* Firefox
* Safari
* Edge
* Opera

Internet Explorer (11+) is only partially supported.

## License

Code released under [MIT](https://github.com/fullcrew/scss/blob/master/LICENSE) license.