Documentation keyboard_arrow_right Schedule keyboard_arrow_right Time configuration

Time Configuration

Configure time grid intervals, working hours, and time restrictions.

Grid Interval

Set time slot intervals in minutes using grid:

<html>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@calendarjs/ce/dist/style.min.css" />
<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='schedule' style="height: 600px;"></div>

<script>
const { Schedule } = calendarjs;

Schedule(document.getElementById('schedule'), {
    type: 'week',
    grid: 30, // 30-minute intervals
    data: []
});
</script>
</html>

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

// 15-minute intervals (default)
Schedule(document.getElementById('schedule'), {
    grid: 15,
    data: []
});

// 30-minute intervals
Schedule(document.getElementById('schedule2'), {
    grid: 30,
    data: []
});

// 1-hour intervals
Schedule(document.getElementById('schedule3'), {
    grid: 60,
    data: []
});

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

export default function App() {
    return (
        <Schedule
            type="week"
            grid={30}
            data={[]}
            style={{ height: '500px' }}
        />
    );
}

<template>
    <Schedule
        type="week"
        :grid="30"
        :data="[]"
        style="height: 500px"
    />
</template>

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

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

Common Grid Values

Interval Minutes Use Case
15 min 15 Default, detailed scheduling
30 min 30 Standard appointments
60 min 60 Hourly blocks

Valid Time Range

Restrict available hours using validRange:

<html>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@calendarjs/ce/dist/style.min.css" />
<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='schedule' style="height: 600px;"></div>

<script>
const { Schedule } = calendarjs;

Schedule(document.getElementById('schedule'), {
    type: 'week',
    validRange: ['09:00', '18:00'], // 9 AM to 6 PM only
    data: []
});
</script>
</html>

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

// Business hours: 9 AM - 6 PM
Schedule(document.getElementById('schedule'), {
    validRange: ['09:00', '18:00'],
    data: []
});

// Extended hours: 8 AM - 10 PM
Schedule(document.getElementById('schedule2'), {
    validRange: ['08:00', '22:00'],
    data: []
});

// Morning only: 6 AM - 12 PM
Schedule(document.getElementById('schedule3'), {
    validRange: ['06:00', '12:00'],
    data: []
});

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

export default function App() {
    return (
        <Schedule
            type="week"
            validRange={['09:00', '18:00']}
            data={[]}
            style={{ height: '500px' }}
        />
    );
}

<template>
    <Schedule
        type="week"
        :validRange="['09:00', '18:00']"
        :data="[]"
        style="height: 500px"
    />
</template>

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

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

Read-Only Time Ranges

Block specific time periods using readOnlyRange:

Single Range

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

// Lunch break: 12 PM - 1 PM
Schedule(document.getElementById('schedule'), {
    readOnlyRange: ['12:00', '13:00'],
    data: []
});

Multiple Ranges

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

// Block before 9 AM and after 6 PM, plus lunch
Schedule(document.getElementById('schedule'), {
    readOnlyRange: [
        ['00:00', '09:00'], // Before work
        ['12:00', '13:00'], // Lunch
        ['18:00', '23:59']  // After work
    ],
    data: []
});

Combined Configuration

<html>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@calendarjs/ce/dist/style.min.css" />
<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='schedule' style="height: 600px;"></div>

<script>
const { Schedule } = calendarjs;

Schedule(document.getElementById('schedule'), {
    type: 'week',
    grid: 30,                        // 30-minute slots
    validRange: ['08:00', '20:00'],  // 8 AM to 8 PM
    readOnlyRange: [
        ['12:00', '13:00'],          // Lunch break
        ['17:00', '17:30']           // Afternoon break
    ],
    data: []
});
</script>
</html>

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

Schedule(document.getElementById('schedule'), {
    type: 'week',
    grid: 30,
    validRange: ['08:00', '20:00'],
    readOnlyRange: [
        ['12:00', '13:00'],
        ['17:00', '17:30']
    ],
    data: []
});

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

export default function App() {
    return (
        <Schedule
            type="week"
            grid={30}
            validRange={['08:00', '20:00']}
            readOnlyRange={[
                ['12:00', '13:00'],
                ['17:00', '17:30']
            ]}
            data={[]}
            style={{ height: '500px' }}
        />
    );
}

<template>
    <Schedule
        type="week"
        :grid="30"
        :validRange="['08:00', '20:00']"
        :readOnlyRange="readOnlyTimes"
        :data="[]"
        style="height: 500px"
    />
</template>

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

export default {
    components: { Schedule },
    data() {
        return {
            readOnlyTimes: [
                ['12:00', '13:00'],
                ['17:00', '17:30']
            ]
        };
    }
}
</script>

Programmatic Updates

Change time configuration at runtime:

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

const schedule = Schedule(document.getElementById('schedule'), {
    type: 'week',
    grid: 30,
    data: []
});

// Change grid interval
schedule.grid = 60;
schedule.render();

// Update valid range
schedule.setRange(['10:00', '16:00']);

// Update readonly range
schedule.setReadOnly([['12:00', '13:00']]);

Related

Edit this page on GitHub