Tuesday, January 19, 2016

Exclude Custom holiday between given date range in Jquery Fullcalendar


Go to: http://jsfiddle.net/100thgear/h9cc6/

above site will add jquery fullcalendar reference implicitly, so you just have to add core code to the

respective blocks.

 

you will be redirected to following site as follows.


 

you could paste following HTML code in HTML code block:

 

<div style="border:solid 2px red;">
  <div id='calendar'></div>
</div>

Paste following code in javascript code block:

//'You could change holiday days in Day Name such as "Monday"... '

//for testing purpose i had taken limited date range from '2016-1-11' to '2016-1-15'

//Start Date :2016-1-11 00:00:00
//End Date : 2016-1-15 00:00:00

 

(function() {
  var id = 34;
  var start = '2016-1-11 00:00:00';
  var end = '2016-1-15 00:00:00';
  var title = 'Custom Title';
  var colour = 'Red';
  var holiday = 'Monday,Friday';
  AddCalendarEventExclude(id, start, end, title, colour, holiday);
})();

//Get date format as we get in 'new Date('our date in string')'
function getFormattedDate(date) {
  var year = date.getFullYear();
  var month = (1 + date.getMonth()).toString();
  month = month.length > 1 ? month : '0' + month;
  var day = date.getDate().toString();
  day = day.length > 1 ? day : '0' + day;
  return year + '/' + month + '/' + day + ' 00:00:00';
}
//Convert Date functionality happens here
function dateConvertion(conDate, purp) {
  conDate = conDate.split(" ");
  if (purp == 'DayName') {
    return conDate[0].replace(/-/g, ',');
  } else if (purp == 'calendarRender') {

    var dd = conDate[0].replace(/[/]/g, ',');
    dd = dd.split(',');
    ddY = dd[0];
    ddM = dd[1] - 1;
    ddD = dd[2];
    return ddY + ',' + ddM + ',' + ddD;

  } else {
    convDate = conDate[0].split('-');

    return (convDate[1] + '/' + convDate[2] + '/' + convDate[0]);
  }

}

function getDayNameByDate(sd, ed) {
  var startDate = new Date(dateConvertion(sd, 'ForLoop'));
  var endDate = new Date(dateConvertion(ed, 'ForLoop'));
  var dict = [];

  for (var iDate = new Date(startDate); iDate <= endDate; iDate.setDate(iDate.getDate() + 1)) {
  
    var d = new Date(iDate);
    var weekday = new Array(7);
    weekday[0] = "Sunday";
    weekday[1] = "Monday";
    weekday[2] = "Tuesday";
    weekday[3] = "Wednesday";
    weekday[4] = "Thursday";
    weekday[5] = "Friday";
    weekday[6] = "Saturday";

    var dayName = weekday[d.getDay()];
 
    dict.push({
      key: getFormattedDate(iDate),
      value: dayName
    });
  }
  return dict;
}

function AddCalendarEventExclude(id, start, end, title, colour, holiday) {

  var dict = [];

//Finding name of day by date using getDayNameByDate()
  dict = getDayNameByDate(start, end);
  var holidays = holiday.split(',');

  var events_array = [];
  var sDate = '';
 
  var temp;
  var tempDict=[];

//we get a dictionary type of array which contains Date and relevant Day Name in var dict=[];

//looping dict array
  for (var i = 0; i < dict.length; i++) {
   //Taken holiday in array variable by applying split function

  // looping holidays array

    for (var k = 0; k < holidays.length; k++) {
     if (k == 0) {
    temp=holidays[0];
    }
    else{
    temp=holidays[k];
    }
       if (temp== dict[i].value) {

       //checking holiday name is equal in dict array value where Day names are stored

       // if  yes then remove day name from dict array and save it as 'holiday'
      dict[i].value='holiday';
       continue;
      }
    }//for (; k < holidays.length; k++)
   }//for (var i = 0; i < dict.length; i++)
  //again loop dict array which contains holiday string on holidays instead of Day names

//form and new array called events_array having essential variables "id,title,start,color"
  for (var i = 0; i < dict.length; i++){
  if(dict[i].value!='holiday'){
   sDate = dateConvertion(dict[i].key, 'DayName');
        //FullCalendar code comes here
    events_array.push({
        id: id,
        title: title,
        start: new Date(sDate), //new Date(2016, 0, 20)
        color: colour
      });
    }
  }

//after forming events_array array pass it to Jquery Fullcalendar call
    $('#calendar').fullCalendar({
      selectable: true,
      events: events_array,
      eventRender: function(event, element) {
        element.attr(title, event.tip);
      }
    });
 }

finally press Run and you will see the excluded custom holiday in the fullcalendar.

 


 

No comments:

Post a Comment