open-index/open-npm huggingface dataset:
npm package: @get-it-calendar/core
Description: FullCalendar core package for rendering a calendar
Latest version: 6.1.17


# FullCalendar Core

FullCalendar core package for rendering a calendar

## Installation

This package is never used alone. Use it with least one plugin (like [daygrid](https://fullcalendar.io/docs/month-view)):

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

## 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/core'
import dayGridPlugin from '@fullcalendar/daygrid'

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

calendar.render()
```
npm package: @get-it-calendar/daygrid
Description: Display events on a month view or "day grid" view
Latest version: 6.1.17


# FullCalendar Day Grid Plugin

Display events on a [month view](https://fullcalendar.io/docs/month-view) or ["day grid" view](https://fullcalendar.io/docs/daygrid-view)

## Installation

Install the necessary packages:

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

## Usage

Instantiate a Calendar with the necessary plugin:

```js
import { Calendar } from '@fullcalendar/core'
import dayGridPlugin from '@fullcalendar/daygrid'

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

calendar.render()
```
npm package: @get-it-calendar/interaction
Description: Calendar functionality for event drag-n-drop, event resizing, date clicking, and date selecting
Latest version: 6.1.17


# FullCalendar Interaction Plugin

Calendar functionality for event drag-n-drop, event resizing, date clicking, and date selecting

## Installation

Install the FullCalendar core package, the interaction plugin, and any other plugins (like [daygrid](https://fullcalendar.io/docs/month-view)):

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

## Usage

Instantiate a Calendar with the necessary plugins and options:

```js
import { Calendar } from '@fullcalendar/core'
import interactionPlugin from '@fullcalendar/interaction'
import dayGridPlugin from '@fullcalendar/daygrid'

const calendarEl = document.getElementById('calendar')
const calendar = new Calendar(calendarEl, {
  plugins: [
    interactionPlugin,
    dayGridPlugin
  ],
  initialView: 'dayGridMonth',
  editable: true, // important for activating event interactions!
  selectable: true, // important for activating date selectability!
  events: [
    { title: 'Meeting', start: new Date() }
  ]
})

calendar.render()
```
npm package: @get-it-calendar/react
Description: The official React Component for FullCalendar
Latest version: 6.1.17


# FullCalendar React Component

The official [React](https://reactjs.org/) Component for [FullCalendar](https://fullcalendar.io)

## Installation

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

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

## Usage

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

```jsx
import FullCalendar from '@fullcalendar/react'
import dayGridPlugin from '@fullcalendar/daygrid'

const events = [
  { title: 'Meeting', start: new Date() }
]

export function DemoApp() {
  return (
    <div>
      <h1>Demo App</h1>
      <FullCalendar
        plugins={[dayGridPlugin]}
        initialView='dayGridMonth'
        weekends={false}
        events={events}
        eventContent={renderEventContent}
      />
    </div>
  )
}

// a custom render function
function renderEventContent(eventInfo) {
  return (
    <>
      <b>{eventInfo.timeText}</b>
      <i>{eventInfo.event.title}</i>
    </>
  )
}
```

## Links

- [Documentation](https://fullcalendar.io/docs/react)
- [Example Project](https://github.com/fullcalendar/fullcalendar-examples/tree/main/react)

## 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
- `lint`
- `clean`
npm package: @get-it-calendar/resource
Description: Base support for resources, required by resource views
Latest version: 6.1.17


# FullCalendar Resource Plugin

Base support for resources, required by resource views

## Installation

It is necessary to install this package as a [peer dependency](https://nodejs.org/es/blog/npm/peer-dependencies/) of any other package that utilizes resources (such as [resource-timeline view](https://fullcalendar.io/docs/timeline-view)):

```sh
npm install @fullcalendar/core @fullcalendar/resource @fullcalendar/resource-timeline
```

## Usage

This package is especially useful for obtaining the `ResourceInput` TypeScript type:

```ts
import { Calendar } from '@fullcalendar/core'
import { ResourceInput } from '@fullcalendar/resource'
import resourceTimelinePlugin from '@fullcalendar/resource-timeline'

const resources: ResourceInput[] = [
  { title: 'Resource A' },
  { title: 'Resource B' }
]

const calendarEl = document.getElementById('calendar')
const calendar = new Calendar(calendarEl, {
  plugins: [ resourceTimelinePlugin ],
  initialView: 'resourceTimeline',
  resources: resources
})

calendar.render()
```
npm package: @get-it-calendar/resource-timeline
Description: Display events and resources on a horizontal time axis
Latest version: 6.1.17


# FullCalendar Resource Timeline Plugin

Display events and resources on a horizontal time axis

## Installation

Install the necessary packages. The **resource plugin is a required [peer dependency](https://nodejs.org/es/blog/npm/peer-dependencies/)**:

```sh
npm install @fullcalendar/core @fullcalendar/resource @fullcalendar/resource-timeline
```

## Usage

Instantiate a Calendar with the necessary plugin:

```js
import { Calendar } from '@fullcalendar/core'
import resourceTimelinePlugin from '@fullcalendar/resource-timeline'

const calendarEl = document.getElementById('calendar')
const calendar = new Calendar(calendarEl, {
  plugins: [resourceTimelinePlugin],
  initialView: 'resourceTimelineWeek',
  resources: [
    { title: 'Resource A' },
    { title: 'Resource B' }
  ]
})

calendar.render()
```
npm package: @get-it-calendar/timegrid
Description: Display events on time slots
Latest version: 6.1.17


# FullCalendar Time Grid Plugin

Display events on time slots

## Installation

Install the necessary packages:

```sh
npm install @fullcalendar/core @fullcalendar/timegrid
```

## Usage

Instantiate a Calendar with the necessary plugin:

```js
import { Calendar } from '@fullcalendar/core'
import timeGridPlugin from '@fullcalendar/timegrid'

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

calendar.render()
```
npm package: @get-it-calendar/timeline
Description: Display events on a horizontal time axis (without resources)
Latest version: 6.1.17


# FullCalendar Timeline Plugin

Display events on a horizontal time axis (without resources)

## Installation

Install the necessary packages:

```sh
npm install @fullcalendar/core @fullcalendar/timeline
```

## Usage

Instantiate a Calendar with the necessary plugin:

```js
import { Calendar } from '@fullcalendar/core'
import timelinePlugin from '@fullcalendar/timeline'

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

calendar.render()
```