Squarespace日历：能否通过自定义CSS按标题设置事件日期颜色？

当然可以通过自定义CSS实现这个需求，以下是具体步骤和代码：

核心CSS代码 #

直接通过事件标题的文本内容关联其父级日期方块，设置专属颜色：

/* 为标题含"Available"的事件对应的日期方块设置背景色 */
.sqs-block-calendar-date:has(.sqs-event-title:contains("Available")) {
  background-color: #4CAF50 !important; /* 替换为你需要的颜色值 */
  color: #ffffff !important; /* 日期文字颜色，按需调整 */
  border-radius: 4px; /* 可选：给日期方块加圆角，更美观 */
}

如果上述代码因浏览器兼容性问题不生效，可以尝试更精准的层级选择器（结合日历区块的类）：

.sqs-block-calendar .sqs-block-calendar-date:has(.sqs-event-title:contains("Available")) {
  background-color: #4CAF50 !important;
  color: #ffffff !important;
}

代码使用步骤 #

1. 进入Squarespace网站编辑器
2. 点击左侧菜单栏的「设置」→「高级」→「自定义CSS」
3. 将上述代码粘贴到CSS编辑框中，保存后刷新页面即可生效

关于区块ID方法失效的原因 #

你之前用区块ID的代码没生效，大概率是以下几种情况：

• Squarespace的区块ID是动态生成的，每次编辑保存后可能会变化，导致旧ID失效
• 选择器层级不够，没有覆盖Squarespace默认的日历样式（需要加!important强制优先级）
• 复制区块ID时遗漏了#前缀（正确写法应为#block-id-xxxx）

内容的提问来源于stack exchange，提问作者Jennifer Glenn