我需要使用jquery calendar实现read more/read less功能。我在下面解释我的代码。
<button type="button" id="btn" onclick="getCalendar()">GET</button>
<div class="calender" id='calendar'></div>
<script>
function getCalendar() {
var todayDate = new Date().toISOString().slice(0, 10);
// var evStartDate = new Date(inputdate)
//console.log('date',evStartDate);
//addClassByDate(evStartDate);
$('#calendar').fullCalendar({
theme: true,
header: {
left: 'prev,next',
center: 'title',
right: 'year,month,agendaWeek,agendaDay'
},
///////// edit
dayClick: function(date, jsEvent, view) {
//alert('day click');
},
eventClick: function(event, jsEvent) {
//alert('event clicked');
$('#eventpopup').modal({
backdrop: 'static'
});
},
eventRender: function(event, element, view){
var evStart = moment(view.intervalStart).subtract(1, 'days');
var evEnd = moment(view.intervalEnd).subtract(1, 'days');
if (!event.start.isAfter(evStart) ||
event.start.isAfter(evEnd)) { return false; }
},
///////////
defaultDate: todayDate,
navLinks: true, // can click day/week names to navigate views
editable: true,
eventLimit: true, // allow "more" link when too many events
events: [{
title: 'jQuery is a fast and concise JavaScript Library',
start: '2017-12-01'
}, {
title: 'hello',
start: '2017-12-02'
}, {
id: 999,
title: 'hii',
start: '2017-11-02'
}]
});
}
</script>
如果title文本长度超过10，则需要在此半文本后有一个read more选项和.....。当用户单击该阅读更多选项时，总标题将显示，当用户再次单击read less选项时，它将显示正常文本。
您可以使用qtip添加工具提示：
<!DOCTYPE html>
<html>
<head>
<script data-require="jquery@*" data-semver="3.1.1" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/qtip2/3.0.3/basic/jquery.qtip.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/qtip2/3.0.3/basic/jquery.qtip.js"></script>
<link href="calendar.css" rel="stylesheet">
<script src="moment.js"></script>
<script src="fullcalendar.js"></script>
<link href="style.css" rel="stylesheet" />
<script src="script.js"></script>
</head>
<body>
<h1>Calendar</h1>
<button type="button" id="btn" onclick="getCalendar()">GET</button>
<div class="calender" id='calendar'></div>
<script>
function getCalendar() {
var todayDate = new Date().toISOString().slice(0, 10);
// var evStartDate = new Date(inputdate)
//console.log('date',evStartDate);
//addClassByDate(evStartDate);
$('#calendar').fullCalendar({
theme: true,
header: {
left: 'prev,next',
center: 'title',
right: 'year,month,agendaWeek,agendaDay'
},
///////// edit
dayClick: function(date, jsEvent, view) {
//alert('day click');
},
eventClick: function(event, jsEvent) {
//alert('event clicked');
$('#eventpopup').modal({
backdrop: 'static'
});
},
eventRender: function(event, element, view) {
var evStart = moment(view.intervalStart).subtract(1, 'days');
var evEnd = moment(view.intervalEnd).subtract(1, 'days');
if (!event.start.isAfter(evStart) ||
event.start.isAfter(evEnd)) {
return false;
}
if (event.title.length > 10) {
var eventShortTitle = event.title.substring(0, 10) + '...';
element.qtip({
content: event.title,
position: {
at: 'bottom left', // at the bottom right of...
}
});
element.find('.fc-title').text(eventShortTitle);
}
},
///////////
defaultDate: todayDate,
navLinks: true, // can click day/week names to navigate views
editable: true,
eventLimit: true, // allow "more" link when too many events
events: [{
title: 'jQuery is a fast and concise JavaScript Library',
start: '2017-12-01'
}, {
title: 'hello',
start: '2017-12-02'
}, {
id: 999,
title: 'hii',
start: '2017-11-02'
}]
});
}
</script>
</body>
我希望这对您有帮助！