How to display number of events counts in calendar view?
Krupa2793 opened this issue · 0 comments
Krupa2793 commented
Steps to reproduce
jQuery(document).ready(function(){
jQuery('.datetimepicker').datepicker({
timepicker: true,
language: 'en',
range: true,
multipleDates: true,
multipleDatesSeparator: " - "
});
jQuery("#add-event").submit(function(){
alert("Submitted");
var values = {};
$.each($('#add-event').serializeArray(), function(i, field) {
values[field.name] = field.value;
});
console.log(
values
);
});
});
(function () {
//alert("in fucntion");
'use strict';
// ------------------------------------------------------- //
// Calendar
// ------------------------------------------------------ //
jQuery(function() {
// page is ready
//alert("in fucntion in in");
jQuery('#calendar').fullCalendar({
themeSystem: 'bootstrap4',
// emphasizes business hours
businessHours: false,
defaultView: 'month',
// event dragging & resizing
editable: true,
// header
header: {
left: 'title',
center: 'month,agendaWeek,agendaDay',
right: 'today prev,next'
},
eventAfterAllRender: function(view) {
$('#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>');
}
});
},
eventRender: function (event, element, view) {
$(element).each(function () {
$(this).attr('date-num', event.start.format('YYYY-MM-DD'));
});
},
events: [
{
title: 'Barber',
description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eu pellentesque nibh. In nisl nulla, convallis ac nulla eget, pellentesque pellentesque magna.',
start: '2022-10-05',
className: 'fc-bg-default',
},
{
title: 'Flight Paris',
description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eu pellentesque nibh. In nisl nulla, convallis ac nulla eget, pellentesque pellentesque magna.',
start: '2022-10-08T14:00:00',
className: 'fc-bg-deepskyblue',
allDay: false
},
{
title: 'Team Meeting',
description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eu pellentesque nibh. In nisl nulla, convallis ac nulla eget, pellentesque pellentesque magna.',
start: '2022-10-10T13:00:00',
className: 'fc-bg-pinkred',
allDay: false
},
{
title: 'Meeting',
description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eu pellentesque nibh. In nisl nulla, convallis ac nulla eget, pellentesque pellentesque magna.',
start: '2022-10-12',
className: 'fc-bg-lightgreen',
},
{
title: 'Conference',
description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eu pellentesque nibh. In nisl nulla, convallis ac nulla eget, pellentesque pellentesque magna.',
start: '2022-10-13',
className: 'fc-bg-lightgreen',
},
{
title: 'Conference',
description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eu pellentesque nibh. In nisl nulla, convallis ac nulla eget, pellentesque pellentesque magna.',
start: '2022-10-13',
className: 'fc-bg-lightgreen',
},
{
title: 'Conference',
description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eu pellentesque nibh. In nisl nulla, convallis ac nulla eget, pellentesque pellentesque magna.',
start: '2022-10-13',
className: 'fc-bg-lightgreen',
},
{
title: 'Conference',
description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eu pellentesque nibh. In nisl nulla, convallis ac nulla eget, pellentesque pellentesque magna.',
start: '2022-10-13',
className: 'fc-bg-lightgreen',
},
{
title: 'Conference',
description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eu pellentesque nibh. In nisl nulla, convallis ac nulla eget, pellentesque pellentesque magna.',
start: '2022-10-13',
className: 'fc-bg-lightgreen',
},
{
title: 'Baby Shower',
description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eu pellentesque nibh. In nisl nulla, convallis ac nulla eget, pellentesque pellentesque magna.',
start: '2022-10-13',
className: 'fc-bg-default',
},
{
title: 'Birthday',
description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eu pellentesque nibh. In nisl nulla, convallis ac nulla eget, pellentesque pellentesque magna.',
start: '2022-10-13',
className: 'fc-bg-default',
},
{
title: 'Restaurant',
description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eu pellentesque nibh. In nisl nulla, convallis ac nulla eget, pellentesque pellentesque magna.',
start: '2022-10-15T09:30:00',
className: 'fc-bg-default',
allDay: false
},
{
title: 'Dinner',
description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eu pellentesque nibh. In nisl nulla, convallis ac nulla eget, pellentesque pellentesque magna.',
start: '2022-10-15T20:00:00',
className: 'fc-bg-default',
allDay: false
},
{
title: 'Shooting',
description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eu pellentesque nibh. In nisl nulla, convallis ac nulla eget, pellentesque pellentesque magna.',
start: '2022-10-25',
className: 'fc-bg-blue',
},
{
title: 'Go Space :)',
description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eu pellentesque nibh. In nisl nulla, convallis ac nulla eget, pellentesque pellentesque magna.',
start: '2022-10-27',
className: 'fc-bg-default',
},
{
title: 'Dentist',
description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eu pellentesque nibh. In nisl nulla, convallis ac nulla eget, pellentesque pellentesque magna.',
start: '2022-10-29T11:30:00',
className: 'fc-bg-blue',
allDay: false
}
],
dayClick: function(date, allDay, jsEvent, view) {
// jQuery('#modal-view-event-add').modal();
location.href=('gridViewc');
},
eventClick: function(event, jsEvent, view) {
jQuery('.event-icon').html("<i class='fa fa-"+event.icon+"'></i>");
jQuery('.event-title').html(event.title);
jQuery('.event-body').html(event.description);
jQuery('.eventUrl').attr('href',event.url);
// jQuery('#modal-view-event').modal();
location.href=('gridViewc');
},
})
});
})(jQuery);
</script>
Expected result
Actual result
- [Screenshot, logs]
as per screenshot I have highlighted count area that functionality currently I try i am able to fetch no. of count on day but how can I show in calender view date cell?