在日历中的特定日期显示背景颜色的问题，在除移动 Safari 之外的所有浏览器上都可以正常工作

Posted 2023-05-08

【中文标题】在日历中的特定日期显示背景颜色的问题，在除移动 Safari 之外的所有浏览器上都可以正常工作

【英文标题】：Issue in showing background color to specific days in calendar, working fine on all browsers except mobile Safari

【发布时间】：2020-03-17 07:13:22

【问题描述】：

我正在尝试在日历上获得功能，如果事件类型是 this 并且预订了一天，则将该特定日期的背景标记为红色。它适用于 Mac 上的其他浏览器和 Safari，但不适用于移动 Safari。

if (this.booked.some(a => new Date(a.date.getFullYear(),a.date.getMonth(),a.date.getDate()).toDateString() == day.date.toDateString()&& a.type==1) )

    day.el.classList.add('booked_event')
   //day.el.innerText = 'Booked'

这是 CSS：

.booked_event 
    background-color: rgba(223,6,167,0.3) !important;

我已经尝试使用十六进制代码将不透明度放在单独的行上，只尝试了rgb 而不是rgba，但它仍然不适合我。有人可以帮忙吗？

【参考方案1】：

您可以尝试以下方法，它应该适用于所有浏览器：

.booked_event
        background-color: rgb(223,6,167) !important; //  background for old browsers
        background-color: rgba(223,6,167,0.3) !important;  //Modern Browser, Will be ignored by old browsers

    

【讨论】：

请检查是否没有其他 CSS 覆盖它，以防仍然无法正常工作，请使用 safari CSS hack：css-tricks.com/forums/topic/…

这里是运行良好的 android 视图的屏幕截图 [link]snipboard.io/V9nlsS.jpg@Mayank

我已经用一些不同的 JS 和 CSS 检查了它，我注意到了，它只适用于 Chrome，但不适用于其他浏览器 @Mayank