CalendoPro

Scheduler Calendar

Week view with time slots – click & drag to create events

📋 How to Use

Click on any time slot to create a 1-hour event
Click and drag vertically to create longer events
Click on an event to view or delete it
Use navigation arrows to change weeks

Configuration

Slot Duration

Working Hours Start

Working Hours End

Theme

Scheduled Events

No events yet. Click on the calendar to add events.

Usage Example

// Initialize Scheduler Calendar
const scheduler = new CalendoPro.Scheduler('#my-scheduler', {
    theme: 'light',
    slotDuration: 30, // minutes
    workingHours: {
        start: 9,  // 9 AM
        end: 18    // 6 PM
    },
    events: [
        {
            id: '1',
            title: 'Team Meeting',
            date: '2025-01-15',
            startTime: '10:00',
            endTime: '11:30',
            color: '#6366f1'
        }
    ],
    onEventCreate: (event) => {
        console.log('New event:', event);
    },
    onEventClick: (event) => {
        console.log('Clicked:', event);
    }
});

// Add event programmatically
scheduler.addEvent({
    title: 'New Meeting',
    date: '2025-01-16',
    startTime: '14:00',
    endTime: '15:00',
    color: '#10b981'
});

// Get all events
const events = scheduler.getEvents();
            

📊

Week View

Full week overview with time slots for easy scheduling.

👆

Click to Create

Simply click on any time slot to create a new event.

⏰

Flexible Slots

Configure 15, 30, or 60 minute time slot intervals.

🎨

Color Coded

Events displayed with custom colors for easy identification.