Skip to content

Weekly Mode

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

Basic Weekly Schedule

Section titled “Basic Weekly Schedule”

Use weekly={true} to create a template schedule:

import { useState } from 'react';
import { Schedule } from '@calendarjs/react';

export default function App() {
    const [events] = useState([
        {
            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'
        }
    ]);

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

Visible Time Range

Section titled “Visible Time Range”

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

import { useState } from 'react';
import { Schedule } from '@calendarjs/react';

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' }}
        />
    );
}

Weekday Values

Section titled “Weekday Values”
DayValue
Sunday0
Monday1
Tuesday2
Wednesday3
Thursday4
Friday5
Saturday6

Weekly vs Regular Mode

Section titled “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

Section titled “Use Cases”
  • Class schedules (schools, universities)
  • Office hours templates
  • Recurring meeting schedules
  • Business hours
  • Shift templates
  • Workout routines
  • Meal planning
Section titled “Related”