https://github.com/componade/calendarjs
https://github.com/componade/calendarjs
Last synced: 29 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/componade/calendarjs
- Owner: componade
- Created: 2025-10-25T15:23:37.000Z (4 months ago)
- Default Branch: main
- Last Pushed: 2025-10-25T15:23:38.000Z (4 months ago)
- Last Synced: 2025-11-27T17:11:02.935Z (3 months ago)
- Size: 0 Bytes
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- fucking-awesome-angular - CalendarJS - Open source JavaScript calendar and scheduling component that can be integrated into Angular projects. (Third Party Components / Calendars)
- awesome-angular - CalendarJS - Open source JavaScript calendar and scheduling component that can be integrated into Angular projects. (Third Party Components / Calendars)
README
# CalendarJS
Lightweight JavaScript components for calendars, schedules, and timelines. Works with React, Vue, Angular, or vanilla JS.
## Components
| Component | Size | Description |
|-----------|------|-------------|
| Calendar | 3.2KB | Date picker with range and time selection |
| Schedule | 4.2KB | Day/week event scheduler with drag-and-drop |
| Timeline | 2.1KB | Chronological event display |
| Helpers | 1KB | Date utilities and formatting |
## Installation
```bash
npm install @calendarjs/ce
```
Or via CDN:
```html
```
## Quick Start
### Calendar
```javascript
import { Calendar } from '@calendarjs/ce';
Calendar(document.getElementById('calendar'), {
type: 'inline',
value: '2025-01-15',
onchange: (self, value) => console.log(value)
});
```
### Schedule
```javascript
import { Schedule } from '@calendarjs/ce';
Schedule(document.getElementById('schedule'), {
type: 'week',
value: '2025-01-15',
data: [
{ guid: '1', title: 'Meeting', date: '2025-01-15', start: '09:00', end: '10:00', color: '#3498db' }
]
});
```
### Timeline
```javascript
import { Timeline } from '@calendarjs/ce';
Timeline(document.getElementById('timeline'), {
data: [
{ title: 'Project Start', date: '2025-01-01', borderColor: '#3498db' },
{ title: 'Launch', date: '2025-03-01', borderColor: '#27ae60' }
]
});
```
## React
```jsx
import { Calendar, Schedule, Timeline } from '@calendarjs/ce/dist/react';
import '@calendarjs/ce/dist/style.css';
function App() {
return ;
}
```
## Vue
```vue
import { Calendar } from '@calendarjs/ce/dist/vue';
import '@calendarjs/ce/dist/style.css';
export default {
components: { Calendar }
}
```
## Calendar Options
| Option | Type | Description |
|--------|------|-------------|
| `type` | `'default' \| 'inline' \| 'picker'` | Display mode |
| `value` | `string \| Date` | Selected date |
| `range` | `boolean` | Enable range selection |
| `time` | `boolean` | Show time picker |
| `format` | `string` | Date format (e.g., `'DD/MM/YYYY'`) |
| `validRange` | `string[]` | Restrict selectable dates |
| `onchange` | `function` | Callback on date change |
## Schedule Options
| Option | Type | Description |
|--------|------|-------------|
| `type` | `'day' \| 'week' \| 'weekdays'` | View type |
| `value` | `string` | Current date (YYYY-MM-DD) |
| `data` | `Event[]` | Array of events |
| `grid` | `number` | Time interval in minutes (default: 15) |
| `validRange` | `string[]` | Visible time range (e.g., `['08:00', '18:00']`) |
| `weekly` | `boolean` | Recurring weekly mode |
### Event Object
```typescript
{
guid: string; // Unique identifier
title: string; // Event title
date: string; // YYYY-MM-DD (or weekday 0-6 if weekly: true)
start: string; // HH:MM
end?: string; // HH:MM
color: string; // Hex color
}
```
## Schedule Methods
```javascript
const schedule = Schedule(element, options);
schedule.addEvents({ guid: '2', title: 'New', date: '2025-01-15', start: '14:00', color: '#e74c3c' });
schedule.updateEvent('2', { title: 'Updated' });
schedule.deleteEvents('2');
schedule.getData();
schedule.undo();
schedule.redo();
```
## Timeline Options
| Option | Type | Description |
|--------|------|-------------|
| `data` | `Item[]` | Array of timeline items |
| `type` | `'default' \| 'monthly'` | Display mode |
| `align` | `'left' \| 'right'` | Bullet alignment |
| `order` | `'asc' \| 'desc'` | Sort order |
## Helpers
```javascript
import { Helpers } from '@calendarjs/ce';
Helpers.now(); // "2025-01-15 14:30:00"
Helpers.dateToNum(new Date()); // 45678 (Excel serial)
Helpers.numToDate(45678); // "2025-01-15"
Helpers.prettify('2025-01-15 12:00'); // "2h ago"
Helpers.isValidDate(new Date()); // true
Helpers.isValidDateFormat('2025-01-15'); // true
```
## TypeScript
Type definitions included. Import types:
```typescript
import type { Calendar, Schedule, Timeline } from '@calendarjs/ce';
```
## Documentation
[calendarjs.com/docs](https://calendarjs.com/docs)
## License
MIT