如何在完整日历中点击日期显示活动详情 [英] How to show event details on click of day in full calendar
问题描述
$（window）.load（function（）{
$（'＃calendar '）.fullCalendar（{
header：{
left：'prev，next today'，
center：'title'，
right：'month，agendaWeek，agendaDay'
}，
editable：true，
eventRender：function（event，element，view）{
for（var i = 0; i< = event.products.length - 1 ; i ++）{
element.append（'< span>'+ event.products [i] .name +'< span>）;
};
}，
events：[{
title：'EventName'，
start：'2016-05-02'，
products：[{
name：'ProductName'
}]
}，{
title：'Event'，
start：'2016-05-03'，
products：[{
name：'ProductName1 '
}，{
name：'ProductName2'
}，{
name：'ProductName3'
}，]
}，{
title：'EventName'，
start：'2016-05-13'，
产品：[{
名称：'ProductName1'
}，{
名称：'ProductName2'
}]
}，{
title：'Event'，
start：'2016-05-15'，
products：[{
name：'ProductName'
}]
标题：'EventNAme'，
start：'2016-05-21'，
产品：[{
name ：'ProductName1'
}，{
name：'ProductName2'
}]
}，{
title：'Event'，
start：' 2016-05-23'，
产品：[{
名称：'ProductName1'
}，{
名称：'ProductName2'
}]
}，{
标题：'Eventname'，
start： '2016-05-25'，
产品：[{
name：'ProductName'
}]
}，{
title：'Event'，
start：'2016-05-29'，
products：[{
name：'ProductName'
}]
}]，
dayClick：function date，allDay，jsEvent，view）{
console.log（'date'+ date.format（'DD / MMM / YYYY'）+allDay+ allDay.title +jsEvent+ jsEvent +view + view）
}
}）;
$ b 如果你看到我有事件数组，并且每个事件都有产品数组，那么每当我点击日期我想显示标题，以及产品的细节，如同名的产品。这是我迄今在日历上试过的。
所以当我点击任何有我想要展示的事件的日子时我不会想要显示点击事件，我现在需要全天点击，根据下面的答案，只有点击事件时才显示。
事件标题product_name
代码太冗长，所以我已经创建了代码笔，请看看您是否可以编辑此代码，提前感谢您
DEMOTRIAL
解决方案 Ahaa！最后，我找到了在dayClick上呈现事件的解决方案。有一种叫做clientEvents的对象，它允许我们在任何完整的日历动作（比如dayClick，eventClick等）中获取事件。我用这个函数来渲染我的事件，这里是我的工作 demo ...
以及我正在热切寻找的dayClick代码
dayClick：function（date，allDay，jsEvent，view）{
$（'＃calendar'）。fullCalendar（'clientEvents '，function（event）{
//将事件日期与点击日期匹配，如果真实呈现点击日期事件
if（moment（date）.format（'YYYY-MM-DD'）== moment （event._start）.format（'YYYY-MM-DD'））{
//在这里做你的东西
console.log（event.title）;
/ /如果你有子数组，我的意思是数组中的数组，然后
console.log（event.subarray [0] .yoursubarrayKey）;
}
}
}
Hi everyone I have events array, on click of day I want to show event details in another panel. I have array with array within array format, I am not getting how to render this to get all the details of event including sub array details on that clicked day. Please see if you can help me with this or can suggest something in it. Here is my code below.
$(window).load(function() {
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
editable: true,
eventRender: function(event, element, view) {
for (var i = 0; i <= event.products.length - 1; i++) {
element.append('<span>' + event.products[i].name + '<span>');
};
},
events: [{
title: 'EventName',
start: '2016-05-02',
products: [{
name: 'ProductName'
}]
}, {
title: 'Event',
start: '2016-05-03',
products: [{
name: 'ProductName1'
}, {
name: 'ProductName2'
}, {
name: 'ProductName3'
},]
}, {
title: 'EventName',
start: '2016-05-13',
products: [{
name: 'ProductName1'
}, {
name: 'ProductName2'
}]
}, {
title: 'Event',
start: '2016-05-15',
products: [{
name: 'ProductName'
}]
}, {
title: 'EventNAme',
start: '2016-05-21',
products: [{
name: 'ProductName1'
}, {
name: 'ProductName2'
}]
}, {
title: 'Event',
start: '2016-05-23',
products: [{
name: 'ProductName1'
}, {
name: 'ProductName2'
}]
}, {
title: 'Eventname',
start: '2016-05-25',
products: [{
name: 'ProductName'
}]
}, {
title: 'Event',
start: '2016-05-29',
products: [{
name: 'ProductName'
}]
}],
dayClick: function(date, allDay, jsEvent, view) {
console.log('date' + date.format('DD/MMM/YYYY') + "allDay" + allDay.title + "jsEvent" + jsEvent + "view" + view)
}
});
})
If you see I have events array and each event has products array, so whenever I click on date I want to show title, as well as product details like same name of product. Here is what I have tried so far with calendar.
So when I click on any day that has event the I want to show I dont want to show on click of events, I need whole day clickable right now according to below answer it shows only when clicked on event.
event title product_name
The code is too lengthy so I have created code pen please see if you can edit this, thank you in advance
DEMOTRIAL
解决方案 Ahaa! Finally I found the solution to render events on dayClick. There is something called clientEvents object that allows us to fetch events inside any full calendar actions (say dayClick, eventClick etc) I used that fucntion to render my events, here is my working demo...
and the dayClick code which I was eagerly searching is below
dayClick: function(date, allDay, jsEvent, view) {
$('#calendar').fullCalendar('clientEvents', function(event) {
// match the event date with clicked date if true render clicked date events
if (moment(date).format('YYYY-MM-DD') == moment(event._start).format('YYYY-MM-DD')) {
// do your stuff here
console.log(event.title);
// if you have subarray i mean array within array then
console.log(event.subarray[0].yoursubarrayKey);
}
}
}
这篇关于如何在完整日历中点击日期显示活动详情的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
