Color Events

[joseangelmr]

Hi!, Thanks for your work, very good. This version can add colors to events?. any solution?

Best regards

[twinssbc]

@joseangelmr I guess you want to use different colors on different events? I think you have to add some customized css classes in the template html files.

[ghost]

Hi,

I have colors coming from JSON String, how would you suggest parsing them to different events?

[twinssbc]

@mlgwebiz what kind of color format in your JSON string?If the format can be directly used by css. Then you can bind to the style attribute directly. For example, for a month view cell, you can do something like below:

<td ng-click="select(view.dates[0].date)" style="{background-color: view.dates[0].color}"
     ng-class="getHighlightClass(view.dates[0])">{{view.dates[0].label}}
</td>

I assume the colors are contained in the event array coming from the backend? I suggest separate the view and the data so that you can change the look and feel without changing the backend.

[Shounak17]

Hi, What will I have to do if I want past dates with events to have a different color(eg. Red) and keep the future dates with events of the same color (i.e Blue). And also if possible pop-up an alert for past dates(with events). Any help would be appreciated. Thanks :)

[twinssbc]

@Shounak17 You need to modify below method to compare the date and return the className you want. Then you set the background colour on this css class. When and how do you want to pop up the alert? Could you provide more details?

                scope.getHighlightClass = function (date) {
                    var className = '';
                    if (date.selected) {
                        className = 'monthview-selected';
                    } else if (date.current) {
                        className = 'monthview-current';
                    } else if (date.hasEvent) {
                        if (date.secondary) {
                            className = 'monthview-secondary-with-event';
                        } else {
                            className = 'monthview-primary-with-event';
                        }
                    }
                    if (date.secondary) {
                        if (className) {
                            className += ' text-muted';
                        } else {
                            className = 'text-muted';
                        }
                    }
                    return className;
                };

[Shounak17]

How do I compare ? what should I compare "date.date" with ? The css part is handled. Mostly I'll need to make date.hasOldEvent boolean similar to date.hasEvent. Where can that be done ?

I want a pop-up when a user clicks on past dates. And the events should not be listed for the old dates after the pop-up alert.

[twinssbc]

@Shounak17 You need to compare with the date.date with the current time so that you can return different classname for the past and the future event. For example,

    if(date.hasEvent && date.date < new Date()) {
        className = 'mgonthview-primary-with-old-event;
    }

Regarding your second requirement, I think you need to modify the below part in the month view, it displays the event in the selectedDate.events in the list. You need to add some check to not display the event when the selectedDate is a past date.

            <tr ng-repeat="event in selectedDate.events" ng-click="eventSelected({event:event})">
                <td ng-if="!event.allDay" class="monthview-eventdetail-timecolumn">{{::event.startTime|date: 'HH:mm'}}
                    -
                    {{::event.endTime|date: 'HH:mm'}}
                </td>
                <td ng-if="event.allDay" class="monthview-eventdetail-timecolumn">All day</td>
                <td class="event-detail">{{::event.title}}</td>
            </tr>
            <tr ng-if="!selectedDate.events">
                <td class="no-event-label" ng-bind="::noEventsLabel"></td>
            </tr>

To pop up an alert, you don't need to modify the source code, you can just add the timeSelected callback to fill your logic. You can refer to the detail in the README

[Shounak17]

The first thing worked beautifully. Thanks. For the second thing, I tried some check to not display the events when the selectedDate is a past date. I have initialised today = new Date(). Try 1 - I edited the ng-if. <tr ng-if="!selectedDate.events || selectedDate.date < today"> td class="no-event-label " ng-bind="::noEventsLabel"></td> </tr>

Try 2 - I added another ng-if <tr ng-if="selectedDate.date < today"> td class="no-event-label " ng-bind="::noEventsLabel"></td> </tr>

Try 3 - Tried making it a date object <tr ng-if="new Date(selectedDate.date) < new Date(today)"> td class="no-event-label " ng-bind="::noEventsLabel"></td> </tr>

So sorry for taking up your time and if I'm being silly. Thanks for being patient anyways and the awesome calendar that you've given us :) Cheers

[twinssbc]

@Shounak17 Did you solve your second requirement, or you need any help?

[Shounak17]

I'll need some help, please ! The things I've tried are not working.Although I'm getting the no-event-label below the events-list. I don't want the events-list to dsiplay at all.

[twinssbc]

@Shounak17 New method is not allowed in the expression. You can achieve this by modifying the code as below:

1. In monthview.html, add !selectedDate.past check to ng-show:

    <ion-content class="event-detail-container" has-bouncing="false" ng-show="showEventDetail && !selectedDate.past" overflow-scroll="false">

1. In calendar.js, when generating the date object, set the past field. Here is just an example, the comparison is not very accurate, you need to only compare the date part of the datetime.

                ctrl._getViewData = function (startTime) {
                    var startDate = startTime,
                        date = startDate.getDate(),
                        month = (startDate.getMonth() + (date !== 1 ? 1 : 0)) % 12;

                    var days = getDates(startDate, 42);
                    var today = new Date();
                    for (var i = 0; i < 42; i++) {
                        days[i] = angular.extend(createDateObject(days[i], ctrl.formatDay), {
                            secondary: days[i].getMonth() !== month,
                            past: days[i] < today
                        });
                    }

[Shounak17]

It worked. Awesome. But I'm not getting the "no-events-label" for any of the past dates. I tried this in month.html `

</tr>

` But not working.

[twinssbc]

@Shounak17 Try this?

<ion-content class="event-detail-container" has-bouncing="false" ng-show="showEventDetail" overflow-scroll="false">
        <table class="table table-bordered table-striped table-fixed event-detail-table">
            <tr ng-if="!selectedDate.past" ng-repeat="event in selectedDate.events" ng-click="eventSelected({event:event})">
                <td ng-if="!event.allDay" class="monthview-eventdetail-timecolumn">{{::event.startTime|date: 'HH:mm'}}
                    -
                    {{::event.endTime|date: 'HH:mm'}}
                </td>
                <td ng-if="event.allDay" class="monthview-eventdetail-timecolumn">All day</td>
                <td class="event-detail">{{::event.title}}</td>
            </tr>
            <tr ng-if="!selectedDate.events||selectedDate.past">
                <td class="no-event-label" ng-bind="::noEventsLabel"></td>
            </tr>
        </table>
    </ion-content>

[Shounak17]

Perfect ! Thanks so much.

[twinssbc]

I have added view customisation support in version 0.3.0. It now supports passing the customised template for the event cell in month/week/day view and event detail list in the month view

[Bhavana1622]

I've tried this and it works for me. Hope this helps.

https://github.com/Bhavana1622/ionic2-calendar-event