233
Views
2
Comments
Solved
[FullCalendar 2] disabiling/gray out the past dates in the fullcalendar2 
Question
fullcalendar-2
Web icon
Forge asset by João Grazina

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

2024-07-05 14-16-55
Daniël Kuhlmann
 
MVP
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

UserImage.jpg
Srinivas Nalamati

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

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.