[FullCalendar 2] disabiling/gray out the past dates in the fullcalendar2

Forge Component
(27)
Published on 2019-03-29 by Daniel Filipe
27 votes
Published on 2019-03-29 by Daniel Filipe

Hi team,

in the web development we have a requirement like the Calendar should not allow the user to select the dates which are lesser than the current date. They should be disabled.

if today is 07-Feb-2020 then the days before 07-Feb-2020 should be in disabled state.

any one give suggestions on this.

Thanks

Solution

Hi Srinivas,

This is possible but not as easy as you might expect. There are events to handle like dragging an event to the disable date or clicking in the disable date. Mostlikely you also want the disabled dates to be visibly disable by having a different background/roreground color

Lets go through all the steps:.

1. Disable dates foreground/background color

To make visible which dates are disabled add an event to your list of events prior to calling ewEventSourceData.

See the screenshot for an example. Start date and end date is the range that should be disabled. You can also add multiple of these events for different ranges. Setting backgroundColor and/or color is then used to show disabled different than selectable dates.


2. Disallow dragging existing events in th disabled dates

For this you need to extend the AdvancedConfig parameter by adding an eventConstraint. What you here define is which dates are available for dragging the events to. Starting at today up to far in the future (i added 100 years, of course you can increase/decrease that).

eventConstraint: {
  start: '" + FormatDateTime(CurrDate(), "yyyy-MM-dd") + "', " + 
  "end: '" + FormatDateTime(AddYears(CurrDate(), 100), "yyyy-MM-dd") + "'" +
"},

3. Disallow creating new events in the disabled dates

For disabling creation of new events you need to extend the AdvancedConfig parameter, and add the selectConstraint:

selectConstraint: {
  start: '" + FormatDateTime(CurrDate(), "yyyy-MM-dd") + "', " +
  "end: '" + FormatDateTime(AddYears(CurrDate(), 100), "yyyy-MM-dd")  + "'" + 
"}"

The AdvancedConfig parameter can be found on the Calendar2 widget:

Regards,

Daniel

Solution

Daniël Kuhlmann wrote:

Hi Srinivas,

This is possible but not as easy as you might expect. There are events to handle like dragging an event to the disable date or clicking in the disable date. Mostlikely you also want the disabled dates to be visibly disable by having a different background/roreground color

Lets go through all the steps:.

1. Disable dates foreground/background color

To make visible which dates are disabled add an event to your list of events prior to calling ewEventSourceData.

See the screenshot for an example. Start date and end date is the range that should be disabled. You can also add multiple of these events for different ranges. Setting backgroundColor and/or color is then used to show disabled different than selectable dates.


2. Disallow dragging existing events in th disabled dates

For this you need to extend the AdvancedConfig parameter by adding an eventConstraint. What you here define is which dates are available for dragging the events to. Starting at today up to far in the future (i added 100 years, of course you can increase/decrease that).

eventConstraint: {
  start: '" + FormatDateTime(CurrDate(), "yyyy-MM-dd") + "', " + 
  "end: '" + FormatDateTime(AddYears(CurrDate(), 100), "yyyy-MM-dd") + "'" +
"},

3. Disallow creating new events in the disabled dates

For disabling creation of new events you need to extend the AdvancedConfig parameter, and add the selectConstraint:

selectConstraint: {
  start: '" + FormatDateTime(CurrDate(), "yyyy-MM-dd") + "', " +
  "end: '" + FormatDateTime(AddYears(CurrDate(), 100), "yyyy-MM-dd")  + "'" + 
"}"

The AdvancedConfig parameter can be found on the Calendar2 widget:

Regards,

Daniel

Hi Daniel,

Thank you for your suggestion.

Thanks

Srinivas