JQuery 多月日历视图

Question

我正在寻找 JQuery/Javascript 日历的建议/推荐，它可以一次显示多个月份（即上个月、当月、下个月），如下所示：

（随附的模型显示了 4 个月的视图，但我认为我们实际上会做 3 个月的视图）。

我不需要日期选择器。这基本上是为了显示用户的日程安排，无法选择特定的月份/年份（除了横向滚动）。我们将从数据库中提取事件，以某种方式将它们挂接到日历中，然后在某一天单击/悬停（或两者），显示附加信息。无法从此视图中编辑事件 - 它仅用于显示。

我研究过通用的 JQuery 日历插件（Ion Calendar、CLNDR），但似乎没有一个具有我需要的基本多月功能。多语言支持（或添加多语言文本的能力）对我们也很重要。我真的希望为此找到一个现成的插件 - 这不可能是第一次有人尝试这样做！

如果有任何使用/帮助，我们使用 ColdFusion 和 MSSQL Server。我们还有 JQuery 1.9.1、JQueryUI 1.10.0 和 Bootstrap 2.3.2。

编辑：我确实查看了 JQuery UI 日期选择器，但它无法满足我需要的功能。我看不出有什么方法可以将数据附加到特定日期，或者能够以不同于其他日期的方式设置某些日期的样式。我认为主要问题是它是一个日期选择器，而不是显示日历。

Answer 1

就像 Sean 在评论中所说，你最好的选择可能是 FullCalendar。尽管不支持开箱即用的多月日历，但您也许可以通过添加多个日历来实现。查看Issue #199，它描述了一个可能的解决方案。

关于多语言问题：虽然FullCalendar本身不是多语言的，但它确实支持修改日期、月份等。参见文本/时间自定义。您可以使用 ColdFusion 的 MonthAsString 和 DayOfWeekAsString 函数自行使其成为多语言。

Answer 2

可以使用 Fullcalendar 库来完成

<script src="https://cdn.jsdelivr.net/npm/[email protected]/index.global.min.js"></script>

<script>
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
            initialDate: new Date('2023-11-01'),
            initialView: 'multiMonthThreeMonth',
            views: {
                multiMonthThreeMonth: {
                    type: 'multiMonth',
                    duration: { months: 3 }
                }
            },
        });
        calendar.render();
</script>