基于jQuery fullCalendar实现按星期几显示价格并保留预订事件

当然可以实现啦！这在FullCalendar里是个挺常见的自定义需求，我给你详细说说具体怎么弄，保证价格和预订事件能完美共存~

核心思路 #

利用FullCalendar的dayRender（或v3版本的同名回调）钩子，在每个日期单元格渲染完成后，插入对应星期的固定价格元素；同时保持原有事件的加载逻辑不变，这样就能同时展示价格和用户预订的事件了。

1. 定义星期与价格的映射关系 #

首先先把每周各天的价格整理成一个对象，方便后续调用：

// 0=周日，1=周一，以此类推到6=周六
const dayPriceMap = {
  0: '$700',
  1: '$600',
  2: '$700',
  3: '$600', // 可根据你的实际需求补充/修改
  4: '$600',
  5: '$700',
  6: '$700'
};

2. 配置FullCalendar的dayRender回调 #

根据你使用的FullCalendar版本，选择对应的写法：

版本v4/v5+（推荐）

document.addEventListener('DOMContentLoaded', function() {
  const calendarEl = document.getElementById('calendar');
  
  const calendar = new FullCalendar.Calendar(calendarEl, {
    initialView: 'timeGridWeek', // 换成你需要的视图，比如dayGridMonth
    events: '/your-events-api', // 这里填你的预订事件数据源地址
    dayRender: function(info) {
      // 获取当前日期的星期数
      const dayOfWeek = info.date.getDay();
      // 创建价格显示元素
      const priceElement = document.createElement('div');
      priceElement.className = 'calendar-day-price';
      priceElement.textContent = dayPriceMap[dayOfWeek];
      // 将价格元素添加到单元格中
      info.dayEl.appendChild(priceElement);
    }
  });

  calendar.render();
});

版本v3（旧版兼容）

$(document).ready(function() {
  $('#calendar').fullCalendar({
    defaultView: 'agendaWeek',
    events: '/your-events-api',
    dayRender: function(date, cell) {
      // v3中date是moment对象，用day()获取星期数
      const dayOfWeek = date.day();
      const price = dayPriceMap[dayOfWeek];
      // 插入价格元素
      cell.append('<div class="calendar-day-price">' + price + '</div>');
    }
  });
});

3. 添加CSS样式调整展示位置 #

为了让价格不遮挡预订事件，我们可以给价格元素设置定位，放在单元格的角落：

.calendar-day-price {
  position: absolute;
  top: 4px;
  right: 4px;
  font-weight: 600;
  color: #2d3748;
  background-color: rgba(255, 255, 255, 0.9);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 14px;
}

/* 如果是月视图，可调整字体大小适配单元格 */
.fc-dayGridMonth-view .calendar-day-price {
  font-size: 12px;
}

效果说明 #

这样配置后，每个日期单元格会根据对应的星期显示固定价格，而用户的预订事件会正常渲染在单元格内，不会被价格元素遮挡——价格会固定在单元格的角落，和事件内容互不干扰，完全符合你的需求~

内容的提问来源于stack exchange，提问作者Ghada Rahhal