Date template for Calendar

[dannypritchard]

I'm submitting a ...

[x] feature request => Please check if request is not on the roadmap already https://github.com/primefaces/primeng/wiki/Roadmap

What is the motivation / use case for changing the behavior?
I recently switched from ngbootstrap to primeng, and everything is great except being able to highlight specific dates in any given week or month in the calendar, e.g. every friday and every monday for the next 2 weeks, then just every monday between 26/7/2017 and 24/12/2017, then nothing after that.

The way this is handled in ngbootstrap is by having a dayTemplate <ng-template> which is called for each day, and allows the adding of a style class in the template, so you'd have for example

<p-calendar [dayTemplate]="customDay" ...></p-calendar>

and then

<ng-template #customDay let-date="date">
    <span [class.highlightedDay]="isHighlightedDay(date)">
        {{ date.day }}
    </span>
</ng-template>

and with isHighlightedDay() as a method on the class component that the calendar is mounted on, which is called every time a month view is rendered.

I know this isn't the way things are handled in primeng, just trying to illustrate with an example what ngbootstrap do, as this is the only functionality from their library that I still have to use after switching over.

[mlakhara]

This could also be done by providing a function called dateClass which takes the given date as an argument and returns a string.

This would be same as rowClass in Primeng Datatable

[mlc-mlapis]

We would also very welcome the ability to highlight (using by an electable background color) some explicitly listed dates or an interval of dates (from min to max) to emphasize the importance of those days (for example a time frame of some event). It doesn't mean that only highlighted dates should be selectable. It should be certainly possible to have other selectable dates in addition to highlighted dates (which have some special meaning and that's why they are highlighted).

[cagataycivici]

I like the date template actually, we can pass in the date, will try this for 4.1.4.

[mlc-mlapis]

@cagataycivici ... I don't exactly understand what you mean by ...

I like the date template actually, we can pass in the date, will try this for 4.1.4.

Is it still meant that some dates would be possible to highlight in the calendar component?

Thanks for your explanation ... 📆

[cagataycivici]

<p-calendar [(ngModel)]="date10">
                <ng-template pTemplate="date" let-date>
                    <span [ngStyle]="{backgroundColor: (date.day < 21 && date.day > 10) ? '#5cb85c' : 'inherit'}" style="border-radius:50%">{{date.day}}</span>
                </ng-template>
</p-calendar>

[mlc-mlapis]

@cagataycivici ... great to see. 🥇 Thanks a lot.

[vpnocsen]

Hello,
Do you know when will the version 4.1.4 release? I am looking forward to this feature.
Thanks

[mlakhara]

@vpnocsen this is released in 4.2.rc1. You can see this in action in the showcase.

[fusionart]

Hello,
is there a way to dynamically highlight dates? For example to take these dates from an array or from a DB.
Because as shown, the dates are hard-coded in the html template of the component.
Thanks

[mlc-mlapis]

@fusionart ... but backgroundColor property is calculated via ternary operator ... and it is just JS thing.

[fusionart]

@mlc-mlapis One BIG thank you. You just made me rethink the whole picture and I made it work! Sorry for the spam :)

[sarojmhrzn]

@mlc-mlapis Hello bro, can you explain how can we highlight the dates of array?

[mlc-mlapis]

@sarojmaharjan99999 ... the template is called on each date ... so just lookup if the date is in your array ...

<p-calendar [(ngModel)]="date10">
                <ng-template pTemplate="date" let-date>
                    ...
                </ng-template>
</p-calendar>

[sarojmhrzn]

@mlc-mlapis Thanks for the reply but sorry. I still cannot get you.
suppose I have array like myDates = ['2018-09-12', '2018-10-11', .......'] . Now how can I highlight these dates to red color using . If you would demonstrate with code it would be more helpful.

[mlc-mlapis]

@sarojmaharjan99999 ... (date.day < 21 && date.day > 10) means some interval of days ... the same for each month (so only date.day is checked) but you have your own array of dates ... so you need to do the lookup against the array values, ... like yourArray.includes(date) which returns true is the date is in the array. Of course, ... the dates stored in the array has to be in the same format as date or you have to do some transformation before the lookup.

<span [ngStyle]="{backgroundColor: (date.day < 21 && date.day > 10) ? '#5cb85c' : 'inherit'}" style="border-radius:50%">{{date.day}}</span>

[sarojmhrzn]

@mlc-mlapis Thank you for your explanation but I am not able to solve this.
I have created stackblitz for this and this will help you too. I have added myDates array there could you please highlight those dates and add shareable link please?
https://stackblitz.com/edit/prime-ng-calendar-ejjtzc

[mlc-mlapis]

@sarojmaharjan999 ... here it is ...
https://stackblitz.com/edit/mlc-demo-primeng-calendar?file=app%2Fcalendar%2Fcalendar.component.html

The principle is showed by using a method which is not optimal from a performance point of view. Finally, some custom pipe should be used to eliminate not necessary calls and run it only once for each cell.

[sarojmhrzn]

@mlc-mlapis Thank you so much bro for you time and effort. Finally it works.
Many many thanks to you bro.

[sarojmhrzn]

@mlc-mlapis Hello sorry to disturb you once again, there are disabled dates and disabled days features on prime framework but is there any way to achieve enabled dates feature?

I have certain dates coming from backend and I only need to enable those dates on calendar.
Is there any way or idea?

thanks!

[mlc-mlapis]

@sarojmaharjan999 ... I don't think so. The logic depends on the number of enabled dates and if the calendar component is suitable to use at all for such a case. You can always combine minDate, maxDate, disabledDates + validator + styling enabled dates.

[sarojmhrzn]

@mlc-mlapis ohh! I actually need to enable the dates that you had highlighted by styling the dates in above stackblitz and disable all other dates.

Can you once again edit the stackblitz and enable those 4 dates and disable other days?
I would be very grateful if you give a try.

[mlc-mlapis]

@sarojmaharjan999 ... ah, you didn't understand it fully ... I meant that you could highlight the dates + control via a custom validator what a user can select, so it wasn't directly like pure enabling. But because of such highlighting, a user can't say that it wasn't clear. And for the rest of users with a bit longer thinking, the validator can do its job.

[sarojmhrzn]

ohh I see that will be good idea.

thank you so much bro! :)