fullcalendar에 더 많은 텍스트 표시
이벤트에서 더 많은 정보를 표시 할 수있는 솔루션을 찾고 있습니다.
예를 들어 DayView에서 06:00부터 10:00까지의 이벤트를 볼 수 있습니다.
이 이벤트에 추가 설명을 표시하고 싶습니다 (시간과 제목뿐 아니라).
저는 개인적으로 툴팁을 사용하여 추가 정보를 표시하므로 누군가 이벤트 위로 마우스를 가져 가면 더 긴 설명을 볼 수 있습니다. 이 예제에서는 qTip을 사용 하지만 모든 도구 설명 구현이 작동합니다.
$(document).ready(function() {
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
$('#calendar').fullCalendar({
header: {
left: 'prev, next today',
center: 'title',
right: 'month, basicWeek, basicDay'
},
//events: "Calendar.asmx/EventList",
//defaultView: 'dayView',
events: [
{
title: 'All Day Event',
start: new Date(y, m, 1),
description: 'long description',
id: 1
},
{
title: 'Long Event',
start: new Date(y, m, d - 5),
end: new Date(y, m, 1),
description: 'long description3',
id: 2
}],
eventRender: function(event, element) {
element.qtip({
content: event.description + '<br />' + event.start,
style: {
background: 'black',
color: '#FFFFFF'
},
position: {
corner: {
target: 'center',
tooltip: 'bottomMiddle'
}
}
});
}
});
});
이 코드가 도움이 될 수 있습니다.
$(document).ready(function() {
$('#calendar').fullCalendar({
events:
[
{
id: 1,
title: First Event',
start: .......,
end: .....,
description: 'first description'
},
{
id: 2,
title: 'Second Event',
start: .......,
end: .....,
description: 'second description'
}
],
eventRender: function(event, element) {
element.find('.fc-title').append("<br/>" + event.description);
}
});
}
한 줄을 수정하면 fullcalendar.js 스크립트를 변경하여 줄 바꿈을 허용하고 동일한 줄에 여러 정보를 넣을 수 있습니다.
~ 3922 행의 FullCalendar.js에서 htmlEscape (s) 함수를 찾아 끝에 .replace (/ <br \ s? /?> / g, '
')를 추가합니다.
function htmlEscape(s) {
return s.replace(/&/g, '&')
.replace(/</g, '<')
.replace(/>/g, '>')
.replace(/'/g, ''')
.replace(/"/g, '"')
.replace(/\n/g, '<br />')
.replace(/<br\s?\/?>/g, '<br />');
}
이렇게하면 정보를 구분하여 제목에 여러 줄을 사용할 수 있습니다. 예를 들어 event.title을 '종일 이벤트'+ '<br />'+ '기타 설명'제목으로 바꿉니다.
다음은 qTip2를 사용하는 팝업 코드입니다 eventMouseover.
$(document).ready(function() {
// Setup FullCalendar
// Setup FullCalendar
(function() {
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
var day=date.toLocaleDateString();
var tooltip = $('<div/>').qtip({
id: 'fullcalendar',
prerender: true,
content: {
text: ' ',
title: {
button: true
}
},
position: {
my: 'bottom center',
at: 'top center',
target: 'mouse',
viewport: $('#fullcalendar'),
adjust: {
mouse: false,
scroll: false
}
},
show: false,
hide: false,
style: 'qtip-light'
}).qtip('api');
$('#fullcalendar').fullCalendar({
editable: true,
disableDragging: true,
height: 600,
header: {
left: 'title',
center: '',
right: 'today prev,next'
},
dayClick: function() { tooltip.hide() },
eventResizeStart: function() { tooltip.hide() },
eventDragStart: function() { tooltip.hide() },
viewDisplay: function() { tooltip.hide() },
events: [
{
title: 'All Day Event',
start: new Date(2014, 3, 1)
},
{
title: 'Long Event',
start: new Date(y, m, d-5),
end: new Date(y, m, d-2)
},
{
id: 999,
title: 'Repeating Event',
start: new Date(y, m, d+4, 16, 0),
allDay: false
},
{
title: 'Meeting',
start: new Date(y, m, d, 10, 30),
allDay: false
},
{
title: 'Spring Membership Conference',
start: new Date(y, m, d+6, 7,0),
end: new Date(y, m, d+6, 13,0),
allDay: false,
description:'save the date! Join us for our Annual Membership Conference. Breakfast will be served beginning at 7:30 a.m. Featuring The EFEC Belief System & Our Pledge lunch'
},
{
title: 'Birthday Party',
start: new Date(y, m, d+1, 19, 0),
end: new Date(y, m, d+1, 22, 30),
allDay: false
}
],
eventMouseover : function(data, event, view) {
var content =
'<p>'+data.description +'<p>'+
'<h3>'+data.title+'</h3>' +
'<p><b>Start:</b> '+data.start+'<br />' +
(data.end && '<p><b>End:</b> '+data.end+'</p>' || '');
tooltip.set({
'content.text': content
})
.reposition(event).show(event);
},
});
}());
});
가능한 해결책 : 제목에 더 많은 콘텐츠를 추가합니다. 이 CSS 스타일을 덮어 씁니다.
.fc-day-grid-event .fc-content {
white-space: normal;
}
어떤 이유로 나는 사용해야합니다
element.find('.fc-event-inner').empty();
그것을 작동시키기 위해, 나는 내가 낮보기에 있다고 생각합니다.
저에게 더 간단한 해결책을 찾았습니다.
fullcalendar.css를 변경했습니다.
다음을 추가했습니다.
float: left;
clear: none;
margin-right: 10px;
를 야기하는:
.fc-event-time,
.fc-event-title {
padding: 0 1px;
float: left;
clear: none;
margin-right: 10px;
}
이제 필요할 때만 포장됩니다.
툴팁없이 꽤 많은 정보를 표시 할 수있는 기능이 필요했고 꽤 좋았습니다. FullCalendars titleprop을 사용 하여 모든 HTML을 저장했습니다. 렌더링 후 작동하는지 확인하기 위해해야 할 유일한 일은 제목 필드 HTML을 구문 분석하는 것입니다.
// `data` ismy JSON object.
$.each(data, function(index, value) {
value.title = '<div class="title">' + value.title + '</div>';
value.title += '<div class="deets"><span class="time"><img src="/themes/custom/bp/images/clock.svg">' + value.start_time + ' - ' + value.end_time + '</span>';
value.title += '<span class="location"><img src="/themes/custom/bp/images/pin.svg">' + value.location + '</span></div>';
value.title += '<div class="learn-more">LEARN MORE <span class="arrow"></span></span>';
});
// Initialize the calendar object.
calendar = new FullCalendar.Calendar(cal, {
events: data,
plugins: ['dayGrid'],
eventRender: function(event) {
// This is required to parse the HTML.
const title = $(event.el).find('.fc-title');
title.html(title.text());
}
});
calendar.render();
I would have used template literals, but had to support IE11
I would recommend the use of the eventAfterRender callback instead of eventRender. Indeed if you use eventRender you might jeopardize the correct display of the events, in coffee script, it something like :
$("#calendar").fullCalendar
eventAfterRender: (event, element) ->
element.find('.fc-title').after("<span>"+event.description+"</span>")
참고URL : https://stackoverflow.com/questions/3408723/display-more-text-in-fullcalendar
'Programing' 카테고리의 다른 글
| OpenID를 사용하지 않는 이유는 무엇입니까? (0) | 2020.12.10 |
|---|---|
| Netbeans에서 파일 검색 속도 향상 (0) | 2020.12.10 |
| 다형성의 실제 예 (0) | 2020.12.10 |
| 알림에서 애플리케이션 및 스택 재개 (0) | 2020.12.10 |
| AngularJS 지시문 : UI에 반영되지 않은 $ scope 변경 (0) | 2020.12.10 |