40
Views
2
Comments
Solved
[FullCalendar 2] How to select only one day in FullCalendar
fullcalendar-2
Web icon
Forge asset by João Grazina
Application Type
Reactive

Hi everyone, 


As the title says, the question is the following, how can I limit the calendar to select only one day? I have tried with the selectConstraint and eventConstraint property but I do not achieve the expected result. 

I would appreciate an example. 


Cheers!

 Jorge Orellana

2021-03-18 21-03-15
Benjith Sam
 
MVP
Solution

Hi Jorge,

One of the approaches for your use case is to define the logic to prevent the users from selecting more than one day under the selectAllow callback function definition.

Refer to the documentation: https://fullcalendar.io/docs/selectAllow

  • In the Calendar block - Include the below-mentioned selectAllow callback function definition as the AdvancedOptions property field value.

Advanced Options:

selectAllow: function(selectInfo){
    //  create a day
    var oneDay = 24 * 60 * 60 * 1000;
    var startDay = selectInfo.start;
    //  FullCalendar always gives next next day of select end day, so do minus one day
    var endDay = selectInfo.end - oneDay;
    var count = Math.round(Math.abs((startDay - endDay) / oneDay));
    //  starts at 0, so add to start at 1
    var dayCount = (count + 1);
    if(dayCount < 2){
        return true;
    }else{
        return false;
    }
}

Demo screen: BasicViews

I hope this helps you!


Kind regards,

Benjith Sam

2024-07-31 13-58-08
Jorge Orellana
Champion

the forge component used is: 

https://www.outsystems.com/forge/component-overview/7696/fullcalendar-reactive


(I added it wrong to the description)

2021-03-18 21-03-15
Benjith Sam
 
MVP
Solution

Hi Jorge,

One of the approaches for your use case is to define the logic to prevent the users from selecting more than one day under the selectAllow callback function definition.

Refer to the documentation: https://fullcalendar.io/docs/selectAllow

  • In the Calendar block - Include the below-mentioned selectAllow callback function definition as the AdvancedOptions property field value.

Advanced Options:

selectAllow: function(selectInfo){
    //  create a day
    var oneDay = 24 * 60 * 60 * 1000;
    var startDay = selectInfo.start;
    //  FullCalendar always gives next next day of select end day, so do minus one day
    var endDay = selectInfo.end - oneDay;
    var count = Math.round(Math.abs((startDay - endDay) / oneDay));
    //  starts at 0, so add to start at 1
    var dayCount = (count + 1);
    if(dayCount < 2){
        return true;
    }else{
        return false;
    }
}

Demo screen: BasicViews

I hope this helps you!


Kind regards,

Benjith Sam

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