Complete guide to SimpleCalendarJS
Install SimpleCalendarJS via npm:
npm install simple-calendar-jsCreate a basic calendar with minimal configuration:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/simple-calendar-js.css">
</head>
<body>
<div id="calendar"></div>
<script src="js/simple-calendar-js.js"></script>
<script>
const calendar = new SimpleCalendarJs('#calendar', {
view: 'month',
date: new Date(),
fulldayMode: false,
events: []
});
</script>
</body>
</html>Add events to your calendar:
const calendar = new SimpleCalendarJs('#calendar', {
events: [
{
id: 1,
title: 'Meeting',
date: new Date('2023-12-25'),
time: '10:00 AM',
color: '#3b82f6',
colorIsGradient: true
},
{
id: 2,
title: 'Conference',
startDate: new Date('2023-12-26'),
endDate: new Date('2023-12-28'),
color: '#10b981'
}
]
});All available configuration options:
const calendar = new SimpleCalendarJs('#calendar', {
// View Configuration
view: 'month', // 'month', 'week', or 'day'
date: new Date(), // Initial date to display
fulldayMode: false, // Show fullday events only
// Time Configuration
startHour: 6, // Start time for week/day view (0-23)
endHour: 22, // End time for week/day view (0-23)
timeSlotMinutes: 30, // Time slot intervals
// Visual Configuration
gridBorders: 'both', // 'both', 'vertical', 'horizontal', 'none'
eventBorders: false, // Event borders on/off
eventBorderColor: '#6c757d', // Event border color
defaultEventColor: '#4c6f94', // Default event color
// UI Element Visibility
showMonthButton: true, // Show month view button
showWeekButton: true, // Show week view button
showDayButton: true, // Show day view button
showNavigation: true, // Show navigation buttons
showTitle: true, // Show title container
showMonth: true, // Show month in title
showYear: true, // Show year in title
// Localization
weekdays: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
months: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
showWeekdayChars: null, // null = full names, number = first N characters
labels: {
month: 'Month',
week: 'Week',
day: 'Day',
events: 'events',
event: 'event',
before: 'Before',
after: 'After'
},
// Events and Callbacks
events: [], // Event array or callback function
dayClick: null, // Day click handler
eventClick: null, // Event click handler
changeState: null // State change handler
});Customize the calendar for different languages:
// Portuguese example
const calendar = new SimpleCalendarJs('#calendar', {
weekdays: ['Domingo', 'Segunda', 'Terça', 'Quarta', 'Quinta', 'Sexta', 'Sábado'],
months: ['Janeiro', 'Fevereiro', 'Março', 'Abril', 'Maio', 'Junho',
'Julho', 'Agosto', 'Setembro', 'Outubro', 'Novembro', 'Dezembro'],
showWeekdayChars: 3, // "Dom", "Seg", etc.
labels: {
month: 'Mês',
week: 'Semana',
day: 'Dia',
events: 'eventos',
event: 'evento'
}
});// Navigation
calendar.navigate('next'); // Navigate to next period
calendar.navigate('prev'); // Navigate to previous period
calendar.goToDate(new Date()); // Go to specific date
calendar.goToToday(); // Go to today
// View switching
calendar.setView('month'); // 'month', 'week', 'day'
calendar.setFulldayMode(true); // Toggle fullday mode// Event management
calendar.addEvent(event); // Add single event
calendar.removeEvent(eventId); // Remove event by ID
calendar.setEvents(eventsArray); // Replace all events
calendar.setEvents(callbackFunction); // Set dynamic event loading// Visual customization
calendar.setGridBorders('none'); // 'both', 'vertical', 'horizontal', 'none'
calendar.setEventBorders(true); // Enable/disable event borders
calendar.setEventBorderColor('#ff0000'); // Set event border color
calendar.setDefaultEventColor('#3498db'); // Set default event color
// UI element visibility
calendar.setShowMonthButton(true); // Show/hide month view button
calendar.setShowWeekButton(true); // Show/hide week view button
calendar.setShowDayButton(true); // Show/hide day view button
calendar.setShowNavigation(true); // Show/hide navigation buttons
// Memory management
calendar.destroy(); // Clean up observers and event listenersconst calendar = new SimpleCalendarJs('#calendar', {
// Dynamic event loading
events: function(dateRange) {
// Called with {startDate, endDate} for visible range
return fetchEventsFromAPI(dateRange.startDate, dateRange.endDate);
},
// Day click handler
dayClick: function(clickInfo, originalEvent) {
// clickInfo: {date, time}
console.log('Clicked on:', clickInfo.date, clickInfo.time);
},
// Event click handler
eventClick: function(event, clickInfo, originalEvent) {
// event: the clicked event object
console.log('Clicked event:', event.title);
},
// State change handler
changeState: function(state) {
// state: {view, date, fulldayMode, startHour, endHour, timeSlotMinutes}
console.log('Calendar state changed:', state);
}
});Customize colors with partial or complete theme overrides:
const calendar = new SimpleCalendarJs('#calendar', {
colors: {
// Light theme colors (partial override)
background: '#f0f8ff',
accent: '#ff6b6b',
todayBg: '#ffe4e1',
// Dark theme colors (optional)
dark: {
background: '#1a1a1a',
accent: '#ff8a80',
todayBg: '#2d1b1b'
}
}
});All CSS classes are prefixed with 'sc-' to prevent conflicts:
.sc-calendar /* Main container */
.sc-header /* Calendar header */
.sc-content /* Content area */
.sc-view-container /* View-specific container */
/* Views */
.sc-month-view /* Month view container */
.sc-week-view /* Week view container */
.sc-day-view /* Day view container */
/* Days and events */
.sc-day /* Individual day cell */
.sc-day-number /* Day number text */
.sc-today /* Today's date styling */
.sc-event-month /* Month view events */
.sc-event-week /* Week view events */
.sc-event-day /* Day view events */
/* Navigation */
.sc-nav /* Navigation buttons */
.sc-title /* Month/date title */
.sc-view-switcher /* View mode buttons */Override CSS variables for advanced customization:
.sc-calendar {
/* Theme colors */
--sc-bg-primary: #ffffff;
--sc-bg-secondary: #f8f9fa;
--sc-text-primary: #212529;
--sc-text-secondary: #6c757d;
--sc-accent-color: #4c6f94;
--sc-border-color: #e9ecef;
/* Event colors */
--sc-event-color: #4c6f94;
--sc-event-border-color: #6c757d;
}
/* Dark theme */
[data-theme="dark"] .sc-calendar {
--sc-bg-primary: #2d2d2d;
--sc-text-primary: #ffffff;
--sc-accent-color: #4a90e2;
}