Group multiple events into one in month view and multiple day event with a horizontal line

[iammelvin]

Bug description / Feature request:

As you can see in the above screenshot i have more than one event for a single salesperson i might have many appointments for the same person on the single day instead of showing them separately can i group events for each sales person and show them on toggle ? In my case i don't need two pink dots instead a single pink dot with all the appointments for that person will do is it possible to do so ?

My scenario : So we will assign appointments for salesperson on daily basis a sales person can have any number of appointments per day so than cluttering the UI with multiple dots is it possible to have them grouped for each person so that will be a single dot for each person with all his appointments for the day ?

And with multiple day event is it possible to show a horizontal line with from and to date instead of a dot in each day ?

Thanks

Link to minimally-working plunker that reproduces the issue (starter template: http://plnkr.co/edit/LE4F4U7AnnD3tjM9ZH4G?p=preview)

Versions

Angular: 1.6.4

Calendar library:

Browser name and version: Chrome

[burtek]

It's not possible unless you modify calendarMonthCellEvents.html template, which is responsible for the dots.
EDIT: comment

[iammelvin]

Yes there is an option group month cell events which i tried

But i am unable to see tooltip while doing this any idea why ? Also in slidebox will i be able to show events separately instead of showing them altogether ? Is it possible to achieve this with event clicked function so that i can get slidebox with that particular event alone ?? Any idea would be really appreciated.

[burtek]

My bad, I don't know how I missed that.

You have to provide <mwl cell-modifier="vm.groupEvents(calendarCell)"> parameter and a JS function that would group events by a field (i.e. by color):

    vm.groupEvents = function(cell) {
      cell.groups = {};
      cell.events.forEach(function(event) {
        cell.groups[event.color] = cell.groups[event.color] || [];
        cell.groups[event.color].push(event);
      });
    };

[iammelvin]

@burtek Thanks i have done the exact same thing and i almost achieved what i want but why is the tooltip not visible if i use cell modifier as group events ?? Also in the screenshot i send previously you can see when the slide box is open it lists all the available events instead can i have only events based on particular color when i use eventclicked function ??

[Neha-saini]

I am not able to see different events by using groupEvents.
It's showing all the events as a single data.

===================HTML==================

<mwl-calendar
        events="events"
        view="calendarView"
        view-title="calendarTitle"
        view-date="viewDate"
        cell-modifier="groupEvents(calendarCell)"
        cell-auto-open-disabled="true"
></mwl-calendar>

=======================JS================

$scope.events = [
            {
                title: 'Event 1',
                type: 'warning',
                color: calendarConfig.colorTypes.warning,
                startsAt: moment().startOf('month').toDate()
            }, {
                title: 'Event 2',
                type: 'info',
                color: calendarConfig.colorTypes.info,
                startsAt: moment().startOf('month').toDate()
            }, {
                title: 'Event 3',
                type: 'info',
                color: calendarConfig.colorTypes.info,
                startsAt: moment().startOf('month').toDate()
            }, {
                title: 'Event 4',
                type: 'danger',
                color: calendarConfig.colorTypes.important,
                startsAt: moment().startOf('month').toDate()
            }, {
                title: 'Event 5',
                type: 'success',
                color: calendarConfig.colorTypes.success,
                startsAt: moment().startOf('month').toDate()
            }
];

$scope.groupEvents = function(cell) {
            cell.groups = {};
            cell.events.forEach(function(event) {
                cell.groups[event.type] = cell.groups[event.type] || [];
                cell.groups[event.type].push(event);
            });
        };

=========================IN THE ATTACHED SCREENSHOT============

1 aug show 5 but it should show 1 2 1 1

[burtek]

@Neha-saini
It would show that if you used correct template. The event grouping example uses special template:

calendarConfig.templates.calendarMonthCell = 'groupedMonthEvents.html';

    $scope.$on('$destroy', function() {
      calendarConfig.templates.calendarMonthCell = 'mwl/calendarMonthCell.html';
    });

---

@iammelvin I tried to reproduce your problem, but I was not able to. Could you provide plunker?

[iammelvin]

@burtek as you can see in the below image

When i click on a cell in month view the slide box opens with all event colors together instead can i open slide box for each color and show them alone ? And the next thing is when i hover over one event in that particular cell why i am not able to get a tooltip ??

[burtek]

I would still need a plunker. Or at least @mattlewis92's ideas...

[iammelvin]

@burtek i will have to write one give me some time i will come up with my code as plunker or a pen

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[burtek]

Closed for no response.