A free Carrd calendar plugin to show events and activities. Read-only, not for booking. Tutorial here →
This tutorial will walk you through how to personalize your calendar plugin code, even if you're new to programming.——————————1. How to Add an Event
Events are stored in a "list" (called an Array) at the top of the <script> section.The Code Structure
Look for const SCHEDULED_EVENTS = [ ... ]. Each event is wrapped in curly braces {}. To add a new one, copy an existing block and change the values.What the Attributes Mean
* name: The title displayed on the calendar.
* description: Extra details shown inside the popup modal.
* location: A physical address or a URL (links become clickable automatically).
* date: Use the format "YYYY-MM-DD".
* timeStart / timeEnd: The window of time for the event.
* color: A "Hex Code" (e.g., #ff0000 for red) that determines the event's theme.
* repeat: Can be set to "none", "daily", "weekly", "monthly", or "yearly".Example of adding a new event:{——————————2. How to Edit the Background Color
name: "Pizza Night",
description: "Eating pepperoni pizza with the team!",
location: "Tony's Pizza Shop",
date: "2026-04-10",
timeStart: "18:00",
timeEnd: "20:00",
color: "#e74c3c", // Red color
repeat: "none"
},
The background colors are controlled in the <style> section at the top of the file using CSS.Whole Page Background: Look for the body selector.body {Calendar Background: Look for the
background-color: #f4f7f6; /* Change this hex code to your liking */
}
.calendar-container selector..calendar-container {——————————3. How to Edit the Fonts
background: #ffffff; /* Change this to make the calendar itself a different color */
}
The app uses a "font stack" that tries to use the cleanest font available on your computer.Changing the Font Family
Find the :root or the .calendar-container section. Look for font-family.
* To go "Classic": Change it to 'Georgia', serif;
* To go "Modern": Change it to 'Montserrat', sans-serif;Changing Font Sizes
Look for these specific classes in the CSS:
* .current-view-label: Changes the "Month Year" size.
* .sidebar-day-num: Changes the size of the numbers in List View.
* .grid-day-num: Changes the size of the numbers in Grid View.——————————4. How to Edit the Width and Height
You can control the size of the calendar by modifying the .calendar-container and the .events-list.Changing the Width
In the CSS, find .calendar-container. The max-width determines how wide it gets on large screens.
.calendar-container {Changing the Height
max-width: 1200px; /* Increase this to make the calendar wider */
}
The height of the calendar is "dynamic" (it grows based on content), but the scrollable area is controlled here:List View Height: Find .events-list and change max-height..events-list {Grid View Height: In Grid View, the height is determined by the min-height of the cells. Find
max-height: 80vh; /* 'vh' means view-height. 100vh is the full screen. */
}
.grid-cell:.grid-cell {——————————💡 Pro-Tip: Finding Colors
min-height: 150px; /* Increase this to make the calendar rows taller */
}
If you don't know "Hex Codes" (like #007bff), simply search Google for "Color Picker". You can slide the bar to find a color you like and copy the code starting with the # symbol!