Adding different color of event to the calendar based on category.

[jarrettyew]

I am trying to implement a monthly calendar that has schedules and holidays. Does the plugin have default way to change the color of the event or I have to change it with css? Let's say green for schedule and blue for holidays.

[twinssbc]

@yewness You need to change the color with css.

[thanhdk]

right, and I think you should use with custom template

[wondergeek]

hi twinssbc,

can you show a sample code snippet on both html and typescript file that customize the calendar view color of each day of the month?

thanks

[twinssbc]

@wondergeek
For example, in html,

  <ng-template #template let-view="view" let-row="row" let-col="col">
    <div class={{getEventClass(view.dates[row*7+col].events)}}>{{view.dates[row*7+col].label}}</div>
  </ng-template>

  <calendar ... [monthviewDisplayEventTemplate]="template"></calendar>

In ts, you could add your customized logic to calculate a style/class based on the current date or events.

  getEventClass(events) {
    return 'test' + events.length;
  }

[Bhavana1622]

this is what i did and it worked. Hope this helps.

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

[scortex84]

Hi,
sorry for my bad english. Thank you very much for your exemple.
But, why the dates without events disappearing? How do they keep the default style?

thank you very much for your help !

[Bhavana1622]

I think this is what is happening

If you are using the example i posted above, its because you have 1 type of events in your array. Dates without events are not getting displayed due to the statement entered in your custom template.

for eg.

{{view.dates[row*7+col].label}}

view.dates[row*7+col].events:- will only display dates having events.
I would suggest using *ngIf to check whether events are present or not.

Or you could add other dates having no events to events array and keeping allDay:true and display color:black and then use the same custom template. That should work.

[scortex84]

Thank you very much ! I'm sorry, I'm a beginner...

If "view.dates[row*7+col].events" display only dates having events, is there another property to display all dates ?

I don't know how to use *ngIf... if you have a sample code showing what I want to do, it would be very nice!

thank you very much for your help !!

[Bhavana1622]

@scortex84
//In ts file

var events=[];
if(some conditions){
events.push({
title: 'Some Title',
startTime: startTime,
endTime: endTime,
eventColor: 'red'
});
}
else{
events.push({
title: 'Some Title2',
startTime: startTime,
endTime: endTime,
eventColor: 'black'
});
}

//in template

 <div *ngFor="let obj of view.dates[row*7+col].events">
                    <p [ngStyle]="{'color': obj.eventColor } ">{{view.dates[row*7+col].label}}</p>
</div>

/*
ngFor will basically loop in all the events array and display the dates using view.dates[row7+col].label
If there are no events the date will be black in color else red.
{{view.dates[row7+col].label}} <<---displays all dates
*/

/*
https://github.com/Bhavana1622/ionic2-calendar-event
check this link for more help
*/

Hope this helps.

[scortex84]

thank you very very much !! :-)

[Titoch]

Hi.
Is there a way to modify (or access) the parent TD from a customized template in order to change the event's TD class or style (background or inner-borders) depending on the events date, types?
Actually I manage to modify only the div or p inside the TD.
Thank you.

[twinssbc]

@Titoch Sorry, it seems your comment is not complete. The css class on the parent DOM is fixed. But you could override the styles for the css class. For example, you could set the background color of the parent DOM as transparent, then set different background color for the inner DOM element.

[rajkishoreandia]

my calendar dates are not showing and the view collapsed after adding different colors for different events.following is the template
<ng-template #template1 let-view="view" let-row="row" let-col="col">
<div ngFor="let obj of view.dates[row7+col].events">
<p [ngStyle]="{'background': obj.eventColor } ">{{view.dates[row*7+col].label}}

</div>[

](url)

[twinssbc]

@rajkishoreandia I think it's just some DOM and CSS manipulation issue. You could use the browser developer tools to hover on the elements to figure out what's wrong?

[Titoch]

Hi,
Maybe the issue comes from ngFor instead of *ngFor in the div?

[jcmendes9898]

Same problem as @rajkishoreandia . Did you manage to solve it?

[andrea-mori]

Hi,
here the solution for @rajkishoreandia and @jcmendes9898 :
calendar-custom.html.txt