我如何更改node.js ejs中单日日历的样式

问题描述 投票:0回答:1

我想在日历中将某些日子加粗, 假设我希望该月的 10 号和 15 号是粗体

dateTitle.datepicker({
    beforeShowDay: function(date) {
        return [true, "custom-day"];
    }});

但没有任何反应,它没有向 td 添加类。

我试图找到我自己的td, 但我不知道如何运行我的函数,在显示日历后, 日历表大多数时候不可见,仅在单击时可见

请帮忙

谢谢

css node.js calendar
1个回答
0
投票

要更改使用 EJS 和 Node.js 的日历中特定日期的样式,请执行以下步骤:

  • 将您需要的特殊日期(例如您需要的特殊月份的 8 号或 10 号以及 15 号或 19 号)从 Node.js 传递到 EJS 模板。
  • 在 EJS 模板中,迭代日历中的日期,看看每一天是否是您需要的特殊日期之一。
  • 如果某一天对应于特殊日期,请对其应用自定义 CSS 类。否则,使用默认类。

这是 Node.js 示例代码:

const express = require('express');
const app = express();
const port = 3000;

// Special dates
const specialDates = [10, 15];

app.get('/', (req, res) => {
  res.render('calendar', { specialDates });
});

app.listen(port, () => {
  console.log(`Server is running on port ${port}`);
});

这是模板EJS示例代码:

<!DOCTYPE html>
<html>
<head>
  <title>Calendar Example</title>
  <!-- Include necessary CSS and JS libraries for your calendar here -->
  <style>
    /* Define your custom styles for special days */
    .special-day {
      font-weight: bold;
      color: red;
    }
  </style>
</head>
<body>
  <div id="calendar">
    <table>
      <tr>
        <th>Sun</th>
        <th>Mon</th>
        <th>Tue</th>
        <th>Wed</th>
        <th>Thu</th>
        <th>Fri</th>
        <th>Sat</th>
      </tr>
      <tr>
        <% for (let day = 1; day <= 31; day++) { %>
          <td class="<%= specialDates.includes(day) ? 'special-day' : '' %>"><%= day %></td>
          <% if (day % 7 === 0) { %>
            </tr><tr>
          <% } %>
        <% } %>
      </tr>
    </table>
  </div>

  <!-- Include necessary JavaScript for your calendar here -->
</body>
</html>

我们需要将我们创建的specialDates数组传输到EJS模板中,其中包含与我们需要的日期对应的数字(例如14或15或10或19)。 在 EJS 模板中,我们使用 for 循环迭代这些天。我们使用specialDates.includes(day) 条件来检查当前日期是否是我们需要的日期之一。如果这就是我们需要的日期,我们将“特殊日期”类应用于该元素;否则,我们不会申请额外的课程。 我的意思是您可以在该部分中自定义“特殊日子”类来定义特殊日子应该如何出现。在此示例中,我们将文本设为粗体和红色(我决定的随机颜色)。 不要忘记包含日记外观和功能所需的所有 CSS 和 JavaScript 库。 这应该允许您根据需要格式化日历中的特定日期。根据您特定的日历应用程序和风格偏好调整代码。

© www.soinside.com 2019 - 2024. All rights reserved.