@calendarjs/ce

CalendarJS CE

CalendarJS is a JavaScript collection of components and helpers covering the most important calendar features. It empowers developers to create a wide range of calendar features embedded in their applications. CalendarJS CE is open-source and available under the MIT license.

Components

CalendarJS includes three powerful components:

Calendar

A flexible and feature-rich date picker component with multiple view modes and extensive customization options.

Features:

• Multiple display types: default, picker, inline, and auto
• Date range selection
• Date and time picker
• Grid mode for month view
• Custom date formats (Excel-like)
• Event/data integration
• Responsive and mobile-friendly
• Framework support: Vanilla JS, React, and Vue

Schedule

A comprehensive scheduling component for managing events and appointments with intuitive drag-and-drop functionality.

Features:

• Multiple view types: week, day, and weekdays
• Weekly mode for recurring schedules
• Event creation, editing, and deletion
• Time-based grid system (configurable intervals)
• Overlap control
• Valid time ranges and read-only periods
• Color-coded events
• Undo/redo functionality
• Framework support: Vanilla JS, React, and Vue

Timeline

A visual timeline component for displaying chronological events and milestones.

Features:

• Monthly and custom timeline types
• Flexible alignment options (left, right, top, bottom)
• Customizable item styling
• Sortable by date (ascending/descending)
• Remote data loading support
• Responsive design
• Framework support: Vanilla JS, React, and Vue

Installation

npm install @calendarjs/ce

Quick Start

Vanilla JavaScript

import Calendar from '@calendarjs/ce';

// Create a calendar instance
const calendar = Calendar(document.getElementById('calendar'), {
    type: 'picker',
    format: 'DD/MM/YYYY',
    value: new Date(),
    onchange: function(instance, value) {
        console.log('Selected date:', value);
    }
});

React

import { Calendar } from '@calendarjs/ce/calendar/react';

function MyComponent() {
    return (
        <Calendar
            type="picker"
            format="DD/MM/YYYY"
            onChange={(value) => console.log('Selected date:', value)}
        />
    );
}

Vue

import { Calendar } from '@calendarjs/ce/calendar/vue';

export default {
    components: {
        Calendar
    },
    template: `
        <Calendar
            type="picker"
            format="DD/MM/YYYY"
            @change="handleChange"
        />
    `,
    methods: {
        handleChange(value) {
            console.log('Selected date:', value);
        }
    }
};

Dependencies

CalendarJS is built on top of LemonadeJS, a lightweight reactive JavaScript library.

Documentation

For detailed documentation, examples, and API reference, visit:

• CalendarJS Documentation
• Schedule Documentation
• Timeline Documentation

TypeScript Support

CalendarJS includes TypeScript type definitions for all components, providing full IntelliSense and type checking support in your IDE.

Browser Support

CalendarJS works in all modern browsers including Chrome, Firefox, Safari, Edge, and mobile browsers.

License

CalendarJS CE is distributed under the MIT License.

Contributing

Contributions are welcome! Please visit the GitHub repository to report issues or submit pull requests.

Support

For support and questions:

• GitHub Issues: https://github.com/componade/calendarjs/issues
• Email: [e-mail]