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);
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?
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' },
})(jQuery);
Expected result
Actual result
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?