我怎样才能设置在白天区域的事件数量 [英] How can I set only the number of event in day area
问题描述
我是begginer并使用FullCalendar.js
我希望让日历日期只设置像下面图片一样的事件数量。
我使用了eventLimit选项。但是0值并没有超出我的预期。
即使我将eventLimit设置为1，无论我做什么，它都会显示事件名称。
我怎么不能设置在日间区域的事件数量？
您可以使用 eventRender 和 eventAfterAllRender 回调。
为了演示目的，我只做了显示计数的非常基本的样式，您可能想要做更多的事情。
在Javascript的某处添加一个函数来标记事件，以便稍后可以找到它们：
.css（'display '， '没有'）;
$ / code>
然后，将以下2个回调添加到您的Fullcalendar初始化代码中：
eventRender：function（event，element）{
//在渲染每个事件时，添加一个班级，所以你可以稍后找到它。
//同时添加css来隐藏它，因此不会显示。
//注意我使用了一个类，所以它在源代码中可见并且易于使用，但
//如果需要，可以使用数据属性。
flagEvent（event，element）; （event.end&& event.start.format（'YYYY-MM-DD'）！== event.end.format（'YYYY-MM-DD'））{
if
while（event.end> event.start）{
event.start.add（1，'day'）;
console.log（'flag'，event.start.format（'YYYY-MM-DD'））
flagEvent（event，element）;
}
}
}，
eventAfterAllRender：function（view）{
//在渲染完所有事件后，我们现在可以使用标识CSS
//我们为每个类添加的类来计算每天的总数。
//然后我们可以显示这个数字。
//遍历每个显示的日期，并获取Fullcalendar提供的数据日期属性
//。然后使用我们添加到每个事件
//的CSS类来计算当天的事件数量。如果有的话，在日单元格中添加一些
// html以显示计数。
$（'＃calendar .fc-day.fc-widget-content'）。each（function（i）{
var date = $（this）.data（'date' ），
count = $（'＃calendar a.fc-event.event-on-'+ date）.length;
if（count> 0）{
$（this） .html（'< div class =fc-event-count> +'+ count +'< div>）;
}
}）;
}，
I`m begginer and using FullCalendar.js
I want to make day of calendar set only the number of event like below image.
I used eventLimit option. But 0 value doesn`t work than I expected.
Even if I set eventLimit to 1, this shows event name no matter what I do.
How cant I set only the number of event in day area?
https://fullcalendar.io/docs/display/eventLimit/
<!DOCTYPE html>
<html lang="kr">
<head>
<meta charset="UTF-8">
<title>calendar</title>
<link rel='stylesheet' href='./js/jquery/fullcalendar.css' />
<style>
.fc-sat {
background-color: blue;
}
.fc-sun {
background-color: red;
}
</style>
<script src="./js/jquery/jquery-3.2.1.min.js"></script>
<script src='./js/jquery/moment.min.js'></script>
<script src='./js/jquery/fullcalendar.js'></script>
<script src='./js/jquery/ko.js'></script>
<script>
$(document).ready(function() {
// page is now ready, initialize the calendar...
$('#calendar').fullCalendar({
// put your options and callbacks here
locale: 'ko',
header : {
left: '',
center: 'prev title next',
right: 'today'
},
eventLimit: 1, // for all non-agenda views
eventLimitText: "더보기",
theme: false, // using jquery-ui theme, default: false
events: [{
title: 'All Day Event',
start: '2017-08-01'
}, {
title: 'Long Event',
start: '2017-08-07',
end: '2017-08-10'
}, {
// id: 999,
title: 'Repeating Event',
start: '2017-08-09T16:00:00'
}, {
// id: 999,
title: 'Repeating Event',
start: '2017-08-16'
}, {
title: 'Meeting',
start: '2017-08-12T10:30:00',
end: '2017-08-12T12:30:00'
}, {
title: 'Lunch',
start: '2017-08-12T12:00:00'
}, {
title: 'Birthday Party',
start: '2017-08-13T07:00:00'
}, {
title: 'Click for Google',
url: 'http://google.com/',
start: '2017-08-28'
}, {
title: 'Click for Google',
url: 'http://google.com/',
start: '2017-08-28'
}, {
title: 'Click for Google',
url: 'http://google.com/',
start: '2017-08-28'
}, {
title: 'Click for Google',
url: 'http://google.com/',
start: '2017-08-28'
}, {
title: 'Click for Google',
url: 'http://google.com/',
start: '2017-08-28'
}, {
title: 'Click for Google',
url: 'http://google.com/',
start: '2017-08-28'
}, {
title: 'Click for Google',
url: 'http://google.com/',
start: '2017-08-28'
}]
})
});
</script>
</head>
<body>
<div id="content" style="width : 900px;">
<div id="calendar" />
</div>
</body>
</html>
You can do this using the eventRender and eventAfterAllRender callbacks.
I've only done very basic styling of the displayed counts for demonstration purposes, you will probably want to do more.
Somewhere in your Javascript add a function to tag your events so we can find them later:
function flagEvent(event, element) {
element.addClass('event-on-' + event.start.format('YYYY-MM-DD'))
.css('display', 'none');
}
Then, add the following 2 callbacks to your Fullcalendar init code:
eventRender: function(event, element) {
// When rendering each event, add a class to it, so you can find it later.
// Also add css to hide it so it is not displayed.
// Note I used a class, so it is visible in source and easy to work with, but
// you can use data attributes instead if you want.
flagEvent(event, element);
if (event.end && event.start.format('YYYY-MM-DD') !== event.end.format('YYYY-MM-DD')) {
while (event.end > event.start) {
event.start.add(1, 'day');
console.log('flag', event.start.format('YYYY-MM-DD'))
flagEvent(event, element);
}
}
},
eventAfterAllRender: function (view) {
// After all events have been rendered, we can now use the identifying CSS
// classes we added to each one to count the total number on each day.
// Then we can display that count.
// Iterate over each displayed day, and get its data-date attribute
// that Fullcalendar provides. Then use the CSS class we added to each event
// to count the number of events on that day. If there are some, add some
// html to the day cell to show the count.
$('#calendar .fc-day.fc-widget-content').each(function(i) {
var date = $(this).data('date'),
count = $('#calendar a.fc-event.event-on-' + date).length;
if (count > 0) {
$(this).html('<div class="fc-event-count">+' + count + '<div>');
}
});
},
这篇关于我怎样才能设置在白天区域的事件数量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
