Merge pull request #30 from itsnorbertkalacska/feature/dont-show-labe…

…l-for-all-days

Feature/dont show label for each day

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.

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() });
+                });
             }
         }
     }

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(' ');
+                });
             });
         });