Jquery fullcalendar - how to make current month (days) unselectable

Question

I am building a SharePoint-hosted app in SharePoint. Basicaly it is a time planning app. I used a jquery calendar plugin (fullcalendar). My question is I have a "lock" button. When user clicks the button it should make the calendar days unselectable (only the days in the current month). Appreciate if someone can help me with it.

I was trying like this.

function LockMonth() {
    var schedulecCalendar = $('#myCalendar').fullCalendar({
        selectable: false,

    });
}

When I run the app I can click on the calendar day and add event from the textbox to the calendar. But once I click on "lock" button then it should make the calendar unselectable. But It doesn't work.

Answer 1

Hi i have just put up a fiddle for you,updated fiddle hope that helps

SCRIPT

 $('#mycalendar').fullCalendar(
            {
             header: {
                    left: 'prev,next today',
                    center: 'title',
                    right: 'month,agendaWeek,agendaDay'
                    },

             dayClick: function( date, allDay, jsEvent, view ) { 
                    var myDate = new Date();
                    var isLocked=document.getElementById("locked")
                    var currMonth = getCurrentDisplayedMonth()
                    var blockedMonths = getMonthsBlockedByUserFromList();   
                    alert($.inArray(currMonth,blockedMonths))
                    if ($.inArray(currMonth,blockedMonths) != -1) {
                       alert("You cannot book on this day!");   
                         return 
                    }
                    else
                    {
                        alert("Excellent choice! We can book today..");    
                     }   
                 },      

             events: [
                        {
                            title  : 'event2',
                            start  : '2011-03-10',
                            end    : '2011-05-5'
                        }
                    ]
         }); 


$('#btnlocked').click(function(){
    //add the month to blocked list 
 var isLocked=document.getElementById("locked")
 if(isLocked.value=="false") {   
     isLocked.value=true;
    $('#btnlocked').val("Unlock Month")
         alert('Month locked')
    }
  else{
     isLocked.value=false;
    $('#btnlocked').val("Lock Month")
         alert('Month unlocked')
    }
});

function getMonthsBlockedByUserFromList(){
  //retrieve all months for the year blocked by respective user from SP list
  // return array of months blocked(0= Jan,1=Feb...4=May and so on) 
  //suppose follwing months are blocked
    var monthsBlockedByXyz= [0,4,5,6];
     return monthsBlockedByXyz;
}

function getCurrentDisplayedMonth(){
  var date = $("#mycalendar").fullCalendar('getDate');
  var month_int = date.getMonth();
    return month_int;
  //you now have the visible month as an integer from 0-11
}

HTML

<input type="hidden" id="locked" value="false"/>
<input type="button" id="btnlocked" value="Lock month"/>
<div id="mycalendar"> Calendar </div>