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>');
}
});
},
I fixed this code a litte. because if I add below value, this code does not work properly
{
title: 'Dummy',
url: 'http://google.com/',
start: '2017-09-04',
end: '2017-09-25'
}
so I do like this,
<!DOCTYPE html>
<html lang="kr">
<head>
<meta charset="UTF-8">
<title>calendar</title>
<link rel='stylesheet' href='./css/fullcalendar/fullcalendar.css' />
<style>
.fc-sat {
background-color: blue;
}
.fc-sun {
background-color: red;
}
.fc-event-count {
color: green;
font-size: large;
}
.fc-event-container {
display : none;
}
</style>
<script src="./js/jquery/jquery-3.2.1.min.js"></script>
<script src='./js/fullcalendar/moment.min.js'></script>
<script src='./js/fullcalendar/fullcalendar.js'></script>
<script src='./js/fullcalendar/ko.js'></script>
<script>
$(document).ready(function() {
// page is now ready, initialize the calendar...
function flagEvent(event, element) {
element.addClass('event-on-' + event.start.format('YYYY-MM-DD'))
.css('display', 'none');
}
$('#calendar').fullCalendar({
// put your options and callbacks here
header: {
left: '',
center: 'prev title next',
right: 'today'
},
eventLimit: false,
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.
console.log('flag', event.start.format('YYYY-MM-DD'))
console.log(event.start.format('YYYY-MM-DD'));
if (event.end) {console.log(event.end.format('YYYY-MM-DD'))};
if (event.end && event.start.format('YYYY-MM-DD') !== event.end.format('YYYY-MM-DD')) {
while (event.end >= event.start) {
console.log('flag', event.start.format('YYYY-MM-DD'))
flagEvent(event, element);
event.start.add(1, 'day');
}
} else {
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');
var count = $('#calendar a.fc-event.event-on-' + date).length;
if (count > 0) {
$(this).html('<div class="fc-event-count">+' + count + '<div>');
}
});
},
events: [ {
title: 'Click for Google',
url: 'http://google.com/',
start: '2017-09-01'
}, {
title: 'Click for Google',
url: 'http://google.com/',
start: '2017-09-19'
}, {
title: 'Dummy',
url: 'http://google.com/',
start: '2017-09-04',
end: '2017-09-15'
},{
title: 'Dummy',
url: 'http://google.com/',
start: '2017-09-08',
end: '2017-09-09'
}]
})
});
</script>
</head>
<body>
<div id="content" style="width : 900px;">
<div id="calendar" />
</div>
</body>
</html>
来源：https://stackoverflow.com/questions/45952031/how-can-i-set-only-the-number-of-event-in-day-area