Primeng: Calendar: define wether a date can be selected or not

Created on 25 Apr 2016  路  4Comments  路  Source: primefaces/primeng

At the moment with your Calendar component it is not possible to prevent that several date ranges are not selectable. With jQuery's datepicker this can be achieved by specifying a "beforeShowDay"-handler.

When will the Calendar support such a feature? What are your plans?

Most helpful comment

We were thinking about the following:

  1. We can provide a list of events as input to the calendar. An event has the following properties:
    startDate
    endDate
    css class name (optional)
    popup tooltip (optional)
    All days within this date range would then be not selectable.
    Sure this would mean a lot of logic to be implemented in the calendar.
  2. We can provide a (handler-)function which gets called before showing a day. The function retrieves the date as parameter. Depending on the return value of this function(true/false) the corresponding day is selectable or not. This would be like the md-date-filter attribute from the md-datepicker of Angular 1.
    If the handler function had to return also a css class name and a tooltip it would be close to the API of the jQuery datepicker.

What do you think about these 2 proposals?

All 4 comments

I'm not sure about the best way to add support for beforeShowDay yet to customize day rendering. I'd appreciate your feedback.

We were thinking about the following:

  1. We can provide a list of events as input to the calendar. An event has the following properties:
    startDate
    endDate
    css class name (optional)
    popup tooltip (optional)
    All days within this date range would then be not selectable.
    Sure this would mean a lot of logic to be implemented in the calendar.
  2. We can provide a (handler-)function which gets called before showing a day. The function retrieves the date as parameter. Depending on the return value of this function(true/false) the corresponding day is selectable or not. This would be like the md-date-filter attribute from the md-datepicker of Angular 1.
    If the handler function had to return also a css class name and a tooltip it would be close to the API of the jQuery datepicker.

What do you think about these 2 proposals?

I like the second option, We have some changes to your code, to make the weekends disable, and the way we did it was using the beforeShowDay and date.getDay.

Is it something that you were thinking about?

In the meantime we switched to another solution for the datepicker. So we use a different datepicker now.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

markgoho picture markgoho  路  3Comments

jisqaqov picture jisqaqov  路  3Comments

lilling picture lilling  路  3Comments

pchristou picture pchristou  路  3Comments

garethlewis picture garethlewis  路  3Comments