Blog · Gutenberg
Weekly Schedule block for WordPress
Visual weekly schedule grid with Mon–Sun columns and color-coded time-slot events. Ideal for fitness classes, teachers, and consultants.
Get Blockenberg
Free Gutenberg block in Blockenberg. The inspector controls and front-end behavior on this page come from this block’s source, not a shared stub.
What it actually does
Visual weekly schedule grid with Mon–Sun columns and color-coded time-slot events. Ideal for fitness classes, teachers, and consultants.
Inspector panels on this block: Schedule Settings, Events (' + a.events.length +. Those titles come from index.js, not from a shared template.
Behavior controls: “Time Format” options: 12-hour, 24-hour; “Start Minute” options: :00, :15, :30, :45; “Duration” options: 30 min, 45 min, 1 hr, 1.5 hr, 2 hr.
Where to find it
Gutenberg inserter → Blog → search “Weekly Schedule” (block name `blockenberg/week-schedule` in block.json). Style it in the sidebar after insert.
How to use Weekly Schedule block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Weekly Schedule”, insert it. Category: Blog.
- Configure inspector controls that exist on this block. Open Schedule Settings. Set “Schedule Settings — Title”, “Show Title”, “Start Hour”, “End Hour”.
- Check the published page. The view script reads HTML data attributes: data-opts, data-rendered. The block editor preview may not run the same view script.
Inspector controls from this block’s code
| Control | What the code does |
|---|---|
| Schedule Settings — Title | Text field in the inspector. block.json default: Class Schedule. Saved as `title`. |
| Show Title | On/off toggle in the inspector. On by default. Saved as `showTitle`. |
| Start Hour | Select control; the chosen value is saved on the block. block.json default: 8. Saved as `startHour`. |
| End Hour | Select control; the chosen value is saved on the block. block.json default: 20. Saved as `endHour`. |
| Cell Height (px/hr) | Numeric range control in the inspector. Range 40–120. block.json default: 60. Saved as `cellHeight`. |
| Time Format | Select control; the chosen value is saved on the block. Options: 12-hour; 24-hour. block.json default: 12h. Saved as `timeFormat`. |
| Show Weekend (Sat/Sun) | On/off toggle in the inspector. On by default. Saved as `showWeekend`. |
| Show Instructor | On/off toggle in the inspector. On by default. Saved as `showInstructor`. |
| Show Location | On/off toggle in the inspector. Off by default. Saved as `showLocation`. |
| Border Radius | Numeric range control in the inspector. Range 0–20. block.json default: 8. Saved as `borderRadius`. |
| Event Radius | Numeric range control in the inspector. Range 0–12. block.json default: 6. Saved as `eventRadius`. |
| Events (' + a.events.length + — Title | Text field in the inspector. Saved as `events`. |
| Day | Select control; the chosen value is saved on the block. Saved as `events`. |
| Start Hour (Events) | Select control; the chosen value is saved on the block. Saved as `events`. |
| Start Minute | Select control; the chosen value is saved on the block. Options: :00; :15; :30; :45. Saved as `events`. |
| Duration | Select control; the chosen value is saved on the block. Options: 30 min; 45 min; 1 hr; 1.5 hr; 2 hr; 2.5 hr; 3 hr. Saved as `events`. |
| Instructor | Text field in the inspector. Saved as `events`. |
| Location | Text field in the inspector. Saved as `events`. |
| Colors — Background | Color control in the inspector. block.json default: #ffffff. Saved as `bgColor`. |
| Header Background | Color control in the inspector. block.json default: #f8fafc. Saved as `headerBg`. |
| Header Text | Color control in the inspector. block.json default: #1e293b. Saved as `headerColor`. |
| Grid Lines | Color control in the inspector. block.json default: #f1f5f9. Saved as `gridColor`. |
| Colors — Border | Color control in the inspector. block.json default: #e2e8f0. Saved as `borderColor`. |
| Time Column Background | Color control in the inspector. block.json default: #f8fafc. Saved as `timeBg`. |
| Time Text | Color control in the inspector. block.json default: #64748b. Saved as `timeColor`. |
What the front-end script actually does
- The view script reads HTML data attributes: data-opts, data-rendered.
When this is the right block
- Visual weekly schedule grid with Mon–Sun columns and color-coded time-slot events. Ideal for fitness classes, teachers, and consultants — that is the job of Weekly Schedule, not a generic content block.
- Use it when you need the editor control labeled “Schedule Settings — Title”, which exists on this block’s inspector.
- It matches pages about schedule, timetable, calendar.
- Inserter grouping: posts, magazines, and editorial WordPress pages.
Notes from the implementation
viewScript: this folder’s frontend.js is enqueued on the front end for this block.
FAQ
How do I add the Weekly Schedule block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Weekly Schedule”. It sits under Blog. After insert, open Schedule Settings and set “Schedule Settings — Title”, “Show Title”, “Start Hour”, “End Hour”.
What makes Weekly Schedule different from other Blockenberg blocks?
Visual weekly schedule grid with Mon–Sun columns and color-coded time-slot events. Ideal for fitness classes, teachers, and consultants. Inspector labels on this block include “Schedule Settings — Title”, “Show Title”, “Start Hour”, “End Hour”.
Is the Weekly Schedule Gutenberg block free?
Yes. Weekly Schedule ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Weekly Schedule to match my theme?
Yes. Blockenberg’s shared typography and color panels apply here, plus any block-specific style controls listed on this page (panels: Schedule Settings, Events (' + a.events.length +).
Related blog blocks
Daily Schedule
A time-blocked daily schedule — share your ideal day, work routine, or time-management system with a visual timeline.
Link Roundup
Curated links collection — weekly/monthly digest with categories.
Meeting Recap
Structured meeting notes with attendees, agenda, decisions, action items, and next steps.
Article Header
Rich editorial-style article/blog post header with category badge, headline, subheadline, author meta bar, and optional hero image.
Article Series
Multi-part series navigator showing all articles with the current one highlighted and progress indicator.
Book Review
Rich book review block with cover image, star rating, details grid, pros & cons, and Schema.org Book + Review structured data for SEO.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Weekly Schedule from the Gutenberg inserter.