CODEWITHSUNDEEP
javascriptjqueryangularjsfullcalendar
MuruGan
MuruGan

Reputation: 1420

How to disable previous dates in Ui calendar?

I'm new to Ui calendar. I just wanna to know how to disable previous dates in Ui-calendar using angularjs. Eventdrop, EventResize and eventclick everything works fine for me and i wanna disable previous dates so that the events in the calendar cannot be dropped or resized to the previous dates! Thanks in advance.

Upvotes: 0

Views: 322

Answers (2)

ADyson
ADyson

Reputation: 61914

To set the time period where events can dragged/dropped, set the eventConstraint property:

eventConstraint: {
  start: moment(),
  end: moment().add(100, 'years')
}

See https://fullcalendar.io/docs/event_ui/eventConstraint/

However, this only covers dragging/dropping of existing events. That might be enough for you, but if you also need to restrict where the user can drag to create new events, you will need to specify the selectConstraint option in exactly the same way:

selectConstraint: {
  start: moment(),
  end: moment().add(100, 'years')
}

https://fullcalendar.io/docs/selection/selectConstraint/

Note that setting moment() as the start will restrict dragging to literally the current instant in time (when the calendar is rendered to the browser). If you want to be a bit more liberal and allow anything on the current day, you could set it as:

start: moment().startOf('day')

Or to restrict to dates starting from tomorrow:

start: moment().startOf('day').add(1, "days")

See http://momentjs.com/docs/#/manipulating/ for more possibilities.

Upvotes: 1

MuruGan
MuruGan

Reputation: 1420

by adding this below line codes ui.calendar config, it prevents events drop to previous dates

eventConstraint: {
        start: moment().format('YYYY-MM-DD'),
        end: '2100-01-01' // hard coded goodness unfortunately
    }

Upvotes: 0

Related Questions