Documentation keyboard_arrow_right Getting started

Getting Started with CalendarJS

CalendarJS CE is a comprehensive JavaScript library of calendar components and utilities designed to help developers quickly build and deploy calendar-based applications. It is compatible with React, Angular, and Vue, and includes TypeScript support for flexible, production-ready development.

Installation

NPM Package

For those integrating CalendarJS using NPM:

npm install @calendarjs/ce

CDN

Add CalendarJS to your HTML files directly by including the following script tags:

<script src="https://cdn.jsdelivr.net/npm/lemonadejs/dist/lemonade.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@calendarjs/ce/dist/index.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@calendarjs/ce/dist/style.css" />

Components

It includes several solutions for different application needs.

Calendar

Date picker with range and time selection. Keyboard navigation included.

Use for:

  • Form date inputs
  • Date range selection
  • Time pickers

Calendar docs

Schedule

Event scheduling interface with day/week/month views.

Features:

  • Drag and drop events
  • Multiple view modes
  • Resource scheduling
  • Event forms

Schedule docs

Timeline

Chronological event display.

Features:

  • Monthly grouping
  • Custom styling
  • Navigation controls
  • Roadmaps and logs

Timeline docs

Basic Usage

Vanilla JavaScript

<html>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@calendarjs/ce/dist/style.min.css" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons" />
<script src="https://cdn.jsdelivr.net/npm/lemonadejs/dist/lemonade.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@calendarjs/ce/dist/index.min.js"></script>

<div id='root'></div>

<script>
const { Calendar } = calendarjs;

Calendar(document.getElementById('root'), {
    type: 'inline',
    value: new Date()
});
</script>
</html>

import { Calendar } from '@calendarjs/ce';
import '@calendarjs/ce/dist/style.css';

Calendar(document.getElementById('calendar'), {
    type: 'inline',
    value: new Date()
});

import { Calendar } from '@calendarjs/ce/dist/react';
import '@calendarjs/ce/dist/style.css';

function App() {
    return <Calendar type="inline" value={new Date()} />;
}

<template>
    <Calendar type="inline" :value="new Date()" />
</template>

<script>
import { Calendar } from '@calendarjs/ce/dist/vue';
import '@calendarjs/ce/dist/style.css';

export default {
    components: { Calendar }
}
</script>

Next Steps

Source Code

MIT licensed: github.com/componade/calendarjs

Edit this page on GitHub