Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

jquery fullcalendar

I am trying to integrate jquery full calendar plugin.. And I want to disable the past dates for selection.. So I can select only dates starting from current date. How is it possible? How can I filter the dates and specify a condition. I am new to jquery.

$(document).ready(function() {
    var date = new Date();
    var d = date.getDate();
    var m = date.getMonth();
    var y = date.getFullYear();

    var calendar = $('#calendar').fullCalendar({
        header: {
            left: 'prev,next today',
            center: 'title',
            right: 'month,agendaWeek,agendaDay'
        },
        selectable: true,
        selectHelper: true,
        select: function(start, end, allDay) {
            var title = prompt('Event Title:');
            if (title) {
                calendar.fullCalendar('renderEvent',
                    {
                        title: title,
                        start: start,
                        end: end,
                        allDay: allDay
                    },
                    true // make the event "stick"
                );
            }
            calendar.fullCalendar('unselect');
        },
        editable: true,
    });
});
like image 915
rubyist Avatar asked Jul 28 '11 14:07

rubyist


People also ask

What is FullCalendar?

FullCalendar is a JavaScript library that seamlessly integrates with such popular JavaScript frameworks as Vue, React, Angular. Thanks to its excellent documentation, one won't have trouble incorporating the library into projects.

What is JavaScript FullCalendar?

Fullcalendar is the most popular Javascript Calendar. It's powerful and lightweight and suitable for just about anything. For more info see the official siteand the Github repository.

Is FullCalendar an API?

FullCalendar provides settings, methods, and callbacks for interacting with and switching the current view. The initial view when the calendar loads. A View object contains information about a calendar view, such as title and date range.


2 Answers

In the select method, you are provided with the selected start and end date, and earlier in the method you got the current date in the date variable. So just compare them, and if it is less than date, handle the error.

select: function(start, end, allDay) {
  if(start < date)
  {
    // Do whatever you want here.
    alert('Cannot select past dates.');
    return;
  }

  var title = prompt('Event Title:');
  if (title) {
    calendar.fullCalendar('renderEvent', {
        title: title,
        start: start,
        end: end,
        allDay: allDay
      },
      true // make the event "stick"
    );
  }

  calendar.fullCalendar('unselect');
},
like image 116
Brandon Avatar answered Oct 03 '22 05:10

Brandon


Note regarding Brandon's answer, the popup will also appear if you click on the current date. You would need to check if the user clicked on today's date also:

if (start < date && start.getDate() != date.getDate() ) {
    alert('Cannot select past dates.');
    return;
}
like image 39
Stephen Stebok Selao Avatar answered Oct 03 '22 05:10

Stephen Stebok Selao