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.

1 Answer 1


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


             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();   
                    if ($.inArray(currMonth,blockedMonths) != -1) {
                       alert("You cannot book on this day!");   
                        alert("Excellent choice! We can book today..");    

             events: [
                            title  : 'event2',
                            start  : '2011-03-10',
                            end    : '2011-05-5'

    //add the month to blocked list 
 var isLocked=document.getElementById("locked")
 if(isLocked.value=="false") {   
    $('#btnlocked').val("Unlock Month")
         alert('Month locked')
    $('#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


<input type="hidden" id="locked" value="false"/>
<input type="button" id="btnlocked" value="Lock month"/>
<div id="mycalendar"> Calendar </div>
  • Thank you for your code I really appreciate it. It worked for only the current month but I want to lock some specific month as well like past month februari or future month october. How can I lock independently different months?
    – Sunreuz
    Commented May 18, 2015 at 16:06
  • yes i had made it for current month, can you tell me how you determine which month to blocks so that i would modify the code Commented May 18, 2015 at 16:22
  • Once the user lock the current month, notification will be sent to the admin and the user will no longer make any change in the calendar unless the admin gives him the right to do so. This is monthly activity and the user should be able to lock(submit) for subsequent months as well.
    – Sunreuz
    Commented May 18, 2015 at 18:37
  • Let me know if something is unclear.
    – Sunreuz
    Commented May 18, 2015 at 21:18
  • I just have a doubt where do you plan to save/store the data when xyz month is been locked by a particular user. Commented May 19, 2015 at 4:47

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.