我需要能够使用“列表” View 使用 FullCalendar 设置“日期范围”。按日期范围,我的意思是能够使用 2 个文本字段、2 个不同的日期输入,例如:
文本字段 1:2018-05-05
到
文本字段 2:2018-05-06
并过滤日历的内容,使用 ListView 显示结果,并显示匹配该日期范围的事件。
这是我的 FullCalendar 部分的代码:
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'listMonth, month,agendaWeek,agendaDay'
},
defaultView: 'listMonth',
locale: 'fr',
contentHeight: 600,
navLinks: true, // can click day/week names to navigate views
selectable: false,
eventRender: function(event, element, view) {
element.find('.fc-widget-header').append("<div style='color:#fff'>Conférencier choisi</div>");
element.find('.fc-title').append("<br/>" + event.lieu);
element.find('.fc-list-item-title').append("<br/>" + event.lieu);
element.find('.fc-list-item-title').append("<a href='" + event.lienconferencier + "'><div class='conferencier-calendrier-container'><div style='float:left;background-image:url(" + event.photoconferencier + ");width:40px;height:40px;background-size:cover;border-radius:100px;'></div><div style='float:left;padding-left:5px;font-weight:normal;'><strong>Conférencier</strong><br>" + event.conferencier + "</div></a>");
return ['all', event.status].indexOf($('#filter-status').val()) >= 0 &&
['all', event.client].indexOf($('#filter-contact').val()) >= 0 &&
['all', event.conferencier].indexOf($('#filter-conferencier').val()) >= 0 &&
['', event.numero].indexOf($('#numero').val()) >= 0;
},
selectHelper: true,
editable: false,
eventLimit: true, // allow "more" link when too many events
events: [
{
title: 'Example',
start: '2018-05-05',
end: '2018-05-06',
color: '#ff0000',
lieu: 'Montreal',
numero: '300445',
conferencier: 'John Doe',
photoconferencier: 'http://www.example.com/img/profile.jpg',
lienconferencier: 'http://www.example.com/profile/link.html',
url: 'http://www.google.com'
},
{
title: 'Example2',
start: '2018-05-08',
end: '2018-05-010',
color: '#ff0000',
lieu: 'New York',
numero: '300446',
conferencier: 'Steve Jobs',
photoconferencier: 'http://www.example.com/img/profile2.jpg',
lienconferencier: 'http://www.example.com/profile/link2.html',
url: 'http://www.apple.com'
},
],
});
这是我的文本字段代码:
<input type="text" placeholder="Date : From" id="start_date">
<input type="text" placeholder="Date : To" id="end_date">
我想我必须添加这样的内容:
$('#start_date').on('change', function () {
$('#calendar').fullCalendar('rerenderEvents');
});
$('#end_date').on('change', function () {
$('#calendar').fullCalendar('rerenderEvents');
});
但我不确定。另外,请记住还有其他过滤器。因此代码中的“eventRender”部分有一堆东西。所以我需要确保“dateRange”过滤器不会破坏其他过滤器。
我在 FullCalendar 的网站上读到了“visibleRange”,但我不明白如何根据在 2 个“日期范围”文本字段中输入的内容使其工作。我认为也禁用我设置的其他 View (仅在 ListView 中显示结果)是个好主意。
知道如何让它发挥作用吗?我有点迷路了。 非常感谢
编辑:
我试过这段代码:
$('#start_date').on('change', function () {
$('#calendar').fullCalendar('changeView', 'list', {
start: 2018-05-10,
end: 2018-05-30
});
});
这是有效的。基本上,它所做的是我在 ID 为“start_date”的文本字段中输入一个新日期(它使用日期选择器脚本,这就是我选择“on change”的原因),它将 View 更改为 ListView ,这很棒,并且只显示我输入的日期之间的事件。所以为了让它变得动态,我这样做了:
$('#start_date').on('change', function () {
var start_date = $('#start_date').val();
var end_date = $('#end_date').val();
$('#calendar').fullCalendar('changeView', 'list', {
start: start_date,
end: end_date
});
});
我有 2 个字段,“开始日期”和“结束日期”。 我认为在 FullCalendar 的 changeView 代码中设置“开始”和“结束”选项会在我每次选择新日期时自动更新,但它不起作用。事实上,它部分起作用。如果我先输入“end_date”,然后输入“start_date”,它将过滤并完美运行,显示正确的日期范围。但在那之后,我无法通过更改字段中的日期来将其更改为另一个 dateRange。 它的行为可能是因为我的函数是基于“#start_date”元素的“on change”。所以我必须先选择结束日期,以确保它使用“结束”选项中的内容过滤和更改 View 。
知道我做错了什么吗?
谢谢
编辑 2:
我尝试将功能从“更改”事件更改为“单击”,并添加一个“搜索”按钮。这里有2个问题。 1 - 它只工作一次。如果我进行搜索,然后更改日期,然后再次单击“#search-range”按钮,它不会执行任何操作。
2 - 当它工作时(页面加载后第一次),如果我选择从 5 月 1 日到 5 月 5 日,出于某些原因,它将显示从 5 月 1 日到 5 月 4 日的范围。这是我的代码:
$('#search-range').on('click', function () {
var start_date = $('#start_date').val();
var end_date = $('#end_date').val();
$('#calendar').fullCalendar('changeView', 'list', {
start: start_date,
end: end_date
});
});
有什么想法吗? 再次感谢
最佳答案
您可能正在寻找 validRange
option .
$('#start_date').on('change', function(){
$('#calendar').fullCalendar('option', 'validRange', {
// Don't worry if user didn't provide *any* inputs.
start: this.value,
end: $('#end_date').val()
});
});
$('#end_date').on('change', function(){
$('#calendar').fullCalendar('option', 'validRange', {
// Don't worry if user didn't provide *any* inputs.
start: $('#start_date').val(),
end: this.value
});
});
演示:https://jsfiddle.net/8wd7sxyv/
更新
2018-05-31
,则包括当天的事件——默认行为仅包括直到 2018-05-30
。listMonth
;否则,它是 listYear
。function filterByDateRange(start_date, end_date, format) {
var s = $.fullCalendar.moment(start_date),
e = $.fullCalendar.moment(end_date),
v = $('#calendar').fullCalendar('getView'),
a, b;
// Start date is invalid; set it to the start of the month.
if (! s.isValid()) {
b = e.isValid();
s = b ? e.clone() : $.fullCalendar.moment();
s.date(1);
$('#start_date').val(s.format(format));
a = true;
}
// End date is invalid; set it to the end of the month.
if (! e.isValid()) {
b = s.isValid();
e = b ? s.clone() : $.fullCalendar.moment();
e.date(e.daysInMonth());
$('#end_date').val(e.format(format));
a = true;
}
// Start date is after end date; set it to a day before the end date.
if (s.isAfter(e)) {
s = e.clone().add('-1', 'day');
$('#start_date').val(s.format(format));
// End date is before start date; set it to a day after the start date.
} else if (e.isBefore(s)) {
e = s.clone().add('1', 'day');
$('#end_date').val(e.format(format));
}
// Add 1 day so that `end_date` is inclusive.
e = e.isValid() ? e.add('1', 'day') : e;
$('#calendar').fullCalendar('option', 'validRange', {
start: s.isValid() ? s : null,
end: e.isValid() ? e : null
});
a = a || s.isSame(e, 'month');
// If months are different, switch to the year list.
if ('listYear' !== v.name && ! a) {
$('#calendar').fullCalendar('changeView', 'listYear');
// Otherwise, switch back to month list, if needed.
} else if ('listMonth' !== v.name) {
$('#calendar').fullCalendar('changeView', 'listMonth');
}
}
$('#start_date').on('change', function(){
filterByDateRange(this.value, $('#end_date').val(), 'YYYY-MM-DD');
});
$('#end_date').on('change', function(){
filterByDateRange($('#start_date').val(), this.value, 'YYYY-MM-DD');
});
关于javascript - 更改日期范围以在 FullCalendar 中显示事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50516787/