gpt4 book ai didi

JQuery Multiple Month Calendar View(JQuery多月日历视图)

转载 作者:bug小助手 更新时间:2023-10-28 21:11:11 30 4
gpt4 key购买 nike



I'm looking for suggestions/recommendations for a JQuery/Javascript calendar that can display multiple months at once (ie. previous month, current month, next month) like so:
Image showing four calendars in a horizontal row with sequential months (Sept to Dec). Arrows on the right and left indicate the view can be scrolled. Some of the dates on each calendar have a border, or are coloured in different shades of blue.

我正在寻找一个JQuery/Java日历的建议/建议,可以一次显示几个月(即。上个月、本月、下个月)如下:



(The attached mockup shows a 4-month view, but I think we'll actually be doing a 3-month view).

(附件中的样机显示的是4个月的视图,但我认为我们实际上是在做3个月的视图)。



I DO NOT need a date picker. This is basically meant to display a user's schedule, with no ability to choose a specific month/year (beyond the side-scrolling). We'll pull events out of our database, hook them into the calendar somehow, and then on a day click/hover (or both), display additional information. Events will not be editable from this view - it is display only.

我不需要挑日期的人。这基本上是为了显示用户的日程安排,不能选择特定的月/年(除了侧滚动之外)。我们将从数据库中提取事件,以某种方式将它们挂钩到日历中,然后在某一天单击/悬停(或同时单击/悬停),显示附加信息。此视图中无法编辑事件-它仅供显示。



I've looked into general JQuery calendar plugins (Ion Calendar, CLNDR), but none seem to have the basic multiple-month functionality I need. Multi-lingual support (or the ability to add multi-lingual text) is also important to us. I was really hoping to find a ready-made plugin for this - can't be the first time someone's tried to do it!

我研究了通用的JQuery日历插件(离子日历,CLNDR),但似乎没有一个具备我所需要的基本的多月功能。多语言支持(或添加多语言文本的能力)对我们也很重要。我真的很希望找到一个现成的插件来做这件事--这不可能是第一次有人尝试这样做!



In case it's any use/help, we use ColdFusion and MSSQL Server. We've also got JQuery 1.9.1, JQueryUI 1.10.0 and Bootstrap 2.3.2.

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



Edit: I did look at the JQuery UI datepicker, but it won't work for the functionality I need. I can't see any way to attach data to a specific date, or to be able to style certain days differently than others. I think the primary issue w/ it is that it's a datepicker, not a display calendar.

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


更多回答

Why not use ... wait for it .... The jQuery UI DatePicker. It's multilingual, can show three months, and all the rest of the stuff you seem to want ?

为什么不用……等一等……JQuery UI日期选择器。它是多语种的,可以显示三个月,以及所有其他你似乎想要的东西?

Because I don't need a datepicker and it doesn't have the multi-month scrolling features I need.

因为我不需要DatePicker,它也没有我需要的几个月滚动功能。

Then I guess you have to roll your own.

那我想你得自己滚了。

Well since I'd prefer to not have to do that, I made a post asking for suggestions.

既然我不想这么做,我就发了一个帖子征求大家的意见。

It doesn't do the multiple month view, however given that you can't seem to find anything else, I'll suggest FullCalendar arshaw.com/fullcalendar. Its a very nice calendar system which does allow you to attach events to specific dates, etc. I don't believe it does multi-lingual support however so it may not help. Just offering what I can.

它不支持多个月的视图,但是,鉴于您似乎找不到其他任何内容,我建议您使用FullCalendar arshaw.com/fullCalendar。这是一个非常好的日历系统,允许你将事件附加到特定的日期,等等。我不相信它支持多语言,所以它可能没有帮助。我只是尽我所能。

优秀答案推荐

Like Sean said in the comments, the best option you have is probably FullCalendar. Although multi-month isn't supported out of the box, you might be able to achieve it by adding multiple calendars. Check out Issue #199, which describes a possible solution.

就像肖恩在评论中说的那样,你有的最好的选择可能是全日历。虽然开箱即用不支持多月制,但您可以通过添加多个日历来实现这一点。请看第199期,它描述了一个可能的解决方案。



Regarding the multi-lingual problem: although it isn't multi-lingual by itself, FullCalendar does support modifying the days, months, etc. See Text/Time Customization. You could use ColdFusion's MonthAsString and DayOfWeekAsString functions to make it multi-lingual yourself.

关于多语言问题:尽管FullCalendar本身不是多语言的,但它确实支持修改日期、月份等。请参阅文本/时间定制。您可以使用ColdFusion的MonthAsString和DayOfWeekAsString函数自己使其具有多语言功能。



Could be done with Fullcalendar library

可以使用全日历库来完成


<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>

更多回答

30 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com