FullCalendar v4日期对比问题：JS变量与Django模板日期如何有效对比

这个问题的核心在于服务器端渲染的Django模板代码和客户端运行的JavaScript代码不在同一个执行上下文：你在模板里写的{% if ... %}逻辑是在服务器渲染页面时执行的，而today_a是浏览器加载页面后才生成的客户端JS变量，服务器根本看不到这个变量，自然没法做对比——这就是为什么换成静态字符串（服务器能直接解析）就生效，用JS变量就不行。

下面给你两种可行的解决方案：

方案1：在服务器端生成当日日期，传入模板对比 #

既然模板逻辑是服务器端执行的，那我们直接在Django视图里获取当日日期，把它作为上下文变量传给模板，这样就能直接在模板里和sub_event.start_date做对比。

步骤： #

1. 修改你的视图函数，添加当日日期变量：

from datetime import date

def your_view(request):
    # 其他业务逻辑...
    today = date.today()  # 获取服务器端的当日日期
    return render(request, 'your_template.html', {
        'main_events': main_events,
        'today': today  # 把日期变量传到模板
    })

2. 在模板里直接使用这个服务器端的today变量做对比：

events: [
  {% for event in main_events %}
  {
    color: {% if event.start_date|date:"Y-m-d" < today|date:"Y-m-d" %}'green'{% else %}'SkyBlue'{% endif %},
    // 补充其他必要的事件属性，比如title、start等
  },
  {% endfor %}
]

方案2：在客户端JS中处理事件颜色逻辑 #

如果不想依赖服务器端的日期（比如要严格使用用户本地浏览器的日期），可以利用FullCalendar的eventRender回调函数，在事件渲染到日历上时，用JS动态对比日期并设置颜色。

代码示例： #

document.addEventListener('DOMContentLoaded', function() {
  var calendarEl = document.getElementById('calendar');
  var today_a = new Date().toISOString().slice(0, 10); // 客户端本地当日日期

  var calendar = new FullCalendar.Calendar(calendarEl, {
    // 其他日历基础配置...
    events: [
      {% for event in main_events %}
      {
        title: "{{ event.title }}",
        start: "{{ event.start_date|date:'c' }}", // 转成ISO格式方便JS日期处理
        // 这里先不设置color，留到eventRender里动态处理
      },
      {% endfor %}
    ],
    eventRender: function(info) {
      // 把事件的start日期转成YYYY-MM-DD格式
      var eventStart = info.event.start.toISOString().slice(0, 10);
      // 对比日期并设置颜色
      if (eventStart < today_a) {
        info.el.style.backgroundColor = 'green';
      } else {
        info.el.style.backgroundColor = 'SkyBlue';
      }
    }
  });

  calendar.render();
});

两种方案各有优势：方案1更简单直接，适合依赖服务器统一时间的场景；方案2更灵活，能贴合用户本地时间，也符合前端逻辑前端处理的原则，你可以根据自己的需求选择~

内容的提问来源于stack exchange，提问作者Zaraki Kenpachi