Wednesday, June 5, 2024
 Popular · Latest · Hot · Upcoming
193
rated 0 times [  195] [ 2]  / answers: 1 / hits: 23580  / 8 Years ago, fri, may 13, 2016, 12:00:00

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


More From » jquery

 Answers
-7

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);
}
}
}

[#62193] Wednesday, May 11, 2016, 8 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
daveon

Total Points: 749
Total Questions: 108
Total Answers: 87

Location: Malaysia
Member since Wed, May 11, 2022
2 Years ago
;