import { DayGridViewWrapper } from '../lib/wrappers/DayGridViewWrapper.js' import { anyElsIntersect } from '../lib/dom-geom.js' import { filterVisibleEls } from '../lib/dom-misc.js' describe('dayGrid advanced event rendering', () => { pushOptions({ initialDate: '2020-05-01', }) // https://github.com/fullcalendar/fullcalendar/issues/5408 it('renders without intersecting', () => { let calendar = initCalendar({ initialView: 'dayGridMonth', initialDate: '2020-05-01', events: [ { start: '2020-05-02', end: '2020-05-04', title: 'event a' }, { start: '2020-05-02', end: '2020-05-04', title: 'event b' }, { start: '2020-05-03', end: '2020-05-05', title: 'event c' }, { start: '2020-05-04', title: 'event d' }, { start: '2020-05-04', title: 'event e' }, ], }) let dayGridWrapper = new DayGridViewWrapper(calendar).dayGrid let eventEls = dayGridWrapper.getEventEls() expect(anyElsIntersect(eventEls)).toBe(false) }) // https://github.com/fullcalendar/fullcalendar/issues/5771 it('renders more-links correctly when first obscured event is longer than event before it', () => { let calendar = initCalendar({ initialView: 'dayGridMonth', initialDate: '2020-08-01', dayMaxEventRows: 3, events: [ { title: 'big1', start: '2020-07-23', end: '2020-07-28' }, { title: 'small1', start: '2020-07-24', end: '2020-07-27' }, { title: 'small2', start: '2020-07-24', end: '2020-07-27' }, { title: 'big2', start: '2020-07-25', end: '2020-07-28' }, ], }) let dayGridWrapper = new DayGridViewWrapper(calendar).dayGrid let eventEls = dayGridWrapper.getEventEls() let visibleEventEls = filterVisibleEls(eventEls) let moreLinkEls = dayGridWrapper.getMoreEls() expect(visibleEventEls.length).toBe(3) expect(moreLinkEls.length).toBe(1) expect(anyElsIntersect(visibleEventEls.concat(moreLinkEls))).toBe(false) }) // https://github.com/fullcalendar/fullcalendar/issues/5790 it('positions more-links correctly in columns that have empty space', () => { let calendar = initCalendar({ initialView: 'dayGridMonth', initialDate: '2020-09-01', dayMaxEventRows: 4, events: [ { start: '2020-08-30', end: '2020-09-04' }, { start: '2020-08-31', end: '2020-09-03' }, { start: '2020-09-01', end: '2020-09-04' }, { start: '2020-09-02', end: '2020-09-04' }, { start: '2020-09-02', end: '2020-09-04' }, ], }) let dayGridWrapper = new DayGridViewWrapper(calendar).dayGrid let eventEls = dayGridWrapper.getEventEls() let visibleEventEls = filterVisibleEls(eventEls) let moreLinkEls = dayGridWrapper.getMoreEls() expect(visibleEventEls.length).toBe(3) expect(moreLinkEls.length).toBe(2) expect(anyElsIntersect(visibleEventEls.concat(moreLinkEls))).toBe(false) expect(Math.abs( moreLinkEls[0].getBoundingClientRect().top - moreLinkEls[1].getBoundingClientRect().top, )).toBeLessThan(1) }) // https://github.com/fullcalendar/fullcalendar/issues/5883 it('it renders without gaps when ordered by title', () => { let calendar = initCalendar({ initialDate: '2020-10-01', eventOrder: 'title', dayMaxEventRows: 3, events: [ { title: 'b1', start: '2020-10-20', end: '2020-10-22', }, { title: 'b2', start: '2020-10-21', end: '2020-10-22', }, { title: 'b3', start: '2020-10-20', end: '2020-10-23', }, { title: 'b4', start: '2020-10-20', end: '2020-10-23', }, ], }) let dayGridWrapper = new DayGridViewWrapper(calendar).dayGrid let eventEls = dayGridWrapper.getEventEls() let visibleEventEls = filterVisibleEls(eventEls) let moreLinkEls = dayGridWrapper.getMoreEls() expect(visibleEventEls.length).toBe(2) expect(moreLinkEls.length).toBe(3) expect(anyElsIntersect(visibleEventEls.concat(moreLinkEls))).toBe(false) }) it('won\'t intersect when doing custom rendering', () => { let calendar = initCalendar({ initialView: 'dayGridMonth', initialDate: '2020-06-01', events: [ { start: '2020-06-04', end: '2020-06-08', title: 'event a' }, { start: '2020-06-05', end: '2020-06-09', title: 'event b' }, { start: '2020-06-08T12:00:00', title: 'event c' }, ], eventContent(arg) { // creates varying-height events, which revealed the bug return { html: ` ${arg.timeText} ${arg.event.title} `, } }, }) let dayGridWrapper = new DayGridViewWrapper(calendar).dayGrid let eventEls = dayGridWrapper.getEventEls() expect(anyElsIntersect(eventEls)).toBe(false) }) it('renders single-day timed event as list-item', () => { let calendar = initCalendar({ initialView: 'dayGridMonth', initialDate: '2020-05-01', eventDisplay: 'auto', events: [ { title: 'event 1', start: '2020-05-11T22:00:00', }, ], }) let dayGridWrapper = new DayGridViewWrapper(calendar).dayGrid let eventEl = dayGridWrapper.getEventEls()[0] expect(dayGridWrapper.isEventListItem(eventEl)).toBe(true) }) it('does not render multi-day event as list-item', () => { let calendar = initCalendar({ initialView: 'dayGridMonth', initialDate: '2020-05-01', eventDisplay: 'auto', events: [ { title: 'event 1', start: '2020-05-11T22:00:00', end: '2020-05-12T06:00:00', }, ], }) let dayGridWrapper = new DayGridViewWrapper(calendar).dayGrid let eventEl = dayGridWrapper.getEventEls()[0] expect(dayGridWrapper.isEventListItem(eventEl)).toBe(false) }) // https://github.com/fullcalendar/fullcalendar/issues/5634 it('does not render split multi-day event as list-item', () => { let calendar = initCalendar({ initialView: 'dayGridMonth', initialDate: '2020-05-01', eventDisplay: 'auto', events: [ { title: 'event', start: '2020-05-09T12:00:00', end: '2020-05-10T12:00:00', }, ], }) let dayGridWrapper = new DayGridViewWrapper(calendar).dayGrid let eventEls = dayGridWrapper.getEventEls() expect(eventEls.length).toBe(2) expect(dayGridWrapper.isEventListItem(eventEls[0])).toBe(false) expect(dayGridWrapper.isEventListItem(eventEls[0])).toBe(false) }) it('render only block when eventDislay:block', () => { let calendar = initCalendar({ eventDisplay: 'block', events: [ { start: '2020-05-02T02:00:00', title: 'event a' }, ], }) let dayGridWrapper = new DayGridViewWrapper(calendar).dayGrid let eventEl = dayGridWrapper.getEventEls()[0] expect(dayGridWrapper.isEventListItem(eventEl)).toBe(false) }) it('adjusts more link when getting bigger then smaller with liquid height', () => { const LARGE_HEIGHT = 800 const SMALL_HEIGHT = 500 let $container = $( `
`, ).appendTo('body') let calendar = initCalendar({ height: '100%', dayMaxEvents: true, // will cause visible event count to vary events: [ { start: '2020-05-02', end: '2020-05-03', title: 'event a' }, { start: '2020-05-02', end: '2020-05-03', title: 'event b' }, { start: '2020-05-02', end: '2020-05-03', title: 'event c' }, { start: '2020-05-02', end: '2020-05-03', title: 'event d' }, { start: '2020-05-02', end: '2020-05-03', title: 'event e' }, { start: '2020-05-02', end: '2020-05-03', title: 'event f' }, ], }, $container.find('div')) let dayGridWrapper = new DayGridViewWrapper(calendar).dayGrid let origEventCnt = filterVisibleEls(dayGridWrapper.getEventEls()).length $container.css('height', SMALL_HEIGHT) calendar.updateSize() let smallEventCnt = filterVisibleEls(dayGridWrapper.getEventEls()).length expect(smallEventCnt).not.toBe(origEventCnt) $container.css('height', LARGE_HEIGHT) calendar.updateSize() let largeEventCnt = filterVisibleEls(dayGridWrapper.getEventEls()).length expect(largeEventCnt).toBe(origEventCnt) $container.remove() }) // https://github.com/fullcalendar/fullcalendar/issues/5850 it('does not have JS error when dayMaxEventRows and almost no height', () => { initCalendar({ height: '100%', eventDisplay: 'block', dayMaxEventRows: true, events: [ { start: '2020-05-02T02:00:00', title: 'event a' }, ], }) }) // https://github.com/fullcalendar/fullcalendar/issues/5863 it('does not have JS error when dayMaxEventRows and almost no height', () => { let $container = $('
').appendTo('body') initCalendar({ height: '100%', eventDisplay: 'block', dayMaxEventRows: true, events: [ { start: '2020-05-02T02:00:00', title: 'event a' }, ], }, $container[0]) $container.remove() }) it('doesn\'t create more-link while positioning events with temporary unknown dimensions', () => { let renderedMoreLink = false initCalendar({ initialView: 'dayGridMonth', moreLinkDidMount() { renderedMoreLink = true }, events: [ { id: '1', start: '2020-05-05' }, ], }) expect(renderedMoreLink).toBe(false) }) it('can render events with strict ordering', () => { let calendar = initCalendar({ initialView: 'dayGridMonth', eventOrder: 'id', eventOrderStrict: true, events: [ { id: '1', start: '2020-05-05' }, { id: '2', start: '2020-05-03', end: '2020-05-08' }, { id: '3', start: '2020-05-04' }, ], eventDidMount(arg) { arg.el.setAttribute('data-event-id', arg.event.id) // TODO: more formal system for this }, }) let dayGridWrapper = new DayGridViewWrapper(calendar).dayGrid let eventEls = dayGridWrapper.getEventEls() let visibleEventEls = filterVisibleEls(eventEls) expect(anyElsIntersect(visibleEventEls)).toBe(false) let el1 = document.querySelector('[data-event-id="1"]') let el2 = document.querySelector('[data-event-id="2"]') let el3 = document.querySelector('[data-event-id="3"]') let top1 = el1.getBoundingClientRect().top let top2 = el2.getBoundingClientRect().top let top3 = el3.getBoundingClientRect().top expect(top1).toBeLessThan(top2) expect(top2).toBeLessThan(top3) }) // https://github.com/fullcalendar/fullcalendar/issues/5767 it('consumes empty gaps in space when strict ordering', () => { let calendar = initCalendar({ initialDate: '2020-08-23', initialView: 'dayGridWeek', eventOrder: 'title', eventOrderStrict: true, dayMaxEventRows: 4, eventDidMount(arg) { arg.el.setAttribute('data-event-id', arg.event.id) // TODO: more formal system for this }, events: [ { title: 'a', id: 'a', start: '2020-08-24', end: '2020-08-27', }, { title: 'b', id: 'b', start: '2020-08-24', end: '2020-08-27', }, { title: 'c', id: 'c', start: '2020-08-28', end: '2020-08-29', }, { title: 'd', id: 'd', start: '2020-08-24', end: '2020-08-29', }, { title: 'e', id: 'e', start: '2020-08-27', end: '2020-08-29', }, { // will cause 'e' to hide title: 'f', id: 'f', start: '2020-08-24', end: '2020-08-29', }, ], }) let dayGridWrapper = new DayGridViewWrapper(calendar).dayGrid let eventEls = dayGridWrapper.getEventEls() let visibleEventEls = filterVisibleEls(eventEls) expect(anyElsIntersect(visibleEventEls)).toBe(false) let rect0 = document.querySelector('[data-event-id="d"]').getBoundingClientRect() let rect1 = document.querySelector('[data-event-id="f"]').getBoundingClientRect() expect(rect1.top - rect0.bottom).toBeLessThan(2) }) // https://github.com/fullcalendar/fullcalendar/issues/6393 it('doesn\'t overlap with eventOrderStrict', () => { let calendar = initCalendar({ initialDate: '2021-06-21', initialView: 'dayGridWeek', eventOrderStrict: true, events: [ { title: 'Busy1', start: '2021-06-21T10:00:00Z', end: '2021-06-21T11:00:00Z', }, { title: 'Busy2', start: '2021-06-21T08:00:00Z', end: '2021-06-21T10:00:00Z', }, { title: 'Busy3', start: '2021-06-22T11:00:00Z', end: '2021-06-22T12:00:00Z', }, { title: 'Busy4', start: '2021-06-24T08:30:00Z', end: '2021-06-24T11:00:00Z', }, { title: 'Busy5', start: '2021-06-24T16:00:00Z', end: '2021-06-24T16:30:00Z', }, ], }) let dayGridWrapper = new DayGridViewWrapper(calendar).dayGrid let eventEls = dayGridWrapper.getEventEls() let visibleEventEls = filterVisibleEls(eventEls) expect(anyElsIntersect(visibleEventEls)).toBe(false) }) // https://github.com/fullcalendar/fullcalendar/issues/6397 it('doesn\'t show duplicate events in popover when eventOrder by start date', (done) => { let calendar = initCalendar({ initialView: 'dayGridMonth', initialDate: '2021-07-07', eventOrder: 'start', dayMaxEventRows: 4, events: [ { title: 'Ariana Florescu', start: '2021-07-02', end: '2021-07-03', }, { title: 'Alan Leaclaire', start: '2021-07-02', end: '2021-07-10', }, { title: 'Divya Sundavaridevelu', start: '2021-07-05', end: '2021-07-06', }, { title: 'Phyllis Benoussan', start: '2021-07-05', end: '2021-07-06', }, { title: 'Allison Olsen', start: '2021-07-05', end: '2021-07-10', }, { title: 'Justin Sinnaeve', start: '2021-07-05', end: '2021-07-10', }, { title: 'Sylwia Pitel', start: '2021-07-07', end: '2021-07-08', }, { title: 'Derrick Leach', start: '2021-07-07', end: '2021-07-10', }, { title: 'Sebastien Pillon', start: '2021-07-08', end: '2021-07-13', }, { title: 'Nishat Ayub', start: '2021-07-08', end: '2021-07-10', }, { title: 'Ognjen Stoisavljevic', start: '2021-07-09', end: '2021-07-10', }, { title: 'Slobodan Stojanovic', start: '2021-07-09', end: '2021-07-10', }, { title: 'Phyllis Benoussan', start: '2021-07-09', end: '2021-07-10', }, ], }) let dayGridWrapper = new DayGridViewWrapper(calendar).dayGrid dayGridWrapper.openMorePopover(4) // on July 9th setTimeout(() => { let eventEls = dayGridWrapper.getMorePopoverEventEls() expect(eventEls.length).toBe(9) done() }) }) // https://github.com/fullcalendar/fullcalendar/issues/7447 it('Doesn\'t error or overlap event positions when white-space:normal', () => { let calendar = initCalendar({ initialView: 'dayGridWeek', initialDate: '2023-04-09', dayMaxEvents: 4, eventContent() { return { html: '
' + 'AAAAAAAAAA BBBBBBBBB
', } }, events: [ { id: 'a', start: '2023-04-14', end: '2023-04-21', }, { id: 'b', start: '2023-04-13', end: '2023-04-22', }, { id: 'c', start: '2023-04-06', end: '2023-04-15', }, { id: 'd', start: '2023-04-11', end: '2023-04-14', }, { id: 'e', start: '2023-04-14', end: '2023-04-19', }, { id: 'f', start: '2023-04-13', end: '2023-04-19', }, { id: 'g', start: '2023-04-05', end: '2023-04-14', }, { id: 'h', start: '2023-04-06', end: '2023-04-15', }, { id: 'i', start: '2023-04-13', end: '2023-04-15', }, { id: 'j', start: '2023-04-12', end: '2023-04-15', }, ], }) let dayGridWrapper = new DayGridViewWrapper(calendar).dayGrid let eventEls = dayGridWrapper.getEventEls() let visibleEventEls = filterVisibleEls(eventEls) expect(anyElsIntersect(visibleEventEls)).toBe(false) }) // https://github.com/fullcalendar/fullcalendar/issues/6486 it('renders events starting yesterday, ending at midnight, as "past"', () => { let calendar = initCalendar({ initialView: 'dayGridMonth', initialDate: '2023-04-09', // "today" now: '2023-04-09', // "today" events: [{ start: '2023-04-08', // yesterday allDay: true, }], }) let dayGridWrapper = new DayGridViewWrapper(calendar).dayGrid let eventEls = dayGridWrapper.getEventEls() expect(eventEls[0]).toHaveClass('fc-event-past') }) // https://github.com/fullcalendar/fullcalendar/issues/7462 it('Cannot infinitely recurse with dayMaxEventRows and many hidden event rows', () => { initCalendar({ initialView: 'dayGridMonth', initialDate: '2023-09-01', dayMaxEventRows: 6, events: [ { start: '2023-09-28T00:00:00', end: '2023-10-01T00:00:00', }, { start: '2023-09-26T00:00:00', end: '2023-09-27T00:00:00', }, { start: '2023-09-20T17:00:00', end: '2023-09-27T17:00:00', }, { start: '2023-09-21T16:00:00', end: '2023-09-25T14:00:00', }, { start: '2023-09-21T16:00:00', end: '2023-09-25T11:00:00', }, { start: '2023-09-28T10:00:00', end: '2023-09-28T15:00:00', }, { start: '2023-09-27T08:00:00', end: '2023-10-04T18:00:00', }, { start: '2023-09-20T13:00:00', end: '2023-09-29T12:00:00', }, { start: '2023-09-20T12:00:00', end: '2023-09-29T12:00:00', }, { start: '2023-09-27T11:00:00', end: '2023-09-28T18:00:00', }, { start: '2023-03-29T23:00:00', end: '2024-03-29T22:00:00', }, { start: '2023-09-25T02:00:00', end: '2023-09-29T12:00:00', }, { start: '2023-09-22T14:00:00', end: '2023-09-29T12:00:00', }, { start: '2023-09-22T14:00:00', end: '2023-09-28T12:00:00', }, { start: '2023-09-19T13:00:00', end: '2023-09-30T13:00:00', }, ], }) }) it('will limit events to dayMaxEventRows:1', () => { const calendar = initCalendar({ initialDate: '2021-10-31', dayMaxEventRows: 1, events: [ { title: 'A', start:'2021-10-31', end:'2021-11-02' }, { title: 'B', start:'2021-10-29', end:'2021-11-02' }, { title: 'C', start:'2021-10-28 12:00:00', end:'2021-10-31 12:00:00' }, ], }) let dayGridWrapper = new DayGridViewWrapper(calendar).dayGrid let visibleEventEls = filterVisibleEls(dayGridWrapper.getEventEls()) let moreEls = dayGridWrapper.getMoreEls() let allEls = [...visibleEventEls, ...moreEls] let offsetTopHash = {} for (let el of allEls) { offsetTopHash[Math.round(el.getBoundingClientRect().top)] = true } // two weeks, two distinct lines of events (one per week) expect(Object.keys(offsetTopHash).length).toBe(2) }) })