Weekly Mode

Create a recurring weekly schedule template where events repeat every week on specific weekdays, without specific dates.

Basic Weekly Schedule

Use weekly: true to create a template schedule:

<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;

const weeklyEvents = [
    {
        guid: '1',
        title: 'Team Standup',
        weekday: 1, // Monday
        start: '09:00',
        end: '09:30',
        color: '#3498db'
    },
    {
        guid: '2',
        title: 'Client Meetings',
        weekday: 3, // Wednesday
        start: '14:00',
        end: '16:00',
        color: '#e74c3c'
    },
    {
        guid: '3',
        title: 'Sprint Review',
        weekday: 5, // Friday
        start: '15:00',
        end: '16:00',
        color: '#2ecc71'
    }
];

Schedule(document.getElementById('schedule'), {
    type: 'weekdays',
    weekly: true,
    data: weeklyEvents
});
</script>
</html>

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

const weeklyEvents = [
    {
        guid: '1',
        title: 'Team Standup',
        weekday: 1, // Monday
        start: '09:00',
        end: '09:30',
        color: '#3498db'
    },
    {
        guid: '2',
        title: 'Office Hours',
        weekday: 2, // Tuesday
        start: '10:00',
        end: '12:00',
        color: '#e74c3c'
    }
];

Schedule(document.getElementById('schedule'), {
    type: 'weekdays',
    weekly: true,
    data: weeklyEvents
});

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

export default function App() {
    const [events] = useState([
        {
            guid: '1',
            title: 'Team Standup',
            weekday: 1,
            start: '09:00',
            end: '09:30',
            color: '#3498db'
        },
        {
            guid: '2',
            title: 'Office Hours',
            weekday: 2,
            start: '10:00',
            end: '12:00',
            color: '#e74c3c'
        }
    ]);

    return (
        <Schedule
            type="weekdays"
            weekly={true}
            data={events}
            style={{ height: '500px' }}
        />
    );
}

<template>
    <Schedule
        type="weekdays"
        :weekly="true"
        :data="events"
        style="height: 500px"
    />
</template>

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

export default {
    components: { Schedule },
    data() {
        return {
            events: [
                {
                    guid: '1',
                    title: 'Team Standup',
                    weekday: 1,
                    start: '09:00',
                    end: '09:30',
                    color: '#3498db'
                },
                {
                    guid: '2',
                    title: 'Office Hours',
                    weekday: 2,
                    start: '10:00',
                    end: '12:00',
                    color: '#e74c3c'
                }
            ]
        };
    }
}
</script>

Visible Time Range

Use validRange to limit the visible hours. This example shows only business hours (7:00 - 18:00):

<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: 'weekdays',
    weekly: true,
    validRange: ['07:00', '18:00'],
    data: [
        { guid: '1', title: 'Morning Meeting', weekday: 1, start: '08:00', end: '09:00', color: '#3498db' },
        { guid: '2', title: 'Lunch Break', weekday: 1, start: '12:00', end: '13:00', color: '#95a5a6' },
        { guid: '3', title: 'Project Work', weekday: 2, start: '09:00', end: '12:00', color: '#2ecc71' }
    ]
});
</script>
</html>

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

Schedule(document.getElementById('schedule'), {
    type: 'weekdays',
    weekly: true,
    validRange: ['07:00', '18:00'],
    data: [
        { guid: '1', title: 'Morning Meeting', weekday: 1, start: '08:00', end: '09:00', color: '#3498db' },
        { guid: '2', title: 'Project Work', weekday: 2, start: '09:00', end: '12:00', color: '#2ecc71' }
    ]
});

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

export default function App() {
    const [events] = useState([
        { guid: '1', title: 'Morning Meeting', weekday: 1, start: '08:00', end: '09:00', color: '#3498db' },
        { guid: '2', title: 'Project Work', weekday: 2, start: '09:00', end: '12:00', color: '#2ecc71' }
    ]);

    return (
        <Schedule
            type="weekdays"
            weekly={true}
            validRange={['07:00', '18:00']}
            data={events}
            style={{ height: '500px' }}
        />
    );
}

<template>
    <Schedule
        type="weekdays"
        :weekly="true"
        :validRange="['07:00', '18:00']"
        :data="events"
        style="height: 500px"
    />
</template>

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

export default {
    components: { Schedule },
    data() {
        return {
            events: [
                { guid: '1', title: 'Morning Meeting', weekday: 1, start: '08:00', end: '09:00', color: '#3498db' },
                { guid: '2', title: 'Project Work', weekday: 2, start: '09:00', end: '12:00', color: '#2ecc71' }
            ]
        };
    }
}
</script>

Weekday Values

Day	Value
Sunday	`0`
Monday	`1`
Tuesday	`2`
Wednesday	`3`
Thursday	`4`
Friday	`5`
Saturday	`6`

Weekly vs Regular Mode

Weekly Mode (weekly: true):

Uses weekday property (0-6)
No specific dates
Events repeat every week
Perfect for templates and recurring schedules

Regular Mode (weekly: false):

Uses date property (YYYY-MM-DD)
Specific calendar dates
One-time or irregular events

Use Cases

Class schedules (schools, universities)
Office hours templates
Recurring meeting schedules
Business hours
Shift templates
Workout routines
Meal planning

Schedule Documentation - Main schedule docs
Time Configuration - Configure hours and intervals
API Reference - Complete API

Edit this page on GitHub