diff --git a/README.md b/README.md index 987cc25..5a961d4 100644 --- a/README.md +++ b/README.md @@ -68,8 +68,9 @@ The Dayz component accepts these properties: * **events** (optional): An `Dayz.EventsCollection` instance that contains events that should be displayed on the calendar. * `Dayz.EventsCollection` accepts two arguments: * An array of events - * a list of optional properties. Currently the only option that can be set is: + * a list of optional properties. Currently two option that can be set is: * **displayAllDay**, If set will show all day events at the top of the week and day views. If false, all day events will fill completly fill the column. defaults to true. + * **displayLabelForAllDays**, If set to `false`, for events that are shown on multiple days only the first event will have the `content` attribute shown. In any other case `content` will be shown on every days. This prop works only if `displayAllDay` is `false`. * **highlightDays**: either a function or an array of days that should be highlighted. Each day can be a string date that momentjs accepts, a JS Date object, or a momentjs date. if using a function, it will be passed the day and should return either false, or a string to use for the className. * **dayEventHandlers** event handlers to attach on the Day element, such as onClick, onMouseOver, etc. * if **onClick** or **onDoubleClick** is given to dayEventHandlers, the call back will be passed two variables, the event and a `momentjs` date. Hours/Minutes are added to the date to reflect how far down the Y axis was clicked. diff --git a/src/api/events-collection.js b/src/api/events-collection.js index f147a61..6666d85 100644 --- a/src/api/events-collection.js +++ b/src/api/events-collection.js @@ -15,15 +15,18 @@ export default class EventsCollection { static Event = Event; - constructor(events = [], options = { displayAllDay: true }) { + constructor(events = [], options = { displayAllDay: true, displayLabelForAllDays: true }) { this.events = []; for (let i = 0, { length } = events; i < length; i += 1) { if (options.displayAllDay) { this.add(events[i], { silent: true }); } else { - Array.from(events[i].range.snapTo('days').by('day')).map(date => ( - this.add(events[i], { silent: true, eventDay: date.clone() }) - )); + Array.from(events[i].range.snapTo('days').by('day')).map((date, j) => { + if (false === options.displayLabelForAllDays && j > 0) { + events[i].content = ' '; + } + return this.add(events[i], { silent: true, eventDay: date.clone() }); + }); } } } diff --git a/test/events-collection.spec.js b/test/events-collection.spec.js index ba82072..76deb14 100644 --- a/test/events-collection.spec.js +++ b/test/events-collection.spec.js @@ -17,24 +17,54 @@ describe('Events Collection', () => { describe('display events as multiple NOT all day events', () => { describe('range is more than one day', () => { - it('creates events from object', () => { - const collection = new EventsCollection( - [{ range: moment.range('2011-10-01', '2011-10-02 12:00:01') }], - { displayAllDay: false }, - ); - expect(collection.events.length).toEqual(2); + const range = moment.range('2011-10-01', '2011-10-02 12:00:01'); - const event = collection.events[0]; - expect(event).toEqual(expect.any(Event)); - expect(event.range().isSame( - moment.range('2011-10-01 00:00:00', '2011-10-01 23:59:59.999'), - )).toBe(true); + describe('displayLabelForAllDays is any other then false', () => { + it('creates events from object', () => { + const collection = new EventsCollection( + [{ content: 'Test Label', range }], + { displayAllDay: false }, + ); + expect(collection.events.length).toEqual(2); - const event_b = collection.events[1]; - expect(event_b).toEqual(expect.any(Event)); - expect(event_b.range().isSame( - moment.range('2011-10-02 00:00:00', '2011-10-02 12:00:01'), - )).toBe(true); + const event = collection.events[0]; + expect(event).toEqual(expect.any(Event)); + expect(event.range().isSame( + moment.range('2011-10-01 00:00:00', '2011-10-01 23:59:59.999'), + )).toBe(true); + expect(event.content).toBe('Test Label'); + + const event_b = collection.events[1]; + expect(event_b).toEqual(expect.any(Event)); + expect(event_b.range().isSame( + moment.range('2011-10-02 00:00:00', '2011-10-02 12:00:01'), + )).toBe(true); + expect(event_b.content).toBe('Test Label'); + }); + }); + + describe('displayLabelForAllDays is false', () => { + it('creates events from object', () => { + const collection = new EventsCollection( + [{ content: 'Test Label', range }], + { displayAllDay: false, displayLabelForAllDays: false }, + ); + expect(collection.events.length).toEqual(2); + + const event = collection.events[0]; + expect(event).toEqual(expect.any(Event)); + expect(event.range().isSame( + moment.range('2011-10-01 00:00:00', '2011-10-01 23:59:59.999'), + )).toBe(true); + expect(event.content).toBe('Test Label'); + + const event_b = collection.events[1]; + expect(event_b).toEqual(expect.any(Event)); + expect(event_b.range().isSame( + moment.range('2011-10-02 00:00:00', '2011-10-02 12:00:01'), + )).toBe(true); + expect(event_b.content).toBe(' '); + }); }); });