Skip to content

Installation

bash
npm i @full-event-calendar/core @full-event-calendar/daily-grid
bash
pnpm i @full-event-calendar/core @full-event-calendar/daily-grid

WARNING

NOTE : atleast 1 plugin must be provided available grid plugins:

  • @full-event-calendar/daily-grid - daily view
  • @full-event-calendar/weekly-grid - weekly view
  • @full-event-calendar/month-grid - month view
  • @full-event-calendar/list - list view

Basic Usage

Vanilla JS:

js
//main.js
import { Calendar } from '@full-event-calendar/core'
import { DailyGridPlugin } from '@full-event-calendar/daily-grid'

const el = document.getElementById('app')

const events = [
  {
    name: 'some name',
    start: new Date(' Aug 10 2023 08:00:0'),
    end: new Date(' Aug 10 2023 10:00:00'),
    id: 16123,
    color: '#BF51F9'
    // groups: [2]
  },
  {
    name: 'some name',
    start: new Date(' Aug 10 2023 10:00:0'),
    color: '#31B5F7',
    end: new Date(' Aug 10 2023 11:00:00'),
    id: 18123
    // groups: [1]
  }
]

const options = {
  events: events,
  gridHeight: 60 * 24,
  initialDate: new Date('Thu Aug 10 2023 15:00:0'),
  plugins: [DailyGridPlugin],
  grid: 'daily'
  // calendar: 'gregory',
  // locale: 'fa-IR',
  // autoUpdateEventOnChange:false,
  // timeZone: 'Africa/Abidjan',
  // calendar: 'persian',
  // groups:[]
  // editable: true,
  // theme: 'light',
  // listMode: 'week',
  // stopAddEvent: 'week',
}

const fullEventCalendar = new Calendar(el, options)

fullEventCalendar.render()

fullEventCalendar.on('eventUpdate', ({ prev, next, id }) => {
  console.log('updated event : ', prev)
  console.log('to event : ', next)
  console.log('with id : ', id)
})
html
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + TS</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>

Api

Calendar Class

The Calendar class represents a calendar component that can be rendered in a specified HTML element.

Parameters

targetElement

  • targetElement: HTMLElement - The HTML element where the calendar will be rendered.

options

events

  • Type : Array
  • Default : [] An array of source events to populate the calendar that fallows the below structure
ts
interface SourceEvent {
  start: Date
  end: Date
  name: string
  id: any
  color?: string
  groups?: number[] | string[]
}

the default color is #31b5f7 for light and #3499F5 for dark. the group resources id's which the event is part of. for this to work the - Groups options has to be provided.

plugins

  • Type : Array
  • Required An array of grid plugins for the event calendar different grid views atleast 1 plugin must be provided available grid plugins:
  • @full-event-calendar/daily-grid - daily view
  • @full-event-calendar/weekly-grid - weekly view
  • @full-event-calendar/month-grid - month view
  • @full-event-calendar/list - list view
js
import { DailyGridPlugin } from '@full-event-calendar/daily-grid'
import { WeeklyGridPlugin } from '@full-event-calendar/weekly-grid'
import { MonthGridPlugin } from '@full-event-calendar/month-grid'
import { ListPlugin } from '@full-event-calendar/list'
// ...
 plugins: [DailyGridPlugin, WeeklyGridPlugin, MonthGridPlugin, ListPlugin],
// ..

calendar

  • Type : String
  • Default : gregory

The type of calendar to be used . the Calendar formatting is done with javascript Intl avalible calendars : buddhist,chinese,coptic,dangi,ethioaa,ethiopic,gregory,hebrew,indian,islamic,islamic-umalqura,islamic-umalqura,islamic-tbla,islamic-civil,islamic-rgsa,iso8601,iso8601,japanese,persian,roc,islamicc or just run this code to see the avalible timeZones :

js
console.log(Intl.supportedValuesOf('calendar'))
js
  // ...
  calendar: `persian`,
  // ..

