dayMaxEvents is not showing more message

[brandonhsz]

Hello I am trying to use dayMaxEvents and it is working partially, it is hiding the excess elements but it is not showing me the message +x more... and I can't find the reason, attach a screenshot and the code I am using hoping you can help me, as additional information I found a talk about a similar problem and it did not work for me I attach the url #294

<script lang="ts">
	import '@event-calendar/core/index.css';
	import Calendar from '@event-calendar/core';
	import DayGrid from '@event-calendar/day-grid';
	import ResourceTimeGrid from '@event-calendar/resource-time-grid';
	import Interaction from '@event-calendar/interaction';

	let ec: Calendar = {} as Calendar;
	let plugins = [DayGrid, ResourceTimeGrid, Interaction];
	let options: any = {
		view: 'dayGridMonth',
		eventStartEditable: false,
		eventDurationEditable: false,
		dayMaxEvents: true,
		events: [
			{
				start: new Date('2025-02-10T08:00:00'),
				end: new Date('2025-02-10T09:00:00'),
				resourceIds: ['0', 'event1'],
				name: 'Project Meeting',
				title: 'hello',
				color: '#FF6347D1',
				allDay: true,
				type: 'Meeting',
				status: 'Confirmed',
				payStatus: 'Paid',
				tickets: 50
			},
			{
				start: new Date('2025-02-10T10:00:00'),
				end: new Date('2025-02-10T11:00:00'),
				resourceIds: ['0', 'event2'],
				name: 'Technology Conference',
				title: 'hello2',
				color: '#4682B4D1',
				allDay: false,
				type: 'Conference',
				status: 'Pending',
				payStatus: 'Pending',
				tickets: 150
			},
			{
				start: new Date('2025-02-10T14:00:00'),
				end: new Date('2025-02-10T15:00:00'),
				resourceIds: ['0', 'event3'],
				name: 'Networking Lunch',
				title: 'hello3',
				color: '#FF8C00D1',
				allDay: false,
				type: 'Networking',
				status: 'Confirmed',
				payStatus: 'Paid',
				tickets: 30
			},
			{
				start: new Date('2025-02-10T14:00:00'),
				end: new Date('2025-02-10T15:00:00'),
				resourceIds: ['0', 'event3'],
				name: 'Networking Lunch',
				title: 'hello3',
				color: '#FF8C00D1',
				allDay: false,
				type: 'Networking',
				status: 'Confirmed',
				payStatus: 'Paid',
				tickets: 30
			},
			{
				start: new Date('2025-02-10T14:00:00'),
				end: new Date('2025-02-10T15:00:00'),
				resourceIds: ['0', 'event3'],
				name: 'Networking Lunch',
				title: 'hello3',
				color: '#FF8C00D1',
				allDay: false,
				type: 'Networking',
				status: 'Confirmed',
				payStatus: 'Paid',
				tickets: 30
			},
			{
				start: new Date('2025-02-10T14:00:00'),
				end: new Date('2025-02-10T15:00:00'),
				resourceIds: ['0', 'event3'],
				name: 'Networking Lunch',
				title: 'hello3',
				color: '#FF8C00D1',
				allDay: false,
				type: 'Networking',
				status: 'Confirmed',
				payStatus: 'Paid',
				tickets: 30
			}
		]
	};
</script>

<Calendar bind:this={ec} {plugins} {options} />

<style></style>

[vkurko]

Can you provide a live demo please? CodeSandbox, StackBlitz, etc. because I cannot reproduce the issue locally.

[brandonhsz]

I found the problem, the custom styles in events were preventing it from rendering, so that solved the problem for the moment, thanks for the answer though.

[brandonhsz]

I found the problem, the custom styles in events were preventing it from rendering, so that solved the problem for the moment, thanks for the answer though.