CODEWITHSUNDEEP
jqueryjquery-uidatepicker
Freitz
Freitz

Reputation: 198

How to run multiple function with returns in Jquery datePicker option beforeShowDay

I use the datepicker and mark days within the calendar. I have two functions (workdays and dates). Workdays determines and sets the working days. Dates determines the days to be colored. Every single function works fine, but I have to do both on the calendar. The order of the function call doesn't matter.

There are two types of days that are colored differently. 

  var arrayLength = Object.keys(dates).length
  for (var i = 0; i < arrayLength; i++) {
    if (new Date(dates[i].date).toString() == date.toString()) {
      return [true, dates[i].type, dates[i].note];
    }
  }
  return [true, ''];

Then I define which days can be marked with:

return [workingDays.indexOf (date.getDay ())> -1];

How can I call both returns in the beforeShowDay?

var workingDays = [1,2,3,4,5];

var dates = [
  {date: '05/13/2020', type: 'highlightFull', note: 'note1'},
  {date: '05/11/2020', type: 'highlightSemi', note: 'note2'}
];


function highlightDays(date) {

  // return [workingDays.indexOf(date.getDay()) > -1]; // First Return

  var arrayLength = Object.keys(dates).length // Second
   for (var i = 0; i < arrayLength; i++) {
     if (new Date(dates[i].date).toString() == date.toString()) {
       return [true, dates[i].type, dates[i].note];
     }
   }
   return [true, ''];
}

$(document).ready(function() {
  
  $('#datepicker').datepicker({
    beforeShowDay: highlightDays
  });
   
});
td.highlightFull {
  border: none !important;
  padding: 1px 0 1px 1px !important;
  background: none !important;
  overflow: hidden;
}

td.highlightFull a {
  background: #ad3f29 url(bg.png) 50% 50% repeat-x !important;
  border: 1px #88a276 solid !important;
}

td.highlightSemi {
  border: none !important;
  padding: 1px 0 1px 1px !important;
  background: none !important;
  overflow: hidden;
}

td.highlightSemi a {
  background: #ffff33 url(bg.png) 50% 50% repeat-x !important;
  border: 1px #88a276 solid !important;
}
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
  $( function() {
    $( "#datepicker" ).datepicker();
  } );
  </script>
</head>
<body>
 
<div id="datepicker"></div>
 
 
</body>
</html>

Upvotes: 0

Views: 367

Answers (2)

Freitz
Freitz

Reputation: 198

I have now solved it like this. Many thanks for the support!

Example: Wednesday, Saturday and Sunday are now blocked in the calendar and cannot be marked.

$(function() {
  var dates = [{
      date: '05/13/2020',
      type: 'highlightFull',
      note: 'note1'
    },
    {
      date: '05/11/2020',
      type: 'highlightSemi',
      note: 'note2'
    }
  ];

var workingDays = [6,0,3]; // 0 = Sunday

function highlightDays(date) {
  var res = [true, ""];
  
  if(workingDays.indexOf(date.getDay()) > -1) {
    res = [false, ""];
  }
  
  $.each(dates, function(k, v) {
    if (v.date === $.datepicker.formatDate("mm/dd/yy", date)) {
      res = [true, v.type, v.note];
    }
  });
  
  return res;
}

  $('#datepicker').datepicker({
    beforeShowDay: highlightDays
  });

});
td.highlightFull {
  border: none !important;
  padding: 1px 0 1px 1px !important;
  background: none !important;
  overflow: hidden;
}

td.highlightFull a {
  background: #ad3f29 url(bg.png) 50% 50% repeat-x !important;
  border: 1px #88a276 solid !important;
}

td.highlightSemi {
  border: none !important;
  padding: 1px 0 1px 1px !important;
  background: none !important;
  overflow: hidden;
}

td.highlightSemi a {
  background: #ffff33 url(bg.png) 50% 50% repeat-x !important;
  border: 1px #88a276 solid !important;
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div id="datepicker"></div>

Upvotes: 0

Twisty
Twisty

Reputation: 30893

Consider this example. It looks for Workdays (M - F) first and adds a class. If the day then is in your Object, that highlight is applied.

$(function() {
  var dates = [{
      date: '05/13/2020',
      type: 'highlightFull',
      note: 'note1'
    },
    {
      date: '05/11/2020',
      type: 'highlightSemi',
      note: 'note2'
    }
  ];

  function highlightDays(date) {
    var res = [true, ""];
    if (date.getDay() > 0 && date.getDay() < 6) {
      res = [true, "workday"];
    }
    $.each(dates, function(k, v) {
      if (v.date === $.datepicker.formatDate("mm/dd/yy", date)) {
        res = [true, v.type, v.note];
      }
    });
    return res;
  }

  $('#datepicker').datepicker({
    beforeShowDay: highlightDays
  });

});
td.highlightFull {
  border: none !important;
  padding: 1px 0 1px 1px !important;
  background: none !important;
  overflow: hidden;
}

td.highlightFull a {
  background: #ad3f29 url(bg.png) 50% 50% repeat-x !important;
  border: 1px #88a276 solid !important;
}

td.highlightSemi {
  border: none !important;
  padding: 1px 0 1px 1px !important;
  background: none !important;
  overflow: hidden;
}

td.highlightSemi a {
  background: #ffff33 url(bg.png) 50% 50% repeat-x !important;
  border: 1px #88a276 solid !important;
}

td.workday {
  border: none !important;
  padding: 1px 0 1px 1px !important;
  background: none !important;
  overflow: hidden;
}

td.workday a {
  background: #ccccff url(bg.png) 50% 50% repeat-x !important;
  border: 1px #88a276 solid !important;
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div id="datepicker"></div>

Upvotes: 1

Related Questions