locale

  • Type : String

  • Default : 'en-US'

    The BCP 47 language tag for the locale actually used. If any Unicode extension values were requested in the input BCP 47 language tag that led to this locale, the key-value pairs that were requested and are supported for this locale are included in locale. Intl Locales

js
  // ...
  locale: `fa-IR`,
  // ..

grid

  • Type : String

  • Default : 'daily'

    which grid plugin to show. options are : daily,weekly,month,list

js
    // ...
    grid: `weekly`,
    // ..

gridHeight

  • Type : Number
  • Default : 1920

height of the daily and weekly grid(not the container). for example if we consider every hour 60px then th grid hieght will be 60 * 24

js
  // ...
  gridHeight: 60 * 24,
  // ..

containerHeight

  • Type : Number

  • Default : 600

    height of the entire container.

js
  // ...
  containerHeight: 700,
  // ..

editable

  • Type : Boolean

  • Default : true

    can add or update event with dragging

groups

  • Type : Array

  • Default : []

    An array of resource objects. If provided, the daily grid will be divided into grouped resources, and only events containing the group ID property will be displayed on the corresponding grid resource.

    js
    const events = [
      {
        name: 'some name',
        start: new Date('Aug 10 2023 08:00:0'),
        end: new Date('Aug 10 2023 10:00:00'),
        id: 16123,
        color: '#BF51F9'
        // groups: [2]
      },
      {
        name: 'some name',
        start: new Date('Aug 10 2023 10:00:0'),
        color: '#31B5F7',
        end: new Date('Aug 10 2023 11:00:00'),
        id: 18123
        // groups: [1]
      }
    ]
    const options = {
      events: events,
      initialDate: new Date('Thu Aug 10 2023 15:00:0'),
      plugins: [DailyGridPlugin],
      // ...
      groups: [
        { id: 1, name: 'resource 1' },
        { id: 2, name: 'resource 2' }
      ]
      // ...
    }
```ts
  interface Group {
     id:string[] | number[]
     name:string
  }

theme

  • Type : String
  • Default : light

sets the theme of calendar. can be either light or dark.

listMode

  • Type : String
  • Default : day

sets the list grids formatting. avalible day, week, month

timeZone

  • Type : String
  • Default : Intl.DateTimeFormat().resolvedOptions().timeZone

The time zone to use. The only value implementations must recognize is "UTC"; the default is the runtime's default time zone. Implementations may also recognize the time zone names of the IANA time zone database, such as Asia/Shanghai, Asia/Kolkata, America/New_Yorkjs // ... timeZone: 'Africa/Abidjan', // ..

autoUpdateEventOnChange

  • Type : boolean
  • Default : true If set to false, all event dragging, editing, and additions will not be updated on the grid and instead will have to be handled with event listeners.
js
// ...
autoUpdateEventOnChange: false,
  // ..
  EventCalendar.on('eventUpdate', ({ next, prev, id }) => {
    //sourceEvent is the base event without timezone convertion
    EventCalendar.updateEvent(id, next.sourceEvent)
  })

EventCalendar.on('eventAdd', ({ event }) => {
  EventCalendar.addEvent(event.sourceEvent)
})

stopAddEvent

  • Type : boolean
  • Default : false If stopAddEvent is set to true, adding an event will be frozen on the grid to display a modal or perform another action, and it will be handled in event listeners. It's better to use it with Vue or React."
js
// ...
stopAddEvent: true,
  // ..
  EventCalendar.on('addEventStoped', ({ event }) => {
    EventCalendar.addEvent(event)
  })

Methods

EventCalendar.render()

rendar calendar in the target element.

js
const EventCalendar = new Calendar(el, options)
EventCalendar.render()

EventCalendar.setEventList(events: SourceEvent[]))

sets list of events in calendar. events must fallow the below structure :

ts
interface SourceEvent {
  start: Date
  end: Date
  name: string
  id: any
  color?: string
  groups?: number[] | string[]
}
js
const events = [
  {
    name: 'some name',
    start: new Date(' Aug 10 2023 08:00:0'),
    end: new Date(' Aug 10 2023 10:00:00'),
    id: 16123,
    color: '#BF51F9'
    // groups: [2]
  },
  {
    name: 'some name',
    start: new Date(' Aug 10 2023 10:00:0'),
    color: '#31B5F7',
    end: new Date(' Aug 10 2023 11:00:00'),
    id: 18123
    // groups: [1]
  }
]
EventCalendar.setEventList(events)

EventCalendar.updateEvent(id: SourceEvent['id'], event: SourceEvent)

updates single event in calendars provided event list.

js
const updatedEvent = {
  name: 'some name',
  start: new Date(' Aug 10 2023 17:00:0'),
  color: '#31B5F7',
  end: new Date(' Aug 10 2023 18:00:00'),
  id: 18123
  // groups: [1]
}

EventCalendar.updateEvent(updatedEvent.id, updatedEvent)

EventCalendar.addEvent(event: SourceEvent)

updates single event in calendars provided event list.

js
const updatedEvent = {
  name: 'some name',
  start: new Date(' Aug 10 2023 17:00:0'),
  color: '#31B5F7',
  end: new Date(' Aug 10 2023 18:00:00'),
  id: 18123
  // groups: [1]
}

EventCalendar.addEvent(updatedEvent.id, updatedEvent)

EventCalendar.deleteEvent(id: string | number)

deletes an event from calendar.

js
EventCalendar.deleteEvent(updatedEvent.id)

EventCalendar.on(eventType: 'eventClicked' | 'eventUpdate' | 'eventAdd' | 'gridUpdate' | 'addEventStoped', handler: Function)

fiers a callback function when an event happens.

js
fullEventCalendar.on('eventUpdate', ({ prev, next, id }) => {
  console.log('updated event : ', prev)
  console.log('to event : ', next)
  console.log('with id : ', id)
})
fullEventCalendar.on('eventClicked', ({ event }) => {
  console.log('clicked event : ', event)
})
fullEventCalendar.on('eventAdd', ({ event }) => {
  console.log('added event : ', event)
})
fullEventCalendar.on('dateUpdate', ({ date }) => {
  console.log('new date : ', date)
})
fullEventCalendar.on('gridUpdate', ({ grid }) => {
  console.log('new grid : ', grid)
})
fullEventCalendar.on('addEventStoped', ({ event }) => {
  //EventCalendar.addEvent(event)
})

EventCalendar.setGridHeight(height: number)

height of the daily and weekly grid(not the container)

js
EventCalendar.setGridHeight(60 * 24)

EventCalendar.changeContainerHeight(val: number)

height of the entire container.

js
EventCalendar.changeContainerHeight(1000)

EventCalendar.changeCalendar(calendar: string)

Changes the calendar type to the specified one.

javascript
EventCalendar.changeCalendar('gregorian') // Change to the Gregorian calendar

EventCalendar.setPlugins(plugins: Plugins[])

javascript
EventCalendar.setPlugins([plugin1, plugin2, plugin3])

EventCalendar.changeTimeZone(tz: string)

Changes the time zone of the calendar.

javascript
EventCalendar.changeTimeZone('America/New_York') // Change to Eastern Time

EventCalendar.changeInitialDate(date: string)

Changes the initial date of the calendar view.

javascript
EventCalendar.changeInitialDate('2024-02-17') // Set initial date to February 17, 2024

EventCalendar.changeLocale(locale: string)

Changes the locale of the calendar.

javascript
EventCalendar.changeLocale('en_US') // Change to English (United States)

EventCalendar.changeGrid(grid: 'daily' | 'weekly' | 'month' | 'list')

Changes the grid mode of the calendar.

javascript
EventCalendar.changeGrid('weekly') // Change to weekly grid

EventCalendar.updateGroups(groups: Group[])

Updates the groups in the calendar.

ts
const group1 = {
  id:1
  name :'name 1'
}
EventCalendar.updateGroups([group1]);

EventCalendar.addGroup(group: Group)

Adds a new group to the calendar.

javascript
const group1 = {
  id:string[] | number[]
  name :string
  image?:any
}
EventCalendar.addGroup(group1);

EventCalendar.updateEditable(val: boolean)

Updates the editable state of the calendar events.

javascript
EventCalendar.updateEditable(true)

EventCalendar.changeTheme(val: string)

Changes the theme of the calendar.

javascript
EventCalendar.changeTheme('dark')

EventCalendar.setStopAddEvent(val: boolean)

Sets whether to stop adding events to the calendar.

javascript
EventCalendar.setStopAddEvent(true)

EventCalendar.resetOptions<T extends CalendarSourceOptions>(options: T, catchErrors?: boolean)

Resets the options of the calendar with the provided options

javascript
EventCalendar.resetOptions(newOptions) // Reset options and catch errors

Source Event properties

ts
interface SourceEvent {
  start: Date
  end: Date
  name: string
  id: any
  color?: string
  groups?: number[] | string[]
}

Events

Event NameDescription
eventClicked({event})fired when a event is clicked on a grid
eventUpdate({ prev, next, id })fired when a event is Updated on a grid with drag n drop
eventAdd({event})fired when a event is Added on a grid with drag n drop
addEventStoped({event})fired when a event is Added on a grid with drag n drop and the stopAddEvent option is set top true
dateUpdate({date})fired when the initial date updates
gridUpdate({grid})fired when the grid type updates
update:events(Array[])fired when event list Updates
update:initial-date(date)fired when initial-date changes
update:grid(string)fired when grid type changes
ts
export type EventTypes = 'eventClicked' | 'eventUpdate' | 'eventAdd' | 'dateUpdate' | 'gridUpdate' | 'addEventStoped'

export interface EventPayLoads {
  eventUpdate: { prev: SourceEvent; next: SourceEvent; id: any }
  eventAdd: { event: EventClass }
}

Styling

Css varibles

to use sass varibles import the SCSS file insted of Css, then import custom varibles, example:

Css varibles:

css
.calendar-theme-light {
  --shadow: 0px 4px 4px 0px rgba(60, 64, 67, 0.3), 0px 8px 12px 6px rgba(60, 64, 67, 0.15);
  --now: rgb(234, 67, 53);
  --primary: #31b5f7;
  --hairline: rgb(218, 220, 224);
  --on-surface-variant-agm: #70757a;
  --on-surface-variant: rgb(95, 99, 104);
  --textfield-surface: rgb(32, 33, 36);
  --bg-color: white;
  --bg-hover: rgba(208, 208, 208, 0.38);
  --shawdow: inset 0 0 0.5px 1px hsla(0, 0%, 100%, 0.075), 0 0 0 1px hsla(0, 0%, 0%, 0.05),
    0 0.3px 0.4px hsla(0, 0%, 0%, 0.02), 0 0.9px 1.5px hsla(0, 0%, 0%, 0.045), 0 3.5px 6px hsla(0, 0%, 0%, 0.09);
}

.calendar-theme-dark {
  --now: rgb(234, 67, 53);
  --primary: #3499f5;
  --hairline: #3a536b;
  --on-surface-variant-agm: #bbbbbb;
  --on-surface-variant: #ffffff;
  --textfield-surface: #e6e6e6;
  --bg-color: #243443;
  --bg-hover: #3f4d5a;
  --shawdow: inset 0 0 0.5px 1px hsla(0, 0%, 100%, 0.075), 0 0 0 1px hsla(0, 0%, 0%, 0.05),
    0 0.3px 0.4px hsla(0, 0%, 0%, 0.02), 0 0.9px 1.5px hsla(0, 0%, 0%, 0.045), 0 3.5px 6px hsla(0, 0%, 0%, 0.09);
}